国产女人在线小视频,日本在线一二三四五,日本视频黄页

vue 特點(diǎn)：

有自己的生態(tài)圈
運(yùn)行快，虛擬DOM
無刷新更新數(shù)據(jù)

基礎(chǔ) -指令

v-html =》將傳入數(shù)據(jù)中的標(biāo)簽內(nèi)容提出來顯示
v-text => 將傳入數(shù)據(jù)中的標(biāo)簽和內(nèi)容全部顯示出來

<body>
  <div id="app">
    <p v-html="txt1"></p>
    <p v-text="txt2"></p>
  <div>
  <script src="./vue.js" ></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        txt1: '<h1>v-html</h1>',
        txt2: '<h1>v-text</h1>'
      }
    })
  </script>
</body>

顯示如下圖：

v-html-text.png

v-cloak => 必須配合display:none 才能解決{{}}的閃現(xiàn)問題
- 作用：
  - 讓具有v-cloak的標(biāo)簽都隱藏
  - 等數(shù)據(jù)都加載成功之后在顯示

<style>
  [v-cloak]{
    display: none;
  }
</style>
<div id="app" v-cloak>{{}}</div>

v-model =>動(dòng)態(tài)綁定數(shù)據(jù)

<input type="text" v-model="txt" />    // txt 對應(yīng) 實(shí)例data數(shù)據(jù)中的屬性txt

v-once =》默認(rèn)數(shù)據(jù)只綁定一次

  <p v-once>{{txt==='hello' ? 'hello world' : txt}}</p>

v-if / v-else / v-show
- v-if / v-else 是對DOM元素的增加和刪除，相當(dāng)于appendChild 和removeChild
  - 用處：如果只對DOM操作一次，建議使用v-if ，頻繁操作的話不建議使用
- v-show 是對display的block 和 none
  - 用處：頻繁操作DOM的話建議使用

  <body>
    <div id="app">
        <p v-if="bok">{{txt}}</p>
        <p v-show="bok">{{txt}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                txt: 'Hello world !',
                bok: true
            }
        })
    </script>
</body>

顯示結(jié)果如下圖：
值為true的圖

true.png

值為false的圖

false.png

v-for => 用來遍歷對象和數(shù)組

<body>
    <div id="app">
        <ul>
            <li v-for="(item,i) in datas">{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data:{
                datas:[1,2,3,4,5,6]
            }
        })
    </script>
</body>

結(jié)果如下圖：

v-for.png

表達(dá)式 {{}}

獲取動(dòng)態(tài)數(shù)據(jù)
```
 <p> {{txt}}</p>  
```

設(shè)置默認(rèn)值，此處設(shè)置默認(rèn)值時(shí)無法改變的，可以在實(shí)例設(shè)置默認(rèn)值

  //  表達(dá)式設(shè)置默認(rèn)值
  {{txt = '設(shè)置默認(rèn)值'}} 
  //  實(shí)例設(shè)置默認(rèn)值
  data:{
    txt : '默認(rèn)值' 
  }

直接進(jìn)行運(yùn)算和比較

  <body>
  <div id="app">
    // 判斷 
    {{txt===true ? 'Hellow world' : txt}}
    // 運(yùn)算
    {{a+b}}
  </div>
  <script>
    let vm = new Vue({
      el:'#app,
      data:{
        txt: true,
        a: 1,
        b: 3
      }
    })
  </script>
</body>

vue 體驗(yàn)

vue ： json+HTML =》通過表達(dá)式“”{{}}“”填入動(dòng)態(tài)數(shù)據(jù)

<body>
    <div id="app">{{name}}</div>       //  {{name}} 接收動(dòng)態(tài)數(shù)據(jù)，并顯示在頁面上
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({             // 創(chuàng)建一個(gè)vue實(shí)例
            el: "#app",                //  實(shí)例可以控制的范圍
            data:{                     // 數(shù)據(jù)都在data對象內(nèi)
                name: 'Hello world !'  //  數(shù)據(jù)
            }
        })
    </script>
</body>

雙向數(shù)據(jù)綁定

vue 為MVVM的框架：即為數(shù)據(jù)影響視圖，視圖影響數(shù)據(jù)，主要用在form元素中

