1、定義一個基本的vue代碼結(jié)構

<script>
    var vm = new Vue({
    el: '#app', //節(jié)點
    data: { // 屬性值
      xxxx:  xxxx
    },
    methods: { //事件，一般在vue中以s結(jié)尾的通常為數(shù)組，但是methods中是對象
    }
  })
</script>

2、差值表達式v-cloak和v-text

v-cloak:  需要加樣式`style：none`， 解決插值表達式閃爍的問題。
v-text: 也可以解決插值表達式閃爍的問題,但是如果需要在里面拼接字符串時，會覆蓋元素中原本的內(nèi)容，但是插值表達式只會替換自己的這個占位符，不會把整個元素的內(nèi)容清空。

3、v-html 如果插值表達式中有html元素，使用v-html會被解析
4、v-bind： vue提供的屬性綁定機制 縮寫為 :
5、v-on: vue提供的事件綁定機制，縮寫為@

 <input type="button" value="按鈕" :title="" @click= "">

箭頭函數(shù)內(nèi)部的this永遠和外部的this保持一致，用來解決this不一致問題。

() => {}

6.事件修飾符

.stop 阻止冒泡
.prevent 阻止時間的默認行為
.capture 添加事件偵聽器時使用時間捕獲模式
.self 只當事件在該元素本身（非子元素）觸發(fā)時觸發(fā)回調(diào)
.once 事件只觸發(fā)一次

7、 v-bind：實現(xiàn)屬性綁定。只能實現(xiàn)數(shù)據(jù)的單向綁定。

<input type="button" v-bind: value="">

8、 v-model: 實現(xiàn)數(shù)據(jù)表單元素和model中數(shù)據(jù)的雙向綁定。
注意： v-model只能運用在表單元素中。（input textarea select checkbox）

<input type="button" v-model="">

9、v-for 循環(huán)
如：數(shù)組遍歷

<p v-for="(item, i) in xxx">{{ i }} {{ item }}</p>

對象， 在遍歷對象身上的鍵值對時，除了有key， value，在第三個位置還有一個參數(shù)是索引

<p v-for="(key, value, i) in xxx">{{ key }} {{ value }} {{  i  }}</p>

v-for循環(huán)中key屬性的使用

*v-for循環(huán)的時候，key屬性只能使用number或者string
key在使用的時候，必須使用v-bind屬性綁定的形式，指定key的值
在組件中，使用v-for循環(huán)的時候，或者在一些特殊情況下，如果v-for有問題，必須在使用v-for的同時，指定唯一的字符串/數(shù)字 :key = *

10、v-if 每次都會重新刪除或者創(chuàng)建元素，有較高的切換性能消耗。
11、v-show 每次不會進行dom的刪除和創(chuàng)建操作，只是切換了元素的display：none屬性。有較高的初始渲染消耗
如果元素涉及到頻繁的切換，最好不要使用v-if

12 vue常用的數(shù)組方法：

• filter(): 創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

const arr= [32, 33, 16, 40];
const arr1 = arr.filter(item => item >= 18)
console.log(arr)   // [32, 33, 16, 40]
console.log(arr1)  // [32, 33, 40]

• map 返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值

安裝vue調(diào)試工具
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?h1=zh-CN