001 vue

https://cn.vuejs.org/

文章目錄

- v-bind
- v-model
- v-on
- 修飾符
- 條件渲染/控制：v-if v-show
- 列表渲染

M：即Model，模型，包括數據和一些基本操作
V：即View，視圖，頁面渲染結果
VM：即View-Model，模型與視圖間的雙向操作（無需開發人員干涉）
在MVVM前，開發人員從后端獲取需要的數據模型，然后要通過DOM操作Model渲染到View中。而后當用戶操作視圖，還需要通過DOM獲取View中的數據，然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封裝起來，開發人員不再關心Model和View之間是如何互相影響的
只要Model發生了改變，View上自然會表現出來
當用戶修改了View，Model中的數據也會跟著改變。。。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue快速入門</title>
</head>
<body><div id="app"><!--1.{{message}}：插值表達式2. message 就是從model的data數據池來設置3. 代碼執行時，會到data{}數據池中去匹配數據，如果匹配上，就進行替換，如果沒有匹配上，就輸出空--><h1>歡迎你{{message}}--{{name}}</h1></div><!--引入vue.js--><script src="vue.js"></script><script>//創建Vue對象/*** 1.創建Vue對象實例**/let vm = new Vue({el: "#app", //創建的vue實例掛載到 id=app的divdata: { //data{} 表示數據池(model有了數據)，以k-v形式設置（根據需要設置）message: "Hello-Vue",name: "xd"}})console.log(vm._data.message);console.log(vm._data.name);console.log(vm.message);console.log(vm.name);</script></body>
</html>

注意代碼順序，要求div在前，script在后，否則無法綁定數據
Vue.js采用簡潔的模板語法來聲明式地將數據渲染進DOM的系統，做到數據和顯示分離
Vue沒有繁瑣的DOM操作，如果使用jQuery，我們需要先找到div節點，獲取到DOM對象，然后進行節點操作，顯然Vue更加簡潔

v-bind

v-bind指令可以完成基本數據渲染/綁定
v-bind簡寫形式就是一個冒號（:）
插值表達式是用在標簽體的
如果給標簽屬性綁定值，則使用v-bind指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>單向數據渲染</title>
</head>
<body><div id="app"><h1>{{message}}</h1><!--1.使用插值表達式引用data數據池數據是在標簽體內2.如果在標簽/元素的屬性上引用data數據池數據時，不能使用插值表達式，需要使用v-bind--><img v-bind:src="img_src" v-bind:width="img_width"><img v-bind:src="img_src" v-bind:width="img_width">
</div><script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //創建的vue實例掛載到 id=app的divdata: { //data{} 表示數據池(model有了數據)，以k-v形式設置（根據需要設置）message: "hello",img_src: "1.png",img_width: "200px"}})</script>
</body>
</html>

v-model

