ES6、Vue指令、 计算属性、绑定Class和Style、条件渲染、列表渲染、表单输入绑定(双向数据绑定)
第十三章 Vue框架
13.1 ES6
ES6 是 ECMAScript 6.0 的简写,即 JavaScript 语言的下一代标准,已经在 2015年6月正式发布了,它的目标是让JS能够方便的开发企业级大型应用程序,因此,ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。在 ES6 规范中,比较重大的变化有以下几个方面:
新增 let、const 命令 来声明变量,和var 相比,let 声明的变量不存在变量提升问题,不允许在相同的作用域内重复声明同一个变量,但没有改变JS弱类型的特点,依然可以接受任意类型变量的声明;const 声明的变量不允许在后续逻辑中改变,提高了JS语法的严谨性。
新增解构赋值、rest 语法、箭头函数等,这些都是为了让代码看起来更简洁,而包装的语法糖。
新增模块化机制,这是 JavaScript 走向规范比较重要的一步,让前端更方便的实现工程化。
新增类和继承的概念,配合模块化,JavaScript 也可以实现高复用、高扩展的系统架构。
新增模板字符串功能,高效简洁,结束拼接字符串的时代。
新增 Promise 机制,解决异步回调多层嵌套的问题。
ES5中只有全局作用域和函数作用域,并没有块级作用域,而ES6中使用let设置块级作用域,外层代码块就不再受内层代码块的影响
const用来声明常量。const声明常量必须立即初始化,并且其值不能再改变。const声明常量的作用域与let相同,只在声明所在的块级作用域内有效。
const PI = 3.14;
ES6规定:var命令和function命令声明的全局变量依旧是全局对象的属性;let命令、const命令和class命令声明的全局变量不属于全局对象的属性
var x = 10; let y = 20; window.x // 10 window.y // undefined
ES6允许按照一定的模式,从数组或对象中提取值,对变量进行赋值,这种方式被称为变量的解构赋值。
数组的解构赋值: var [x, y, z] = [10, 20, 30] x // 10 y // 20 z // 30 对象的解构赋值: var {x, y} = {x: 10, y: 20} x // 10 y // 20
在此之前,JavaScript中只有indexOf方法(存在返回0,不存在返回-1)可用来确定一个字符串是否包含在另一个字符串中。ES6中又提供了3种新方法:
includes():返回布尔值,表示是否找到了参数字符串。 stratsWith():返回布尔值,表示参数字符串是否在源字符串的开始位置。 endsWith():返回布尔值,表示参数字符串是否在源字符串的结尾位置 var s = "Hello world!"; s.includes("o") // true s.startsWith("Hello") // true s.endsWith("!") // true 这三个方法都支持第2个参数,表示开始匹配的位置。 s.includes("o", 8) // false s.startsWith("world", 6) // true s.endsWith("Hello", 5) // true
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。在模板字符串中嵌入变量,需要将变量名写入${}中。
var name = 'Q1mi', age = 18; `My name is ${name}, I’m ${age} years old.`
箭头函数有个特点:如果参数只有一个,可以省略小括号、如果不写return,可以不写大括号、没有arguments变量、不改变this指向(其中箭头函数中this指向被固定化,不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this)
Object.assign方法用来将源对象(source)的所有可枚举属性复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,第二个参数是源对象。参数必须都是对象,否则抛出TypeError错误。
Object.assjgn只复制自身属性,不可枚举属性(enumerable为false)和继承的属性不会被复制。
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
ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。
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); // 修复 constructor ColorPoint.prototype.constructor = Point; // 扩展方法 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()
ES6 使用Class构造对象的方式:
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); // 调用父类的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标签渲染的Hello Vue! <p v-if="ok">哈哈哈</p> //如果data中OK:(true),则p标签显示,不存在或者(false),则标签消失 <p v-show="ok">哈哈哈</p> //如果data中OK:(true),则p标签显示,不存在或者(false),display:none //注意,v-show 不支持 <template> 元素,也不支持 v-else <a v-bind:href="url">点我</a> //给a标签绑定href='https://www.sogo.com' <div v-on:click="foo">点我弹出123</div> //v-on监听,给div标签绑定事件 <form action=""> <input type="text" name="username"> <input v-on:click.prevent='foo' type="submit" value="点我"> //终止submit提交特性,执行foo </form> <form v-on:submit.prevent="foo">...</form> //终止submit提交特性,执行foo </div> <script src="./vue.js"></script> <!--<script src="https://cdn.bootcss.com/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.sogo.com' }; 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 } // 把当前的这个待办事项 追加到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("你要给我设置新的全名...") 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标签被点击时执行method中的changeRed函数 class="c" v-bind:class="{ c1: isActive }" //在isActive返回true时,class="c1" > </div> <div v-bind:class="[a, b]"></div> //给div标签绑定class="c1 c2" //根据条件切换列表中的 class,可以用三元表达式: <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> //当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法: <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> //数组语法可以将多个样式对象应用到同一个元素上: <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设置条件 <div>还有人在听</div> <div>哈哈哈</div> <div>嘿嘿嘿</div> </template> <div v-if="show">还有人在听吗?</div> //data中show:true 时内容显示 <div v-else>根本没人在听</div> //data中show:false 时内容显示 <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> //添加key表示不复用标签 </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> //注意:<label> 元素仍然会被高效地复用,因为它们没有添加 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> 来循环渲染一段包含多个元素的内容: <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 表单输入绑定(双向数据绑定)
<body> <div id="d1"> <input type="text" v-model="name.title"> //v-model负责监听用户的输入事件以更新数据 <p>{{name.title}}</p> <hr> //单个复选框,绑定到布尔值:<!-- `checked` 为 true 或 false --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> //多个复选框,绑定到同一个数组:往列表里加对应的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标签内的值) <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> //多选时 (绑定到一个数组):往数组里添加option标签内的值 <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 渲染的动态选项: <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> //默认显示A,根据option.value的值变化 //下拉选择框 <select v-model="selected"> <!-- 内联对象字面量 --> <option v-bind:value="123">123</option> <option v-bind:value="{ number: 123 }">123</option> </select> <p>{{ selected }}</p> <hr> //复选框,选中显示"吴大",未选中显示"梁二" <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会忽略所有表单元素的
value、
checked、
selected特性的初始值而总是将Vue 例的数据作为数据来源。应该通过 JavaScript 在组件的
data` 选项中声明初始值。
v-model
在内部为不同的输入元素使用不同的属性并抛出不同的事件:
text 和 textarea 元素使用
value
属性和input
事件;checkbox 和 radio 使用
checked
属性和change
事件;select 字段将
value
作为 prop 并将change
作为事件