?一、vue入門
Vue為前端的框架，免除了原生js的DOM操作。簡化書寫。
基于MVVM的思想，實現數據的雙向綁定，使編程的重點放在數據上。
1、引入vue.js文件
2、定義vue核心對象，定義數據模型
3、編寫視圖
//1、引入vue.js
<script src="vue.js"></script>//2、定義vue核心對象
<script>//定義vue對象new Vue({el:"#app",//vue接管的區域data:{message:"Hello Vue"}})
</script>//定義視圖
<!-- 定義視圖 --><div id="app"><!-- v-model為綁定數據 --><input type="text" name="" id="" v-model="message">{{message}}</div>其中{{message}}為插值表達式
形式：{{表達式}} 內容可以為變量、函數調用、三元運算符
?input中v-model為綁定數據，當input輸入的值發生變化時，vue對象中的message也隨之發生變化從而體現了vue的雙向綁定性。
v-model為指令。
二、vue指令
指令：html標簽上帶有v-的特殊屬性
- v-mind為html標簽綁定屬性值，如href，css
- v-model在表單元素上進行雙向數據綁定
- v-on為html標簽綁定事件
- v-if ，v-else-if，v-else條件性的渲染某元素
- v-for遍歷容器
- v-show通過條件來確定是否展示該元素
1、v-mind
為html標簽動態的綁定一個屬性值，當vue的數據模型的值發生變化時，其所綁定的屬性值也發生變化
<div id="app"><!-- v-bind動態綁定 --><!-- url的值將會動態的綁定vue對象中的數據模型data --><a v-bind:href="URL">鏈接1</a><a :href="URL">鏈接2</a><input type="text" v-model="URL"></div><script>//定義vue對象new Vue({el:"#app",//vue接管的區域data:{URL:"https://www.baidu.com"},})</script>2、v-model
在表單上進行雙向數據綁定
3、v-on
為html標簽綁定事件，其數據模型要改為以下形式
new Vue({el:"#app",//vue接管的區域data:{},methods:{handle:function(){alert("你點了我一下...");} }})調用方式：
<input type="button" name="" id="" value="點擊" v-on:click="handle()">4、v-if v-else-if v-else
當條件為真時渲染標簽，若為假則不渲染
5、v-show
根據條件展示某元素，但都進行了渲染，只不過使用display對展示進行了控制
實例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body> <!-- 定義視圖 --><div id="app">年齡<input type="text" name="" id="" v-model="age">經判定為:<span v-if="age<=35">年輕人(35以下)</span><span v-else-if="age>35 && age<60">中年人(35-60)</span><span v-else>老年人(60以上)</span><br><br>年齡<input type="text" name="" id="" v-model="age">經判定為:<span v-show="age<=35">年輕人(35以下)</span><span v-show="age>35 && age<60">中年人(35-60)</span><span v-show="age>60">老年人(60以上)</span><br><br></div></body><script>//定義vue對象new Vue({el:"#app",//vue接管的區域data:{age:20},methods:{}})</script>
</html>v-if與v-show在展示時的區別：
v-show去對span標簽全部進行了渲染，只不過在顯示的時候使用display進行控制，值為none不進行顯示，而v-if只對條件滿足的標簽進行渲染。?
6、v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><!-- 定義視圖 --><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index+1}:{{addr}}</div></div></body><script>//定義vue對象new Vue({el: "#app", //vue接管的區域data: {addrs: ['北京', '上海', '廣州', '深圳', '成都']}})</script>
</html>?
?案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><!-- 定義視圖 --><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>編號</th><th>姓名</th><th>年齡</th><th>性別</th><th>成績</th><th>等級</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span><span v-if="user.gender==2">女</span></td><td>{{user.scorce}}</td><td><span v-if="user.scorce>=85">優秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>//定義vue對象new Vue({el: "#app", //vue接管的區域data: {users: [{name: "Tom",age: 20,gender: 1,scorce: 78},{name: "Rose",age: 18,gender: 2,scorce: 86},{name: "Jerry",age: 26,gender: 1,scorce: 90},{name: "Tony",age: 30,gender: 1,scorce: 52}]}})</script>
</html>
?三、vue的生命周期
?生命周期：一個對象從創建到銷毀的整個過程。
?mounted：掛載完成，vue初始化成功，html頁面渲染成功(發送請求到服務端，加載數據)
)
)
 Crack)
