第十三章 Vue框架13.1 ES6ES6 是 ECMAScript 6.0 的簡寫，即 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在 2015年6月正式發(fā)布了，它的目標(biāo)是讓JS能夠方便的開發(fā)企業(yè)級大型應(yīng)用程序，因此，ES6的一些規(guī)范正在逐漸向Java、C# 等后端語言標(biāo)準(zhǔn)靠近。在 ES6 規(guī)范中，比較重大的變化有以下幾個方面：
const PI = 3.14；
var x = 10; let y = 20; window.x // 10 window.y // undefined
數(shù)組的解構(gòu)賦值： var [x, y, z] = [10, 20, 30] x // 10 y // 20 z // 30 對象的解構(gòu)賦值： var {x, y} = {x: 10, y: 20} x // 10 y // 20
includes()：返回布爾值，表示是否找到了參數(shù)字符串。 stratsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的開始位置。 endsWith()：返回布爾值，表示參數(shù)字符串是否在源字符串的結(jié)尾位置 var s = "Hello world!"; s.includes("o") // true s.startsWith("Hello") // true s.endsWith("!") // true 這三個方法都支持第2個參數(shù)，表示開始匹配的位置。 s.includes("o", 8) // false s.startsWith("world", 6) // true s.endsWith("Hello", 5) // true
var name = 'Q1mi', age = 18; `My name is ${name}, I’m ${age} years old.`
var x = {name: "Q1mi", age: 18}; var y = x; var z = Object.assign({}, x); x.age = 20; x.age // 20 y.age // 20 z.age // 18
function Point(x, y){ this.x = x; this.y = y; } ? // 給父級綁定方法 Point.prototype.toSting = function(){ return '(' + this.x + ',' + this.y + ')'; } ? var p = new Point(10, 20); console.log(p.x) p.toSting(); ? // 繼承 function ColorPoint(x, y, color){ Point.call(this, x, y); this.color = color; } // 繼承父類的方法 ColorPoint.prototype = Object.create(Point.prototype); // 修復(fù) constructor ColorPoint.prototype.constructor = Point; // 擴(kuò)展方法 ColorPoint.prototype.showColor = function(){ console.log('My color is ' + this.color); } ? var cp = new ColorPoint(10, 20, "red"); console.log(cp.x); console.log(cp.toSting()); cp.showColor()
class Point{ constructor(x, y){ this.x = x; this.y = y; } // 不要加逗號 toSting(){ return `(${this.x}, ${this.y})`;} } ? var p = new Point(10, 20); console.log(p.x) p.toSting(); ? class ColorPoint extends Point{ constructor(x, y, color){ super(x, y); // 調(diào)用父類的constructor(x, y) this.color = color; } // 不要加逗號 showColor(){ console.log('My color is ' + this.color); } } var cp = new ColorPoint(10, 20, "red"); console.log(cp.x); cp.toSting(); cp.showColor() 13.2 Vue指令<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue示例</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="d1"> {{ message }} // Hello Vue! <h1 v-html="name"></h1> //顯示p標(biāo)簽渲染的Hello Vue! <p v-if="ok">哈哈哈</p> //如果data中OK:(true)，則p標(biāo)簽顯示，不存在或者(false)，則標(biāo)簽消失 <p v-show="ok">哈哈哈</p> //如果data中OK:(true)，則p標(biāo)簽顯示，不存在或者(false)，display:none //注意，v-show 不支持 <template> 元素，也不支持 v-else <a v-bind:href="url">點(diǎn)我</a> //給a標(biāo)簽綁定href='https://www.' <div v-on:click="foo">點(diǎn)我彈出123</div> //v-on監(jiān)聽，給div標(biāo)簽綁定事件 <form action=""> <input type="text" name="username"> <input v-on:click.prevent='foo' type="submit" value="點(diǎn)我"> //終止submit提交特性，執(zhí)行foo </form> <form v-on:submit.prevent="foo">...</form> //終止submit提交特性，執(zhí)行foo </div> <script src="./vue.js"></script> <!--<script src="https://cdn./vue/2.5.16/vue.js"></script>--> <script> var data = { message: 'Hello Vue!' name: "<p>Hello Vue!</p>", age: 16, ok: true, url: 'https://www.' }; ? var vm = new Vue({ el: "#d1", data: data, methods:{ /* foo:function(){ alert(123) } */ foo() { alert(123) }, remove(index){ this.todoList.splice(index,1) }, add(){ if (!this.current.title){ return } // 把當(dāng)前的這個待辦事項(xiàng) 追加到todoList var obj = Object.assign({}, this.current) this.todoList.push(obj) // 清空輸入框 this.current.title = '' } } }) </script> </body> </html> 13.3 計算屬性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="d1"> <p>lastName: {{lastName}}</p> <p>firstName: {{firstName}}</p> <p>全名: {{ fullName }}</p> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#d1", data: { firstName: "三", lastName: "張", }, // 計算屬性 computed: { // fullName:function () { // return this.lastName + this.firstName // } fullName: { // getter get: function () { console.log("你要和我要全名了。。。"); return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { console.log("你要給我設(shè)置新的全名...") var names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1] } } } }) </script> </body> </html> 13.4 綁定Class和Style<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .c { height: 100px; width: 100px; border-radius: 50%; background-color: green; } .c1 { color: red; background-color: red; } </style> </head> <body> <div id="d1"> <div v-on:click="changeRed" //div標(biāo)簽被點(diǎn)擊時執(zhí)行method中的changeRed函數(shù) class="c" v-bind:class="{ c1: isActive }" //在isActive返回true時，class="c1" > </div> <div v-bind:class="[a, b]"></div> //給div標(biāo)簽綁定class="c1 c2" //根據(jù)條件切換列表中的 class，可以用三元表達(dá)式： <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> //當(dāng)有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法： <div v-bind:class="[{ active: isActive }, errorClass]"></div> <!--直接綁定CSS樣式--> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">還有人在聽</div> //直接綁定到一個樣式對象通常更好，這會讓模板更清晰： <div v-bind:style="styleObject">還有人在聽</div> //數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上： <div v-bind:style="[baseStyles, overridingStyles]"></div> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#d1", data: { isActive:false, a: "c1", b: "c2", activeColor: "yellow", fontSize: 24 styleObject: { color: 'red', fontSize: '13px' } }, methods:{ changeRed(){ this.isActive = true } } }) </script> </body> </html> 13.5 條件渲染<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="d1"> <template v-if="show"> //添加成模板，為所有div設(shè)置條件 <div>還有人在聽</div> <div>哈哈哈</div> <div>嘿嘿嘿</div> </template> <div v-if="show">還有人在聽嗎？</div> //data中show:true 時內(nèi)容顯示 <div v-else>根本沒人在聽</div> //data中show:false 時內(nèi)容顯示 ? <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> //添加key表示不復(fù)用標(biāo)簽 </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> //注意:<label> 元素仍然會被高效地復(fù)用，因?yàn)樗鼈儧]有添加 key 屬性 </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#d1", data: { show: true, loginType: 'username' } }) </script> </body> </html> 13.6 列表渲染<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> </style> </head> <body> <div id="d1"> <ul> <li v-for="food in foods">{{food}}</li> </ul> <ol> <li v-for="(v, k, index) in obj">{{index}}:{{k}}:{{v}}</li> </ol> //類似于 v-if，也可以利用帶有 v-for 的 <template> 來循環(huán)渲染一段包含多個元素的內(nèi)容： <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#d1", data: { foods: [ "紅燒牛肉", "腰子湯", "小龍蝦", "豇豆炒蛋", "宮保雞丁" ], obj: { name: "張三", age: 16, gender: "哈哈哈" } } }) </script> </body> </html> 13.7 表單輸入綁定(雙向數(shù)據(jù)綁定)<body> <div id="d1"> <input type="text" v-model="name.title"> //v-model負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù) <p>{{name.title}}</p> <hr> //單個復(fù)選框，綁定到布爾值：<!-- `checked` 為 true 或 false --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> //多個復(fù)選框，綁定到同一個數(shù)組：往列表里加對應(yīng)的value值 <hr> <input type="checkbox" id="jack" value="basketball" v-model="checkedNames"> <label for="jack">籃球</label> <input type="checkbox" id="john" value="football" v-model="checkedNames"> <label for="john">足球</label> <input type="checkbox" id="mike" value="doublecolorball" v-model="checkedNames"> <label for="mike">雙色球</label> <br> <span>Checked names: {{ checkedNames }}</span> <hr> //單選按鈕(value) <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> //單選時(顯示option標(biāo)簽內(nèi)的值) <div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> //多選時 (綁定到一個數(shù)組)：往數(shù)組里添加option標(biāo)簽內(nèi)的值 <div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> //用 v-for 渲染的動態(tài)選項(xiàng)： <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> //默認(rèn)顯示A，根據(jù)option.value的值變化 //下拉選擇框 <select v-model="selected"> <!-- 內(nèi)聯(lián)對象字面量 --> <option v-bind:value="123">123</option> <option v-bind:value="{ number: 123 }">123</option> </select> <p>{{ selected }}</p> <hr> //復(fù)選框,選中顯示"吳大"，未選中顯示"梁二" <input type="checkbox" v-model="zhangzhao" true-value="吳大" false-value="梁二" > <p>{{zz}}</p> <hr> //修飾符，如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符： <input v-model.trim="msg"> <p>{{msg}}</p> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: "#d1", data: { name: { //對象 title: '' }, checked:false, checkedNames: [], zhangzhao: null, selected: null, msg: '' picked: '' selected: '' //selected: [] selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) </script> </body> 注意：v-model
|
|
|
