久久狠狠高潮亚洲,三区国产在线视频,99精品麻豆国产综合

作者：燁竹

本文參考：
https://vuejs.org/v2/guide/list.html
http://www.runoob.com/vue2/vue-forms.html

Vue.js（讀音 /vju?/, 類(lèi)似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件
生命周期詳解：https://blog.csdn.net/qq_25186543/article/details/79470184

基本語(yǔ)法：

一、結(jié)構(gòu)：
Vue.js 是個(gè)專(zhuān)注在視圖層(View) 的框架，幫助開(kāi)發(fā)者切分前端的資料狀態(tài)和運(yùn)作邏輯；（類(lèi)似土豆變葡萄，土豆是一個(gè)整體，而葡萄想吃哪部分都容易，由你決定各自獨(dú)立運(yùn)作或是相連）

葡萄自然有個(gè)供應(yīng)養(yǎng)分的起始點(diǎn)，也就是根。讓我們?nèi)肟赐觊L(zhǎng)怎樣

//掛載點(diǎn)為#app，內(nèi)容為data里面的內(nèi)容
<div id="app">
    {{ message }}
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
</srcipt>

我們可以從根向下延伸，長(zhǎng)出更多顆葡萄，這一個(gè)個(gè)葡萄皆可個(gè)別定義，稱(chēng)為元件(Component)。
下面例子加了menu 和description 兩個(gè)元件

<div id="app">
    {{ message }}
    <menu-section></menu-section>
    <description-section></description-section>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    components: {
        'menu-section': {
            template: '<ul><li v-for="item in menuItems">{{ item.text }}</li></ul>',
            data: function() {
                return {
                    menuItems: [{
                        text: 'About me'
                    }, {
                        text: 'Articles'
                    }, {
                        text: 'contact'
                    }]
                }
            }
        },
        'description-section': {
            template: '<p>{{ text }}</p>',
            data: function() {
                return {
                    text: 'Hello, I am Ralph.'
                }
            }
        }
    }
});
</script>

二、寫(xiě)法（兩種）
1.直接引入Vue.js（template與html混編）

//<menu-section>為例
<body>
    <div id="app">
        {{ message }}
        <menu-section></menu-section>
    </div>
    
    <template id="menuTemplate">
        <ul>
            <li v-for="item in menuItems">{{ item.text }}</li>
        </ul>
    </template>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'vue rock!'
            },
            /* 局部註冊(cè) (Local Registration) */
            components: {
                'menu-section': {
                    template: '#menuTemplate', /* 樣板選取器 */
                    data: function() {
                    return {
                        menuItems: [{
                            text: 'About me'
                        }, {
                            text: 'Articles'
                        }, {
                            text: 'contact'
                        }]
                    }
                 }
              }
            }
        })
    </script>
</body>

2.透過(guò)Vue-loader 編譯（官方工具Vue-cli）

/* Menu.vue */
<template>
    <ul>
        <li v-for="item in menuItems">{{ item.text }}</li>
    </ul>
</template>

<script>
export default {
    data: function() {
        return {
            menuItems: [{
            text: 'About me'
          }, {
            text: 'Articles'
          }, {
            text: 'contact'
          }]
       }
   }
}
</script>

<style>
/* 樣式也可以包進(jìn)來(lái) ._. */
.original-white {
    color: #fff;
}
</style>

//使用官方工具Vue-cli，透過(guò)幾行指令生成基本的專(zhuān)案環(huán)境
# 全域安裝 vue-cli，當(dāng)成系統(tǒng)命令用
$ npm install --global vue-cli

# 建立webpack樣板專(zhuān)案
$ vue init webpack my-project
# 若你剛開(kāi)始學(xué)或不需要測(cè)試，簡(jiǎn)化版本比較好懂
$ vue init webpack-simple my-project

# 安裝所需模組
$ cd my-project
$ npm install

# 開(kāi)啟 http server
$ npm run dev

三、掛載點(diǎn)（Vue Instance）

const vm = new Vue({
    el: 'app',             /* 掛載點(diǎn) */
    data: { /* ... */ },   /* 初始資料 */
    methods: { /* ... */}, /* 方法 */
});

四、資料綁定（模板相關(guān)語(yǔ)法）

    <!-- 文字綁定 -->
    <p>{{ msg }}</p>
    
    <!-- 單次綁定 (僅更新一次) -->
    <p v-once>{{ msg }}</p>
    
    <!-- 把內(nèi)容當(dāng)成 HTML 解析 -->
    <p v-html="raw_html"></p>
    
    <!-- 屬性綁定 -->   
    <a href="{{ pageLink }}"></a>
    <a v-bind:href="pageLink"></a>
    
    <div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="isDisabled">Submit</button>
    
    <!-- 縮寫(xiě) -->
    <a :href="pageLink"></a>
    <div :id="dynamicId"></div>
    <button :disabled="isDisabled">Submit</button>
    
    <!-- Filters 過(guò)濾器 -->
    {{ data | json }}
    {{ username | capitalize }}

五、指令
1.樣式套用
能取到的Vue屬性都能當(dāng)作傳入?yún)?shù)（v-bind）