v-model可以完成雙向數據綁定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>雙向數據渲染</title>
</head>
<body>
<div id="app"><h1>{{message}}</h1><!--1.v-bind是數據單向渲染：data數據池綁定的數據變化，會影響view2.v-model="hobby.val" 是數據的雙向渲染，(1)data數據池綁定的數據變化，會影響view(2)view關聯的元素值變化，會影響data數據池的數據--><input type="text" v-model="hobby.val"><br /><input type="text" v-bind:value="hobby.val"><br /><p>你輸入的愛好是：{{hobby.val}}</p>
</div><script src="vue.js"></script>
<script>let vm = new Vue({el: "#app", //創建的vue實例掛載到 id=app的divdata: { //data{} 表示數據池(model有了數據)，以k-v形式設置（根據需要設置）message: "hi，輸入你的愛好",hobby: {val: "購物"}}})</script>
</body>
</html>

v-on

使用v-on進行事件處理，比如：v-on:click表示處理鼠標點擊事件
事件調用的方法定義在vue對象聲明的methods節點中
v-on：事件名可以綁定指定事件
如果方法沒有參數，可以省略()[需要瀏覽器支持]
v-on指定的簡寫形式 @[需要瀏覽器支持]
查看可以綁定的事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>事件處理</title>
</head>
<body>
<!--視圖-->
<div id="app"><h1>{{message}}</h1><!--1.v-on:click 表示給button元素綁定一個click的事件2.sayHi()表示綁定的方法，在方法池methods{}定義的--><button onclick="sayHi()">點擊輸出</button><button v-on:click="sayOk()">點擊輸出</button><button>點擊輸出</button><button>點擊輸出</button>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<!--創建一個vue實例，并掛載到id=app的div-->
<script>let vm = new Vue({el: "#app", //創建的vue實例掛載到 id=app的divdata: { //data{} 表示數據池(model有了數據)，以k-v形式設置（根據需要設置）message: "Vue事件處理的案例",name: "xd"},//是一個methods屬性，對應的值是對象//在{}中，可以寫很多的方法methods: {sayHi() {console.log("hi,1");},sayOk() {console.log("ok,2");}}})
</script>
</body>
</html>

修飾符

修飾符（Modifiers）是以（.）指明的后綴，指出某個指令以特殊方式綁定。
在事件處理程序中調用event,preventDefault()或event.stopPropagation()。
Vue.js為v-on提供了事件修飾符。
.stop
.prevent
.capture
.self
.once
.passive

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Vue修飾符使用</title>
</head>
<body>
<div id="app"><!--1. 修飾符用于指出一個指令應該以特殊方式綁定。2. v-on:submit.prevent的.prevent 修飾符表示阻止表單提交的默認行為3. 執行 程序員指定的方法--><form action="http://www.baidu.com" v-on:submit.prevent="onMySubmit">妖怪名: <input type="text" v-model="monster.name"><br/><br/><button type="submit">注冊</button></form><p>服務返回的數據是{{count}}</p><h1>修飾符擴展案例</h1><button v-on:click.once="onMySubmit">點擊一次</button><br/><input type="text" v-on:keyup.enter="onMySubmit"><input type="text" v-on:keyup.down="onMySubmit"><input type="text" v-model.trim="count">
</div>
<script src="vue.js"></script>
<script>let vm = new Vue({el: '#app',data: {//數據池monster: {//monster數據(對象)的屬性, 可以動態生成},count: 0},methods: {//方法池onMySubmit() {//console.log("我們自己的表單提交處理...");//"", null, undefined都是falseif(this.monster.name) {console.log("提交表單 name=", this.monster.name);//這里，程序員就可以根據自己的業務發出ajax請求到后端//得到數據后，在進行數據更新this.count = 666;} else {this.count = 0;console.log("請輸入名字..");}}}})
</script>
</body>
</html>

條件渲染/控制：v-if v-show

Vue提供了v-if和v-show條件指令完成條件渲染/控制
v-if會確保在切換過程中，條件塊內的事件監聽器和子組件銷毀和重建
v-show機制相對簡單，不管初始條件是什么，元素總是會被渲染，并且只是對CSS進行切換
使用建議：如果要頻繁地切換，建議使用v-show；如果運行時條件很少改變，使用v-if較好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>條件渲染 v-if</title>
</head>
<body>
<div id="app"><!--這里還可以看到checkbox的 checked屬性的值--><input type="checkbox" v-model="sel">是否同意條款[v-if實現]<!--v-if/v-else 會根據 返回的值,來決定是否動態創建對應的子組件 <h1>--><h1 v-if="sel">你同意條款</h1><h1 v-else>你不同意條款</h1>
</div>
<script src="vue.js"></script>
<script>//為了調試方便, 使用vm接收Vue實例let vm = new Vue({el: '#app',data: {//data數據池sel: false}})
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>條件渲染 v-show</title>
</head>
<body>
<div id="app"><!--這里還可以看到checkbox的 checked屬性的值--><input type="checkbox" v-model="sel">是否同意條款[v-show實現]<h1 v-show="sel">你同意條款</h1><h1 v-show="!sel">你不同意條款</h1>
</div>
<script src="vue.js"></script>
<script>//為了調試方便, 使用vm接收Vue實例let vm = new Vue({el: '#app',data: {//data數據池sel: false}})
</script>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for 列表渲染</title>
</head>
<body>
<div id="app"><!--基本語法:<li v-for="變量 in 數字">{{ 變量 }}</li>--><h1>簡單的列表渲染</h1><ul><li v-for="i in 3">{{i}}</li></ul><!--基本語法:<li v-for="(變量, 索引) in 值">{{ 變量 }} - {{ 索引 }}</li>--><h1>簡單的列表渲染-帶索引</h1><ul><li v-for="(i,index) in 3">{{i}}-{{index}}</li></ul><h1>遍歷數據列表</h1><!-- 語法:<tr v-for="對象 in 對象數組"><td>{{對象的屬性}}</td></tr>--><table width="400px" border="1px"><tr v-for="(monster,index) in monsters"><td>{{index}}</td><td>{{monster.id}}</td><td>{{monster.name}}</td><td>{{monster.age}}</td></tr></table>
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: { //數據池monsters: [{id: 1, name: '牛魔王', age: 800},{id: 2, name: '黑山老妖', age: 900},{id: 3, name: '紅孩兒', age: 200}]}})
</script>
</body>
</html>