<body>
    <div id="app">
        <input type="text" v-model="txt">   // v-model：動(dòng)態(tài)綁定綁定數(shù)據(jù)
        <p>{{txt}}</p> 
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                txt: ''
            }
        })
    </script>
</body>

事件

事件綁定的函數(shù)，放在methods中；
動(dòng)態(tài)數(shù)據(jù)，放在data中
v-on :事件類型 =》 v-on:click
- 簡寫為：@click
事件綁定中，帶不帶括號"()" 的區(qū)別
- 帶括號：
  - 可以傳參
  - 必須"手動(dòng)"傳入事件對象$event

<body>
    <div id="app">
        <ul>
            <li v-for="(item,i) in datas" v-on:click="fn(i,$event)">
                <h1>{{item.name}}</h1>
                <p>{{item.age}}</p>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                datas: [
                    {name:'a',age:1},
                    {name:'b',age:2},
                    {name:'c',age:3},
                    ]
            },
            methods:{
                fn(i,e){
                    console.log(i,e);
                }
            }
        })
    </script>
</body>

修飾符通過"."操作

鼠標(biāo)事件@click
鍵盤事件 @keydown / @keyup
- @keydown.down
- @keydown.up
- @keydown.enter
- @keydown.鍵值
@click.stop =》阻止事件冒泡
@click.prevent =》阻止默認(rèn)事件
串聯(lián)使用： @keydown.stop.prevent

動(dòng)態(tài)綁定用冒號" : " 來綁定

v-bind:src 簡寫為 :src
- 所有標(biāo)簽元素身上的屬性，都能簡寫為 " : 屬性" 來獲取動(dòng)態(tài)數(shù)據(jù)

動(dòng)態(tài)的class樣式

對象

<div :class="{樣式名：計(jì)算出的Boolean值}">  </div>

數(shù)組

<div :class="[變量名1，變量名2]"></div>
data:{
  變量1: '樣式1',
  變量2: '樣式2'
}

動(dòng)態(tài)的style樣式
- 行間樣式
- 獲取數(shù)據(jù)中樣式

<body>
    <div id="app">
        // 動(dòng)態(tài)行間樣式
        <p :style="{background: 'red',color:'white'}">aaaaaaa</p>
        // 動(dòng)態(tài)獲取數(shù)據(jù)中樣式
        <p :style="[a,b]">bbbbbbb</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                bok: true,
                a:{
                    background: 'blue'
                },
                b:{
                    color: 'white'
                }
            }

        })
    </script>
</body>

demo 焦點(diǎn)切換

<body>
    <div id="app">
        <div class="container">
            <ul class="list-group h4">
                <li @click="fn(i)" v-for="(item,i) in datas" class="list-group-item" :class="{active:index===i}">
                    <p>姓名 : {{item.name}} ; 年齡 : {{item.age}}</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let datas=[
            {name: 'a',age: 1},
            {name: 'b',age: 2},
            {name: 'c',age: 3},
            {name: 'd',age: 4},
        ]
        let vm = new Vue({
            el: '#app',
            data: {
                datas,
                index: 0
            },
            methods: {
                fn(i){
                    this.index = i;
                }
            }
        });
    </script>
</body>

計(jì)算屬性：computed

計(jì)算屬性將被混入到Vue實(shí)例中
所有的getter和setter的this上下文自動(dòng)綁定為Vue實(shí)例
計(jì)算屬性的結(jié)果會被緩存
注意：此處不能使用箭頭函數(shù)來定義計(jì)算屬性函數(shù)

demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計(jì)算屬性</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="animate.css">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="container h3">
            <input type="text" class="form-control" v-model="txt">
            <ul class="list-group">
                <transition-group enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
                    <li key="i" v-for="(item,i) in datas" class="list-group-item">{{item}}</li>
                </transition-group>
            </ul>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                txt: '',
                lists:['aaa','bbbb','ccccc']
            },
            computed:{
                // 在計(jì)算屬性中，直接以函數(shù)形式只有g(shù)et功能
                datas(){
                    let arr = [];
                    this.lists.forEach(item=>{
                        item.toString().includes(this.txt) && arr.push(item);
                    })
                    return arr;
                }
            }
        })
    </script>
</body>
</html>

計(jì)算屬性中的datas方法以datas屬性中g(shù)et方法代替

// 更替后效果完全一樣
datas:{
   get(){
       let arr = [];
       this.lists.forEach(item=>{
           item.toString().includes(this.txt) && arr.push(item);
        })
       return arr;
    }
}