i.綁定Class

①.簡(jiǎn)單

//基本寫(xiě)法以JSON傳入，當(dāng)對(duì)應(yīng)的數(shù)值為true時(shí)套用，false時(shí)移除該類(lèi)別
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>
</html>

②、復(fù)雜（class并非固定,可改用Array傳入）

<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

ii、綁定inline-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鳥(niǎo)教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>
</body>
</html>

2.條件顯示
UI流程常有特定情況才出現(xiàn)/隱藏DOM 或Component 的需求，Vue 對(duì)應(yīng)寫(xiě)法是
v-if / v-show
v-else
v-else-if

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'a'
  }
})
</script>
</body>
</html>

v-if，v-show區(qū)別
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯會(huì)被緩存起來(lái)）
相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。
一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好
3、列表渲染（ v-for又稱(chēng)循環(huán)語(yǔ)句）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

//對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鳥(niǎo)教程',
      url: 'http://www.runoob.com',
      slogan: '學(xué)的不僅是技術(shù)，更是夢(mèng)想！'
    }
  }
})
</script>
</body>
</html>

//整數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

4、事件處理（v-on）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
</body>
</html>

5、表單輸入綁定（ v-model ）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="編輯我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鳥(niǎo)教程\r\nhttp://www.runoob.com'
  }
})
</script>
</body>
</html>

//復(fù)選框
<div id="app">
  <p>單個(gè)復(fù)選框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多個(gè)復(fù)選框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>選擇的值為: {{ checkedNames }}</span>
</div>

六、過(guò)濾器
2.0版本中，過(guò)濾器只用于插入文本中({{}})

{{ message | capitalize }}

自定義過(guò)濾器

<template>
    <div>
        <input v-model="filterText"/>
       <ul>
           <li v-for="item in obj">
               <span>{{myfilter(item.label)}}</span>
           </li>
       </ul>
    </div>
</template>
<script>
    export default {
        data: function () {
            return{
                obj:[
                    {value:0,label:"男子十年盜竊被抓9次"},
                    {value:1,label:"中國(guó)人拯救地球"},
                    {value:2,label:"張藝謀電影"},
                    {value:3,label:"科幻電影排行榜"},
                    {value:4,label:"香港武打片電影"},
                    {value:5,label:"zhangwenwu的博客"}
                ],
                filterText:""
            }
        },
        methods:{
            myfilter(value){
                if(value.indexOf(this.filterText)>-1){
                    return value
                }
            }
        }
    };
</script>

七、Watch
簡(jiǎn)單理解：我們希望變數(shù)改變時(shí)，也有人叫對(duì)應(yīng)的處理器起床做事，這就是Watch 的用途

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
       <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一個(gè)實(shí)例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
            // 這個(gè)回調(diào)將在 vm.kilometers 改變后調(diào)用
            document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue;
        })
      </script>
   </body>
</html>

八、計(jì)算屬性（computed）
特性：當(dāng)我們定義一個(gè)computed，其相依data 一變，computed 也會(huì)隨之更新。好處：收納Template中的邏輯

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

computed vs methods
computed 是基于它的依賴(lài)緩存，只有相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新取值;而使用 methods (其相依的data改變，computed也隨之更新)，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行

九、組件（Component）
使用組件有三個(gè)步驟：宣告建構(gòu)子(Constructor)；注冊(cè)組件(Regist Component) （建立組件(Create Component)）；掛載組件(Mount Component)
1、注冊(cè)(組件存在意義是為了拆解邏輯、使得結(jié)構(gòu)清晰好懂)
全局組件：所有實(shí)例都能用全局組件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
// 注冊(cè)
Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

局部組件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}

// 創(chuàng)建根實(shí)例
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>
</body>
</html>

Vue.extend

<div id="app1">
    <menu-section></menu-section>
</div>
<div id="app1">
    <my-menu></my-menu>
</div>

<script>
var MenuItem = Vue.extend({
    template: '<ul><li v-for="item in menuItems">{{ item.text }}</li></ul>',
    data: function() {
        return {
            menuItems: [{
                text: 'About me'
            }, {
                text: 'Articles'
            }, {
                text: 'contact'
            }]
        };
    }
});

var app1 = new Vue({
    el: '#app1'
    components: {
        'menu-section': MenuItem
    }
});
var app2 = new Vue({
    el: '#app2',
    components: {
        'my-menu': MenuItem
    }
});
</script>

2、prop
原本功能間的協(xié)同運(yùn)作都在同一層，拆成組件后，變成各個(gè)獨(dú)立的狀態(tài)了，我們?nèi)匀恍枰S持彼此間溝通暢通，如同所有漂亮的JavaScript 模組一樣，需要訂出漂亮的對(duì)外介面(Interface)，使其改動(dòng)內(nèi)部邏輯的同時(shí)，又不失其重用性(環(huán)?？苫厥?，方便傳入外部資料；官方建議使用props down, events up，透過(guò)prop傳入資料、透過(guò)組件事件(event)傳遞消息,template用于呈現(xiàn)資料

對(duì)上圖的解釋?zhuān)?br> 右邊：data (宣告內(nèi)部狀態(tài))；props (宣告對(duì)外介面- 用于傳入資料)；prop：接收父組件傳遞的值；
左邊：自用， $emit (組件內(nèi)的事件)；對(duì)外，$ broadcast (父對(duì)子，向下傳遞)，$dispatch (子對(duì)父，向上傳遞)

