vue學習的一系列，全部來自於表哥---表嚴肅，是我遇到過的講課最通透，英文發音最好聽的老師，想一起聽課就去這里吧 https://biaoyansu.com/i/hzhj1206
前言：
前端解析數據更好，因為更靈活，且用戶體驗更好，還能節省服務器資源。
“指哪打哪”，用到了才去取，有點類似分片加載。
但是也有不好的地方，如果是稍微大一點復雜一點的項目，開發的壓力較大，更麻煩，像表單驗證這種。還有路由，放在前端會更復雜，但是省資源。
原生js就能做到前端渲染，但是開發成本太高。而vue可以低成本的實現。
Vue的特點：數據雙向綁定，當數據發生改變時，自動更新視圖。
1 vue安裝
用cdn：www.bootcdn.cn
找到vue.js，可以下載下來放到項目中
注意不用min版本的，因為沒有報錯信息
2基本語法實例
2.1實例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>你的名字是：{{name}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:'小美女'
}
})
</script>
</html>
說明：
var app=new Vue({})，建了一個vue的對象，對象中需要一些配置：
el：意思是element，用來告訴vue，這個對象和哪個元素綁定，也就是生成的對象會產生一個域，這個域是作用在哪個元素上的，例如作用在id為app的元素，就寫成el：’#app’
<div id="app">
<span>你的名字是：{{name}}</span>
</div>
vue會解析這種兩個大括號的語法，里面的內容會當作類似js的語句來解析，例如：{{1+1}}結果是2，{{typeof 1}}的結果是number，但是太復雜的解析不了，例如if語句，就會報錯。
{{name}中的name就會去vue對象中的data屬性中找，在vue中，所有的數據全放在data的屬性中。
上面示例代碼的效果：
兩個name是怎么對應起來的，這就是vue背后的默認機制，data中所有的屬性都是直接綁定到app下的，感覺就像是同步一樣，再多加一些數據：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>你的名字是：{{name}}</p>
<p>你的年齡是：{{age}}</p>
<p>你的性別是：{{sex}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:'小美女',
age:18,
sex:null
}
})
</script>
</html>
在console中直接改變數據：
輸入app.sex='女'，回車，可以看到數據直接改變了：
這就說明，vue里面的內容是直接和內存中的數據綁定的，而不用像原來js那樣，必須調用瀏覽器的dom的api，讓顯示的內容改變。而vue會自動改變，這樣可以極大的提高開發效率，和程序的運行性能。
2.2實例2-直接用input改變
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p><input type="text" v-model="name"> 你的名字是：{{name}}</p>
<p><input type="text" v-model="age"> 你的年齡是：{{age}}</p>
<p><input type="text" v-model="sex"> 你的性別是：{{sex}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:'小美女',
age:18,
sex:null
}
})
</script>
</html>
v-model是vue定義的屬性，在vue中叫“指令”，也可以自定義指令，v-model作用是把當前input中的值指到哪里，改變input的值，那么后面跟着的文字也會相應的改變
想實現：當沒有輸入值（值為null）時，后面的文字不顯示，
兩種方式：
<span v-show="sex">你的性別是：{{sex}}</span>
<span v-if="sex">你的性別是：{{sex}}</span>
Show和if的區別：
v-if是動態的向DOM樹內添加或者刪除DOM元素；v-show是通過設置DOM元素的display樣式屬性控制顯隱
完整示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <p><input type="text" v-model="name"> <span v-if="name">你的名字是：{{name}}</span></p> <p><input type="text" v-model="age"> <span v-if="age">你的年齡是：{{age}}</span></p> <p><input type="text" v-model="sex"> <span v-if="sex">你的性別是：{{sex}}</span></p> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ name:null, age:null, sex:null } }) </script> </html>
3 v-for指令
專門用於迭代的指令，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for="food in foodList">{{food.name}}：￥{{food.discount?food.price * food.discount:food.price}}</li> </ul> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ foodList:[ { name:'香蕉', price:3, discount:0.5 //折扣 }, { name:'蘋果', price:5, discount:0.7 }, { name:'草莓', price:10 } ] } }) </script> </html>
v-for="food in foodList"，food是每一項，任意定義，相當於一個變量，foodList是迭代的目標，在data中定義的。
4 v-bind指令
用於綁定數據和元素屬性的，格式：v-bind:屬性名="變量"，變量是定義在data中的
示例，可以綁定鏈接、圖片url，class都可以
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-bind</title> <style> .myclass{background: hotpink;color: #fff;text-decoration: none;} </style> </head> <body> <div id="app"> <p><a v-bind:class="linkclass" v-bind:href="url">點擊</a></p> <img v-bind:src="img"> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ url:'https://hao.360.cn/?installer', img:'index-2.png', linkclass:'myclass' } }) </script> </html>
想實現某個class在特定情況才起作用：
v-bind:class="{myclass:isActive}"
大括號中：鍵名是要添加的類，值是條件（什么情況下加載這個類）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-bind</title> <style> .myclass{background: hotpink;color: #fff;text-decoration: none;} </style> </head> <body> <div id="app"> <p><a v-bind:class="linkclass" v-bind:href="url">點擊</a></p> <img v-bind:src="img"> <p><span v-bind:class="{myclass:isActive}">動態的class</span></p> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ url:'https://hao.360.cn/?installer', img:'index-2.png', linkclass:'myclass', isActive:true } }) </script> </html>
當設成：isActive:false時：
通常，v-bind可以省略，只寫一個冒號就可以：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-bind</title> <style> .myclass{background: hotpink;color: #fff;text-decoration: none;} </style> </head> <body> <div id="app"> <p><a :class="linkclass" :href="url">點擊</a></p> <img :src="img"> <p><span :class="{myclass:isActive}">動態的class</span></p> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ url:'https://hao.360.cn/?installer', img:'index-2.png', linkclass:'myclass', isActive:true } }) </script> </html>
5 v-on指令
用於綁定事件，例如點擊事件，v-on:click="onClick"，onClick是自定義的一個方法，如果有參數可以寫成v-on:click="onClick(參數,參數...)"，方法要定義在methods中，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-on</title> </head> <body> <div id="app"> <button v-on:click="onClick">點擊</button> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ }, methods:{ onClick:function(){ console.log("點擊了") } } }) </script> </html>
可以給一個元素綁定多個事件，那么v-on就可以定義一個對象，鍵是事件名稱，值是方法名稱，但是注意，方法必須在methods中定義了，不然會報錯，例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-on</title> </head> <body> <div id="app"> <button v-on:click="onClick">點擊</button> <button v-on="{mouseenter:onEnter,mouseleave:onOut}">鼠標移入移出</button> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ }, methods:{ onClick:function(){ console.log("點擊了"); }, onEnter:function(){ console.log("鼠標移入"); }, onOut:function(){ console.log("鼠標移出"); } } }) </script> </html>
表單中，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-on</title> </head> <body> <div id="app"> <form v-on:submit="onSubmit"> <input type="text" name="user" placeholder="輸入內容"> <input type="submit" value="提交"> </form> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ }, methods:{ onSubmit:function(){ console.log("表單提交"); } } }) </script> </html>
這樣會刷新頁面，可以改為：
就不會刷新了，
這個功能vue進行了封裝：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-on表單提交不刷新頁面</title> </head> <body> <div id="app"> <form v-on:submit.prevent="onSubmit"> <input type="text" name="user" placeholder="輸入內容"> <input type="submit" value="提交"> </form> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ }, methods:{ onSubmit:function(){ console.log("表單提交"); } } }) </script> </html>
v-on:submit.stop是停止冒泡事件
鍵盤事件也封裝了，例如v-on:keyup.enter，是敲回車，
v-on:也是可以省略的，只寫一個@就可以，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-on表單提交不刷新頁面</title> </head> <body> <div id="app"> <form @submit.prevent="onSubmit" @keyup.enter="onEnter"> <input type="text" name="user" placeholder="輸入內容"> <input type="submit" value="提交"> </form> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ }, methods:{ onSubmit:function(){ console.log("表單提交"); }, onEnter:function(){ console.log("回車"); }, } }) </script> </html>
6 v-model指令
6.1 v-model修飾符
常用，基本上所有用戶的輸入都要通過v-model，好用、安全、功能強大
1）lazy惰性更新
在文本框輸入時，不會更新，只有失去焦點時，才更新，這樣會稍微提高一點性能。實際上是觸發了一個change事件。
這個的好處是，只有當用戶輸入結束了，才綁定，才會顯示表單驗證的結果；用戶輸入過程中，不去打擾用戶，這樣用戶體驗更好
2）trim
將用戶輸入的值，前后空格全部去掉，用戶名可以用，密碼不要用，有時用戶可能就用空格做密碼
3）number
數字類型。之前表單輸入，無論輸什么，得到的都是字符串，用到數字的地方需要轉換，加了number就會自動轉換成number類型了
tips：同時綁定多個修飾符，用鏈式寫法就可以
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-mode</title> </head> <body> <div id="app"> <p>1.lazy示例（失去焦點時才顯示信息）：<input type="text" v-model.lazy="name"> 提示：{{name}}</p> <div>2.trim去掉兩端空格：<input type="text" v-model.trim="con"> <pre>提示：{{con}}</pre></div> <p>3.number示例：<input type="text" v-model.number="age" placeholder="輸入年齡"> 輸入的數據類型為：{{typeof age}}</p> <p>4.同時綁定多個修飾符：<input type="text" v-model.lazy.trim.number="num"> 輸入的數據類型為：{{typeof num}}，輸入的值為：{{num}}</p> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ name:null, con:null, age:null, num:null } }) </script> </html>
6.2 v-model在其他表單元素上的用法
1）單選按鈕
把傳統寫法的name改成v-model
2）復選框
綁定的數據是數組。這樣選中的項會自動插入到數組中
3）textarea和text是一樣的
4）Select
在select上加v-model，data中的值就是option的value，多選就是數組
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model</title> <style> .box{border-bottom: 1px solid #ccc;} </style> </head> <body> <div id="app"> <div class="box"> <p> <label>男<input type="radio" value="male" v-model="sex"></label> <label>女<input type="radio" value="female" v-model="sex"></label> </p> <p>{{sex}}</p> </div> <div class="box"> <p> <label>男<input type="checkbox" value="male" v-model="orientation"></label> <label>女<input type="checkbox" value="female" v-model="orientation"></label> </p> <p>{{orientation}}</p> </div> <div class="box"> <p>來自哪里： <select v-model="froms"> <option value ="1">地球</option> <option value ="2">火星</option> </select> </p> <p>{{froms}}</p> </div> <div class="box"> <p>要去哪里： <select v-model="dest" multiple> <option value ="1">地球</option> <option value ="2">火星</option> <option value ="3">月球</option> </select> </p> <p>{{dest}}</p> </div> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ sex:'female', orientation:['male'], froms:1, dest:['1'] } }) </script> </html>
7控制流指令
if，else，else if
很簡單，就在v-if中寫條件，data中控制條件
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-if</title> </head> <body> <div id="app"> <div v-if="role=='admin' || role=='super'"> 管理員你好 </div> <div v-else-if="role=='hr'"> HR您好 </div> <div v-else> 您沒有權限訪問此頁面 </div> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ role:'admin' } }) </script> </html>
role改成super，效果一樣；
改成hr，
改成其他值，
8計算屬性
把計算的過程存到計算屬性computed里，computed里面屬性的值全是function。
計算當然也可以寫在methods里，但是寫在computed的好處是會緩存下來，所以這種涉及到計算的就單獨寫computed里。
例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>計算</title> <style type="text/css"> table{border-collapse: collapse;} td,th{border: 1px solid #ccc;padding: 10px;} </style> </head> <body> <div id="app"> <table> <tr> <th>學科</th> <th>分數</th> </tr> <tr> <td>數學</td> <td><input type="text" v-model.number="math"></td> </tr> <tr> <td>語文</td> <td><input type="text" v-model.number="chinese"></td> </tr> <tr> <td>英語</td> <td><input type="text" v-model.number="english"></td> </tr> <tr> <td>總分</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> </table> </div> </body> <script src="js/vue.js"></script> <script> var app=new Vue({ el:'#app', data:{ math:0, chinese:0, english:0 }, computed:{ sum:function(){ return this.math+this.chinese+this.english; }, average:function(){ return Math.round(this.sum/3); } } }) </script> </html>
