Vue.js語法糖整理

el:element 須要獲取的元素，必定是HTML中的根容器元素 data:用於數據的存儲 methods:用於存儲各類方法 數據綁定字面量只加載一次{{* msg}} data裏面能夠進行簡單的運算； methods:{ getHome(){ return "早上好" } } -------------------------------------------------- HTML中渲染{{getHome()}} //獲得的結果是--->早上好  v-bind綁定屬性簡寫就是一個冒號 如 data{ id:12 } <p :id="id">123</> -------------------------------------------------- 動態綁定dom元素 data{ websiteTag:"<a href='http://www.baidu.com'>百度</a>" } html中 <p v-html="websiteTag"></p> -------------------------------------------------- 單擊事件：v-on:click="方法" @click="方法"(簡寫) 雙擊事件：v-on:dblclick="方法" @dblclick="方法"(簡寫) data:{ x:0, y:0 } updataXY(event){ console.log(event) //js鼠標事件默認的 this.x = event.offsetX; this.y = event.offsetY; } HTML渲染: <div id="canvas" @mousemove="updataXY"> {{x}}-----{{y}} </div> 事件還有不少，用法都同樣； -------------------------------------------------- 阻止冒泡： data:{ x:0, y:0 } updataXY(event){ console.log(event) //js鼠標事件默認的 this.x = event.offsetX; this.y = event.offsetY; } updataStop(evevt){ event.stopPropagation(); } HTML渲染: 方法一： <div id="canvas" @mousemove="updataXY"> {{x}}-----{{y}} <span @mousemove="updataStop">移到我這裏不會改變xy座標</span>
</div> 方法二: <div id="canvas" @mousemove="updataXY"> {{x}}-----{{y}} <span @mousemove.stop="">移到我這裏不會改變xy座標</span> //vue中加stop修飾符便可阻止冒泡 </div> -------------------------------------------------- 阻止默認行爲: <a href="http://www.baidu.com" @click.prevent="">百度</a> -------------------------------------------------- 鍵盤事件： changeName(){ console.log("你正在輸入名字") } <input type="text" @keyup="changeName">
<input type="text" @keyup.enter="changeName">
<input type="text" @keydown="changeName"> 其餘鍵盤事件相似，用法一致 -------------------------------------------------- 數據雙向綁定： data:{ name:"" } <input type="text" v-model="name" ref="name"> 補充一個知識點：獲取vue獲取input的value的方法--->this.$refs.name.value; -------------------------------------------------- 計算屬性： data:{ a:0, b:0, age:10 } methods:{ addA(){ console.log("add to a") return this.a+this.age; } addB(){ console.log("add to B") return this.b+this.age; } } 法一：用方法實現這個功能 <button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA()}}</p>
<p>Age-B={{addB()}}</p> 法二：用計算屬性實現 computed:{ addA(){ console.log("add to a") return this.a+this.age; } addB(){ console.log("add to B") return this.b+this.age; } } <button @click="a++">Add to A</button>
<button @click="b++">Add to A</button>
<p>A-{{a}}</p>
<p>A-{{b}}</p>
<p>Age-A={{addA}}</p>
<p>Age-B={{addB}}</p> -------------------------------------------------- 動態css data:{ changeColor:false } <h1 @click="changeColor!=changeColor" :class="{changeColor:changeColor}">
   <span>你好</span>
</h1>

<style> .changeColor span{ background:#f2f1f1;
  }
</style> -------------------------------------------------- v-if指令（後面能夠跟v-else-if v-else） v-show指令 區別在於v-if 判斷dom結構是否存在，v-show是使用的display屬性來是否顯示 -------------------------------------------------- v-for指令數組遍歷數組、對象 data:{ arr:["bob","wow","pop"], list:[ {name:"bob",age:18} {name:"wow",age:19} {name:"pop",age:20} ] } <ul>
  <li v-for="item in arr">{{item}}</li>
</ul>

<ul>
  <li v-for="(item,index) in list">{{item.name}}</li>
  <li v-for="(item,index) in list">{{item.age}}</li>
  <li v-for="(item,index) in list">{{index}若是下標須要從一開始如排行榜{{index+1}}</li>
</ul> 注意若是用div渲染會直接渲染div包着的結構；（3個div） <div v-for="(item,index) in list">
  <h3>{{item.name}}</h3>
  <p>{{item.age}}</p>
</div> 改用template的話能夠去掉沒必要需要的空元素div （1個div） <template v-for="(item,index) in list">
  <h3>{{item.name}}</h3>
  <p>{{item.age}}</p>
</template> -------------------------------------------------- index.html-->main.js（實例化vue對象）-->app.vue html（template）--->js---->style三部份內容 -------------------------------------------------- 全局註冊組件在main.js寫上Vue.component("自定義名字",組件名) 調用組件<自定義名字></自定義名字> 局部組件： data(){ return{ } }, components:{組件名} -------------------------------------------------- 組件css做用域 scoped限定 組件預處理器<style lang="預處理器" scoped></style> -------------------------------------------------- 組件傳值（父組件-->子組件（props）/子組件--->父組件（自定義事件）） 須要用的數據放置父組件的data裏面 假定在app.vue data:{ list:[ {name:"bob",age:18} {name:"wow",age:19} {name:"pop",age:20} ] } <header><header>
<content :list="list"></content>
<footer><footer> 在content組件內props接收 法一: props["list"] 法二（官方推薦）: props{ list:{ type:Array required:true }, } 法三:vuex狀態管理倉庫 傳值：string、number、boolean （單個變） 傳引用：array、object （整個變） 子--->父 changeTitle(){ this.$emit("titleChange","子到父傳東西") } 父組件@titleChange="方法名($event)" methods:{ //作的事情 方法名(形參){ //作什麼事情 } } -------------------------------------------------- 路由：（寫法routes數組裏麪包着對象） import 自定義名字 from "組件路徑" const router = new VueRouter ({ model:"history", routes:[ { pateh:"xxx", meta:{單頁面配置標題}, //---->該字段也能夠校驗路由 components:{組件} //---->該方法component: resolve => require(['組件路徑'], resolve)路由懶加載（不用import組件了） }, ] }) -------------------------------------------------- 請求方式另一節附上