<div id="counter-event-example">
  <p>總來(lái)客量: {{ total }}</p>
  <button-counter door="前門(mén)" v-on:increment="incrementTotal"></button-counter>
  <button-counter door="後門(mén)" v-on:increment="incrementTotal"></button-counter>
    <!-- 來(lái)客數(shù)不計(jì)算工作人員 -->
  <button-counter door="工作人員專(zhuān)用門(mén)"></button-counter>
</div>

 <script src="vue.min.js"></script>

 <script type="text/javascript">
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ door }}來(lái)客+1 ( {{ counter }} )</button>',
  props: ['door'],
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    /* 來(lái)客+1 */
    increment: function () {
      this.counter += 1
      /* 通知主任，多了一人來(lái)客 */
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    /* 主任得知來(lái)客+1，總來(lái)客量+1 */
    incrementTotal: function () {
      this.total += 1
    }
  }
})
 </script>

template
要怎么讓組件樣板具有彈性
解法一具名<slot>

<template>
    <div class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <slot name="modal-header">
                </div>
                <div class="modal-body">
                    <slot name="modal-body">
                </div>
                <div class="modal-footer">
                    <slot name="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</template>

<modal>
    <h4 slot="modal-header" class="modal-title">Modal title</h4>
    
    <p slot="modal-body">One fine body&hellip;</p>
    
    <button slot="modal-footer" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button slot="modal-footer" type="button" class="btn btn-primary">Save changes</button>
</modal>

解法二- inline-template(這種作法會(huì)完全覆蓋掉<app>原始內(nèi)容)

<app inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</app>

<!-- <app>模板原始內(nèi)容不見(jiàn)了 -->
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>

3、掛載
透過(guò)模板(template)的基本掛載：

<script>
Vue.component('viewer', require('./components/Example.vue'));
Vue.component('editor', require('./components/Editor.vue'));

var app = new Vue({
    el: '#app',
    data: {
        state: 'viewer'
    },
    methods: {
        toggle: function() {
            return (this.state === 'viewer') ? 'editor' : 'viewer';
        }
    }
});
</script>

is屬性動(dòng)態(tài)掛載:

<div id="app">
    <button type="button" @click="toggle">{{ state }}</button>
    <div is="state"></div>
    <div is="state"></div>
    
    <!-- state: 'viewer' -->
    <!--
    <viewer></viewer>
    <viewer></viewer>
    -->
    
    <!-- state: 'editor' -->
    <!--
    <editor></editor>
    <editor></editor>
    -->
    
</div>

透過(guò)Vue建構(gòu)子或$mountAPI：

<!-- 宣告建構(gòu)子 -->
var Example = Vue.extend({
 template: '<div>Here is Example</div>'
});

透過(guò)建構(gòu)子掛載
<!-- 這會(huì)把#app內(nèi)容完全換掉 -->
new Example({ el: '#app' })

掛載前的等效樣板

<div id="app">
    <example></example>
    <example></example> 
</div>

掛載后

<div id="app">
    <!-- 前面兩個(gè) <example> 都不見(jiàn)了 -->
    <example></example>
</div>

給$mount掛載點(diǎn)

new Example().$mount('#app');
跟(1)相同，完全換掉#app內(nèi)容

當(dāng)你加上新的組件，又不想蓋掉原內(nèi)容，參考這種做法
4、其他
i、組件(component)間的其他連結(jié)
①、 $parent/$ children/ $root 第一個(gè)直接連結(jié)是父子組件間的交互參照父組件可透過(guò)$ children直接存取其下一層的子組件。
子組件可透過(guò) $parent直接存取其上一層的父組件。不論父子組件都可透過(guò)$ root，直接存取最頂層的Vue Instance
②、ref屬性& $refs
第二個(gè)直接連結(jié)是組件的自訂索引名- ref，用于父組件對(duì)子組件的參照。

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

定義好的索引名，可以透過(guò)父組件的$refs取得

var parent = new Vue({ el: '#parent' })
/* 存取子組件 */
var child = parent.$refs.profile

若是搭配v-for，$refs對(duì)應(yīng)的索引名也會(huì)取得陣列/JSON

<div id="parent">
  <user-profile v-for="user in users" ref="profile"></user-profile>
</div>
typeof parent.$refs.profile /* Array */

這個(gè)屬性在畫(huà)面渲染完才會(huì)更新，資料可能不同步，只適合當(dāng)備用方案
ii、
加速組件編譯

v-once
一次性編譯，用于不會(huì)改變的靜態(tài)資料
v-pre
跳過(guò)不編譯，用于不會(huì)改變的靜態(tài)樣板

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

Vue.js

Vue.js

基本語(yǔ)法：

相關(guān)閱讀更多精彩內(nèi)容

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

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

Vue.js

基本語(yǔ)法：

相關(guān)閱讀更多精彩內(nèi)容

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

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