vue的指令
vue全部的指令都是以 " v-" 開頭。css
v-html：相似於 js中的innerHTML 。能夠解析模板中的標籤。html
v-text：相似於 js中的innerText。將模板中的數據以字符串的形式輸出。不會解析模板中的標籤。等價於 {{ }} :防止刷新時{{ }}出如今頁面上vue
v-show：經過控制css的display來控制元素的實現和隱藏。若是是頻繁切換則推薦用此方法。節約性能。npm
v-if：當屬性值爲true時，則顯示當前的元素，爲false，那麼顯示v-false的元素。若是是偶爾切換，甚至不切換，則建議使用這個。減緩首次加在壓力，提升性能。數組
v-else-if：配合着 v-if 使用，當條件不成立時，執行這步。app
v-else ：當以上條件都不成立時，執行這一步。函數
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <div id="app">
9 <div v-if="mag<0">小於0</div>
10 <div v-else-if="mag<10">0-9</div>
11 <div v-else>大於10</div>
12 </div>
13 </body>
14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15 <script>
16 var vm=new Vue({
17 el:"#app",
18 data:{
19 mag:15
20 },
21 })
22 </script>
23 </html></pre>
v-once:只綁定一次，當數據再次發生變化，也不會致使頁面刷新，寫在不想刷新的標籤上。
v-bind：單向數據綁定性能
1 <!--完整寫法--> 2 <a v-bind:href="url">1111</a> 3 <!--簡寫--> 4 <a :href="url">2222</a></pre>
通常用於class的獲取學習
1 <ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
2 <li>學習Vue</li>
3 <li>學習Node</li>
4 <li>學習React</li>
5 </ul></pre>
1 var vm= new Vue({
2 el:‘.box‘,
3 data:{
4 isColor:true,
5 isSize:true
6 } 7 })</pre>
v-on: 綁定事件。url
1 <!--完整寫法--> 2 <button v-on:click="doThis"></button> 3 <!--簡寫--> 4 <button @click="doThis"></button></pre>
監聽DOM事件，函數須要定義在methods中，不能和data中的內容重名，不能使用箭頭函數
若是在綁定時，fn不帶（），那麼函數會默認接收一個事件對象e，mouseEvent ，若是綁定時帶有小括號，那麼默認接收事件對象，
既須要事件對象，又須要參數，須要在綁定的小括號中加一個$event,後面纔是真正的實參
v=for:循環
循環數組
1
2 <div v-for="item in arr">{{item}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 arr:[1,2,4,574,45,448]
5 },
6 })</pre>
效果以下：item 表明每一項
循環字符串
1 <div v-for="item in str">{{item}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 str:"fdhsde"
5 },
6 })</pre>
效果以下 ： item 表明着每個字符
循環對象
<div v-for="(item,key,index) in obj">{{item}}--{{key}}--{{index}}</div></pre>
1 var vm=new Vue({
2 el:"#app",
3 data:{
4 obj:{
5 name:"qi",
6 age:"22",
7 }
8
9 },
10 })</pre>
效果以下： 第一個參數是 屬性值 ，第二個參數是 屬性名，第三個參數是索引。
循環數字
效果以下 ：
v-cloak ：用於元素加載數據比較多時，vue解析時間比較長，爲了防止{{}}出現，給該元素加上v-cloak屬性，直到vue中把DOM數據插入到真實DOM中時，讓當前的元素顯示；
1 <div class="#app" v-cloak>
2 <p>{{value.name}}</p>
3 </div></pre>
1 [v-cloak] {
2 display: none;
3 }</pre>
可是有的時候會不起做用，可能的緣由有二：
一、v-cloak的display屬性被層級更高的給覆蓋掉了，因此要提升層級
1 [v-cloak] {
2 display: none !important;
3 } </pre>
二、樣式放在了@import引入的css文件中
v-cloak的這個樣式放在@import 引入的css文件中不起做用，能夠放在link引入的css文件裏或者內聯樣式中
v-model：只用於表單元素忽略了value。checkbox selected，將數據綁定的視圖上，視圖修改會影響數據的變化（雙向數據綁定）
單選框中使用v-model ：會將都綁定val的劃分紅一組，只能選擇其中一個在複選框中，若是隻有一個，v-model 會將值默認轉換成布爾類型的值若是v-model 在複選框中同時綁定一個值，那麼會把這幾個進行分組，把選中的值，同一放進數組中若是多個input框同時綁定一個相同的v-model，經過是否在數組中進行選中或者不選擇，各自來控制本身的狀態用於下拉框那麼select上v-model綁定的值：跟option中的value屬性有關 ，那麼若是沒有value屬性，那麼會取option標籤中的內容
-
每一个你不满意的现在，都有一个你没有努力的曾经。