vue的基本語法

new Vue({el:"css選擇器",//表示vue對象接管的區域，只有在這一塊區域內才可以使用vue的方法顯示數據。data:{// 定義各種變量，將來變量的值在頁面html標簽中使用。name:"snake",age:20,user:{username:"jack",password:"123456"},address:["湖北武漢黃陂","湖北武漢武昌"],url:"http://www.itcast.cn",flag:true,users:[{name:"aaa",age:12},{name:"bbb",age:12},{name:"ccc",age:12}]},methods:{//定義各種方法，加來使用vue綁定事件的時候會使用到fun(){},show(){},sendData(){//發送異步請求，將user信息提交給服務器}}});

vue中的常用指令：
v-html:將vue中的變量值展示到標簽的內容體中，如果值有html代碼，瀏覽器會解析html代碼
v-text:將vue中的變量值展示到標簽的內容體中，如果值有html代碼，瀏覽器不會解析html代碼
v-bind::將vue中的變量值賦值給標簽的屬性

<a v-bind:href="url">傳智播客</a>-->簡寫成--><a :href="url">v-if/v-else-if/v-else:通過判斷是否加載該html標簽,如果結果是false，那么該標簽就不會被加載，頁面上也就看不到這個標簽了。<li v-if="flag">紅茶</li><li v-else-if="flag">綠茶</li><li v-els>茉莉花茶</li>v-show:通過操作標簽的display樣式讓標簽顯示和隱藏<li v-show="flag">紅茶</li> v-for:遍歷展示數據<tr v-for="u in users"><td>{{u.name}}</td><td>{{u.age}}</td></tr>v-on:綁定事件<input type="button" v-on:click="fun()" value="按鈕"/>簡寫：<input type="button" @click="fun()" value="按鈕"/>v-model:對表單中的數據進行雙向數據綁定。<form><input type="text" name="username" v-model="user.username"/><input type="password" name="password" v-model="user.password"/><input type="button" @click="sendData()" value="按鈕"/></form>

elementUI：

引入對應的資源：css+2個js(vue.js+elementUI對應的js)

總結

以上是生活随笔為你收集整理的vue的基本语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。