在datas對象中有g(shù)et方法，自然就少不了set方法

set : 顧名思義就是用來設(shè)置屬性值的

datas:{
  get(){ 
    // 獲取
  },
  set(val){
    // 設(shè)置
  }
}

set 賦值
- 通過實(shí)例調(diào)用datas來賦值

set(val){
  // val 自動(dòng)接收值
  console.log(val);
}
vm.datas = 'ccc';

自定義鍵盤事件的修飾符

全局設(shè)置Vue.config

Vue.config 是一個(gè)對象，包含Vue的全局配置，可以在啟動(dòng)應(yīng)用之前修改屬性
- 可修改的屬性
  - slient
  - optionMergeStrategies
  - devtools
  - errorHandler
  - warnHandler
  - ignoredElements
  - keyCodes
  - performance
  - productionTip

<body>
<div id="app" >
   <input type="text" @keydown.p="fn" >
   <script src="vue.js">
      // 通過全局設(shè)置keyCodes，自定義鍵盤事件的修飾符
      Vue.config.keyCodes.p = 80;
      let vm = new Vue({
          el: "#app",
          methods:{
            fn(){
              alert(111);
            }
          }
      })
   </script>
</div>
</body>

組件

組件是一個(gè)對象
- 包含：
  - 模板
    - 模板是字符串
  - 數(shù)據(jù)
  - 方法 / 函數(shù)
  - 生命周期鉤子函數(shù)，等
組件特性
:is -> 判斷
slot -> 接收來自顯示寫入組件的內(nèi)容

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組件</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 父組件顯示 -->
        <parent></parent>
    </div>
    <!-- 父組件內(nèi)容 -->
    <template id="parent">
        <div>
            <h1>Hello,我是{{name}}</h1>
            <!-- 子組件顯示 -->
            <children>Hi</children>
        </div>
    </template>
    <!-- 子組件內(nèi)容 -->
    <template id="children">
        <div>
            <h1><slot></slot>,我是{{name}}</h1>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        // 子組件
        let children={
            template:"#children",
            data(){
                return{
                    name: "丹丹"
                }
            }
        }
        // 父組件
        let parent = {
            template: "#parent",
            data(){
                return{
                    name: "蛋蛋"
                }
            },
            // 子組件注冊
            components:{children}
        }
        let vm = new Vue({
            el: "#app",
            // 父組件注冊
            components:{parent}
        })
    </script>
</body>
</html>

瀏覽器渲染：

組件.png

組件數(shù)據(jù)通信

