常用指令
v-if 元素是否移除或者插入
v-else
v-else-if
v-pre 不編譯{{}}
v-cloak 使用v-cloak能夠解決插件表達(dá)式閃爍的問題
v-once 告訴瀏覽器的Vue編譯器,只渲染該元素或組件一次
v-show 元素是否顯示或隱藏
v-model 雙向數(shù)據(jù)綁定，v-bind是單向數(shù)據(jù)綁定(內(nèi)存js改變影響頁面)
v-text 是元素的innerText只能在雙標(biāo)簽中使用
v-html 是元素的innerHTML，不能包含注釋
v-on methods和v-on的使用（v-on簡(jiǎn)寫@）
v-for 循環(huán)遍歷
v-bind class結(jié)合v-bind使用（v-bind簡(jiǎn)寫:）
class結(jié)合v-bind使用
需要根據(jù)可變的表達(dá)式的結(jié)果來給class賦值，就需要用到v-bind:class=“xxx”
v-bind:屬性名=“表達(dá)式”，先運(yùn)算表達(dá)式。最終表達(dá)式運(yùn)算結(jié)束的結(jié)果賦值給該屬性名
簡(jiǎn)化的寫法是: :屬性名="表達(dá)式"
:key="index" 和 v-bind:key="index"; //相等
1
class:結(jié)果的分類
一個(gè)樣式: 返回字符串(三元表達(dá)式和key和樣式的清單對(duì)象)
多個(gè)樣式：返回對(duì)象(樣式做key，true或flase做值)
methods和v-on的使用
綁定事件的方法
v-on:事件名="表達(dá)式||函數(shù)名"
簡(jiǎn)寫: @事件名="表達(dá)式||函數(shù)名"
函數(shù)名如果沒有參數(shù)，可以省略() 只給一個(gè)函數(shù)名稱
聲明組件內(nèi)函數(shù)，在export default這個(gè)對(duì)象的根屬性加上methods屬性，其是一個(gè)對(duì)象
key 是函數(shù)名 值是函數(shù)體
在export default這個(gè)對(duì)象的根屬性加上data屬性，其是一個(gè)函數(shù)，返回一個(gè)對(duì)象
對(duì)象的屬性是我們初始化的變量的名稱
凡是在template中使用變量或者函數(shù)，不需要加this
在script中使用就需要加上this
v-for的使用
可以使用操作數(shù)組 (item,index)，這里的item是數(shù)組中的每一個(gè)對(duì)象。
可以使用操作對(duì)象 (value,key,index) 這里的key value是對(duì)象中的key，value
key 是類似trank by 的一個(gè)屬性
為的是告訴vue，js中的元素，與頁面之間的關(guān)聯(lián)，當(dāng)識(shí)圖刪除元素的時(shí)候，是單個(gè)元素的刪除而不是正版替換，所以需要關(guān)聯(lián)其關(guān)系，設(shè)置(必須,性能)
2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時(shí)，key 現(xiàn)在是必須的。
自定義指令
75 // main.js 中先將自定義指令定義好
76 // directives有兩個(gè)參數(shù)
77 //參數(shù)一： 自定義指令 v-focus
78 //參數(shù)二： 對(duì)象，對(duì)象中可以添加很多方法
79 // 添加一個(gè)inserted方法:而這個(gè)方法中又有兩個(gè)參數(shù)：
80 //參數(shù)一:el 當(dāng)前使用自定義指令的對(duì)象
81 //參數(shù)二：obj 是指它(v-color="color" )后面設(shè)置的表達(dá)式
82 //{expression:"color",value:"red",}
83 Vue.directive("focus",{
84 inserted:function(el,obj){
85 // console.log(el);
86 el.focus();
87 }
88 });
89 Vue.directive("color",{
90 inserted:function(el,obj){
91 // obj.style.color = "red";
92 obj.style.color = obj.value;
93 console.log(obj.value);
94 },
bind: function () {},
95 });
