基本語法

<style>
table {border-collapse: collapse;margin:0 auto;
}
strong {color: rgb(235, 51, 100);
}td, th {padding-left: 6px;
}
table tr td:first-child {width:150px
}
table tr td:nth-child(2) {width:300px
}
</style>
<template><table border='1' style="width:1000px;float:center"><tr><th>語法</th><th>介紹</th><th>實例</th></tr><tr><td colspan="3"><strong>模板語法</strong></td></tr><tr><td>簡單的插值</td><td>{{ msga }}</td><td>{{ msg }}</td></tr><tr><td>原始 HTML</td><td>v-html="rawHtml"</td><td v-html="v_html"></td></tr><tr><td>Attribute 綁定</td><td>v-bind:id="dynamicId" or :id="dynamicId"</td><td><span :id="dynamicId">綁定id屬性</span></td></tr><tr><td>布爾型 Attribute</td><td>禁用按鈕,:disabled="'false'"</td><td><span :id="dynamicId"><button :disabled="'false'">Button</button></span></td></tr><tr><td>v-bind</td><td>不帶參數的 v-bind把js對象綁定單個元素上</td><td><div id="2" v-bind="objectOfAttrs"></div></td></tr><tr><td>JavaScript 表達式</td><td>數據綁定支持完整的JavaScript表達式</td><td>{{ number + 1 }}</td></tr><tr><td>調用函數</td><td>可以在綁定的表達式中使用一個組件暴露的方法</td><td>{{ getName() }}</td></tr><tr><td colspan="3"><strong>條件渲染</strong></td></tr><tr><td>v-if</td><td>v-if、v-else、v-else-if</td><td><div v-if="vif == 1">1</div><div v-else-if="vif == 2">2</div><div v-else>other numbers</div></td></tr><tr><td>v-show</td><td>改變dispaly屬性</td><td><div v-show="vshow">display：none</div></td></tr><tr><td>v-for</td><td>for循環, (item,index) in/of items</td><td><span v-for="(item,index) in vfor" :key="index">{{ index + item }} </span></td></tr><tr><td colspan="3"><strong>事件處理</strong></td></tr><tr><td>v-on</td><td>v-on監聽DOM事件, 簡寫@</td><td><button @click="console.log('Hello World');">內聯事件處理</button><button @click="clickFun()">方法事件處理</button></td></tr><tr><td>event對象</td><td>Vue的event對象就是原生js的event對象，通過$event可以把event對象當參數傳入方法</td><td><button @click="eventFun">event</button><button @click="eventFun1($event)">$event</button></td></tr><tr><td colspan="3"><strong>class綁定</strong></td></tr><tr><td>:class</td><td>允許傳入對象來判斷class熟悉是否生效，:class="{'className':true}"</td><td><span :class="{'className':className,'className2':false}">查看className</span></td></tr><tr><td>:class</td><td>可以傳入數組 :class="['classname1','classname2']"</td><td><span :class="['classname1','classname2']">查看className</span></td></tr><tr><td colspan="3"><strong>style綁定</strong></td></tr><tr><td>:style</td><td>可以傳入對象，:style="{color:'red',fontSize:'5px'}"</td><td><span :style="{color:'red',fontSize:'5px'}">查看樣式</span></td></tr><tr><td colspan="3"><strong>偵聽器：偵聽數據變化</strong></td></tr><tr><td>watch</td><td>在watch下定義與要監聽的數據一樣命名的函數</td><td>{{ watchNum }}<button @click="watchNumAdd()">方法事件處理</button></td></tr><tr><td colspan="3"><strong>表單輸入綁定</strong></td></tr><tr><td>v-model</td><td>v-model="name"</td><td>名字={{ name }} 年齡={{ age }}</td></tr><tr><td colspan="3"><form><table><tr><td>名字：</td><td><input type="text" v-model="name"/></td></tr><tr><td>年齡：</td><td><input type="text" v-model.lazy="age"/></td></tr></table></form></td></tr><tr><td colspan="3"><strong>獲取DOM</strong></td></tr><tr><td>ref</td><td>直接獲取HTML元素，ref="define",this.$refs.define</td><td><button ref="dom" @click="getDom()">獲取DOM,改變文本</button></td></tr></table>
</template>
<script>export default{data(){return{msg:'Hello VUE',msga:'{{ }}',v_html:'<a href="https://www.baidu.com">超鏈接</a>',dynamicId:1,objectOfAttrs:{age:20,name:'hello'},number:25,vif:1,vshow:false,vfor:['zqq','hello'],className:true,watchNum:0,name:'',age:''		}},methods:{getName:function(){return 'Get Name';},clickFun(){alert(this.msg);},eventFun(e){console.log(e.target);e.target.innerHTML = 'Event';},eventFun1(e){console.log(e.target);e.target.innerHTML = '$Event';},watchNumAdd(){this.watchNum ++;},getDom(){this.$refs.dom.innerHTML = 'Hello';			}},watch:{//函數名與監聽的數據一致watchNum:function(newVal,oldVal){alert('newVal =' + newVal + ' oldVal=' + oldVal);}}}
</script>