概括：
- 父給子傳遞數(shù)據(jù)通過屬性傳遞，通過props接收
- 子給符傳遞數(shù)據(jù)通過$emit傳遞，通過函數(shù)接收
  - 也就是事件訂閱發(fā)布的思想

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子互相傳遞數(shù)據(jù)</title>
</head>
<body>
    <div id="app">
        <parent></parent>
    </div>
    <template id="p">
        <div>
            <h2>我是parent,{{age}}歲,我children{{cAge}}</h2>
            <!-- 
                :pr   => children組件接收parent組件傳遞的數(shù)據(jù) 
                @send => parent組件接收children組件傳遞的數(shù)據(jù)
            -->
            <children :pr="age" @send="fn"></children>
        </div>
    </template>
    <template id="c">
        <div>
            <!-- 
                children組件通過@click 點(diǎn)擊事件觸發(fā)fn函數(shù)發(fā)送數(shù)據(jù)
             -->
            <h2 @click="fn">我是children,{{age}}歲,我的parent{{pr}}歲</h2>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            components:{
                parent:{
                    template:'#p',
                    data(){
                        return {
                            age: 48,
                            cAge: 0
                        }
                    },
                    methods: {
                        // parent組件通過fn方法接收children發(fā)送的數(shù)據(jù) ， 也就是訂閱
                        fn(val){
                            this.cAge = val;
                        }
                    },
                    components:{
                        children:{
                            template: '#c',
                            data(){
                                return {
                                    age: 18
                                }
                            },
                            // children組件通過props對象接收parent組件發(fā)送的數(shù)據(jù)
                            props:{
                                pr:{
                                    // 設(shè)置接收的數(shù)據(jù)類型
                                    type: Number,
                                    // 默認(rèn)值
                                    default: 0,
                                    // 進(jìn)行校驗(yàn)
                                    vilidator:function(val){
                                        return val > 28;
                                    },
                                    // 是否為必傳，true為必傳，不設(shè)置此屬性或?qū)傩灾禐閒alse為不必傳
                                    required: true
                                }
                            },
                            methods: {
                                // children組件通過$emit發(fā)送數(shù)據(jù) ， 也就是發(fā)布
                                fn(){
                                    this.$emit('send',this.age);
                                }
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

點(diǎn)擊children組件后的瀏覽器渲染結(jié)果

數(shù)據(jù)通信-訂閱發(fā)布.png

路由

注冊路由組件
- 組件即對象
創(chuàng)建路由實(shí)例
- routes 為數(shù)組 [ ]
在Vue實(shí)例vm中注冊路由
在app中，添加導(dǎo)航和對應(yīng)顯示的模塊
- 導(dǎo)航鏈接： <router-link to=""></router-link>
- 顯示模塊：<router-view></router-view>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router : demo1</title>
    <style>
        a{
            text-decoration: none;
        }
        .router-link-exact-active.router-link-active{
            background: red;
            color: white;
        }
        .style{
            padding: 10px;
            background: lightblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 4. 添加導(dǎo)航和隊(duì)形顯示的模塊 -->
        <router-link to="/home" class="style">首頁</router-link>
        <router-link to="/list" class="style">列表頁</router-link>
        <router-view></router-view>
    </div>
    <template id="home">
        <div>
            <h1>我是首頁</h1>
            <router-link to="/home/login" class="style">登錄</router-link>
            <router-link to="/home/regist" class="style">注冊</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="list">
        <div>
            <h1>我是列表頁</h1>
            <router-link to="/list/news/1" class="style">new1</router-link>
            <router-link to="/list/news/2" class="style">new2</router-link>
            <router-link to="/list/news/3" class="style">new3</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        // 1. 注冊路由組件，組件為對象
        let Home = {
            template: "#home"
        };
        let List = {
            template: "#list"
        };
        let Login = {
            template: `<h1>我是登錄頁面</h1>`
        };
        let Regist = {
            template: `<h1>我是注冊頁面</h1>`
        }
        // routes為數(shù)組
        let routes = [
            {path: '/home',component: Home,children:[
                {path: 'login',component: Login},
                {path: 'regist',component: Regist}
            ]},
            {path: '/list',component: List,children:[
                {path: 'news/:id',component:{template:`<h1>這是文章{{$route.params.id}}</h1>`}}
            ]}
        ]
        // 2.創(chuàng)建路由實(shí)例
        let router = new VueRouter({
            routes
        })
        // 3. 在vm中注冊路由
        let vm = new Vue({
            router,
            el: "#app"
        })
    </script>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue : 配合es6+bootstrap

vue : 配合es6+bootstrap

vue 特點(diǎn)：

基礎(chǔ) -指令

表達(dá)式 {{}}

vue 體驗(yàn)

雙向數(shù)據(jù)綁定

事件

修飾符通過"."操作

動(dòng)態(tài)綁定用冒號" : " 來綁定

demo 焦點(diǎn)切換

計(jì)算屬性：computed

demo1

計(jì)算屬性中的datas方法以datas屬性中g(shù)et方法代替

在datas對象中有g(shù)et方法，自然就少不了set方法

自定義鍵盤事件的修飾符

組件

demo

組件數(shù)據(jù)通信

demo

路由

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue : 配合es6+bootstrap

vue 特點(diǎn)：

基礎(chǔ) -指令

表達(dá)式 {{}}

vue 體驗(yàn)

雙向數(shù)據(jù)綁定

事件

修飾符 通過"."操作

動(dòng)態(tài)綁定 用冒號" : " 來綁定

demo 焦點(diǎn)切換

計(jì)算屬性：computed

demo1

計(jì)算屬性中的datas方法以datas屬性中g(shù)et方法代替

在datas對象中有g(shù)et方法，自然就少不了set方法

自定義鍵盤事件的修飾符

組件

demo

組件數(shù)據(jù)通信

demo

路由

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

修飾符通過"."操作

動(dòng)態(tài)綁定用冒號" : " 來綁定

在datas對象中有g(shù)et方法，自然就少不了set方法