一些簡(jiǎn)單的Vue.js的指令總結(jié)

<p id="app">{{message}}</p>

eg： <p v-text="a"></p> --> a 是data中的a

eg:<p v-html="a"></p>

 eg:<p v-if="isShow"></p> -->isShow的值是布爾值，true：顯示， false，隱藏

eg:<p v-if="isShow"></p> -->isShow的值是布爾值，true：顯示， false，隱藏

eg: 
<ul>　　　　　<li v-for="item in items">　　　　　　　　　<p v-text="item.label"></p>　　
　　　　-->item是items里的每一個(gè)對(duì)象，items是data里的數(shù)組

　　　　　</li></ul>

eg:<button v-on:click="doSomething"></button> click 可以是hover，focus等事件

eg: <button @click="doSomething"></button> 簡(jiǎn)寫形式

v-bind eg：<img v-bind:src="imageSrc"> src屬性賦值 imgSrc

（簡(jiǎn)寫）eg: <p :class="{red:isRed}"></p> isRed:true:加上類red，false：不加類red

eg: <p :class="[classA, classB]"></p> 綁定多個(gè)類名

eg: <p :class="[classA,{classB: isB, classC: isC}]"></p>

js：var app = new Vue({

　　el:"#app",

　　data:{ 這里填寫數(shù)據(jù)，以鍵值對(duì)的形式

 　　a:"heollo",

　　 demo:1, items:[{label:"vue1"},{label:"vue2"}]

 　　　　},

　　methods:{這里可以寫自己定義的函數(shù)，

　　　　doSomething:function(){

 　　　　　　console.log(this.a); --> this指代的是vue的對(duì)象， a 是data里的a　　　　 }

　　　},

　　watch:{ 監(jiān)聽(tīng)，監(jiān)聽(tīng)demo的變化， 參數(shù)是變化前后的值變化

　　　　'demo':function(val, oldVal){　　　　　　console.log(val, oldVal);　　

　　　　}

　　 }

 });