星空健康频道: 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 // 10window.y // undefined

ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为变量的解构赋值。

数组的解构赋值：var [x, y, z] = [10, 20, 30]x // 10y // 20z // 30对象的解构赋值：var {x, y} = {x: 10, y: 20}x // 10y // 20

在此之前，JavaScript中只有indexOf方法(存在返回0，不存在返回-1)可用来确定一个字符串是否包含在另一个字符串中。ES6中又提供了3种新方法：

includes()：返回布尔值，表示是否找到了参数字符串。stratsWith()：返回布尔值，表示参数字符串是否在源字符串的开始位置。endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾位置var s = "Hello world!";s.includes("o")   // trues.startsWith("Hello") // trues.endsWith("!")   // true这三个方法都支持第2个参数，表示开始匹配的位置。s.includes("o", 8)  // falses.startsWith("world", 6) // trues.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 // 20y.age // 20z.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);// 修复 constructorColorPoint.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，可以用三元表达式： <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 作为事件

原文转载：http://www.shaoqun.com/a/481279.html

naver：https://www.ikjzd.com/w/1727

菜鸟网络：https://www.ikjzd.com/w/1547

贝贝官网：https://www.ikjzd.com/w/1321

第十三章Vue框架13.1ES6ES6是ECMAScript6.0的简写，即JavaScript语言的下一代标准，已经在2015年6月正式发布了，它的目标是让JS能够方便的开发企业级大型应用程序，因此，ES6的一些规范正在逐渐向Java、C#等后端语言标准靠近。在ES6规范中，比较重大的变化有以下几个方面：新增let、const命令来声明变量，和var相比，let声明的变量不存在变量提升问题，不允
心怡科技：https://www.ikjzd.com/w/1327
noon：https://www.ikjzd.com/w/259
丽江束河古镇特产有哪些？：http://tour.shaoqun.com/a/5232.html
三亚超强攻略：http://tour.shaoqun.com/a/52091.html
2020国庆节深圳适合带孩子去哪里玩？深圳国庆节有孩子玩的：http://tour.shaoqun.com/a/31991.html

星空健康频道

2020年10月20日星期二

ES6、Vue指令、计算属性、绑定Class和Style、条件渲染、列表渲染、表单输入绑定(双向数据绑定)

第十三章 Vue框架

13.1 ES6

13.2 Vue指令

13.3 计算属性

13.4 绑定Class和Style

13.5 条件渲染

13.6 列表渲染

13.7 表单输入绑定(双向数据绑定)

没有评论:

发表评论

2020年10月20日星期二

ES6、Vue指令、 计算属性、绑定Class和Style、条件渲染、列表渲染、表单输入绑定(双向数据绑定)

第十三章 Vue框架

13.1 ES6

13.2 Vue指令

13.3 计算属性

13.4 绑定Class和Style

13.5 条件渲染

13.6 列表渲染

13.7 表单输入绑定(双向数据绑定)

没有评论:

发表评论

ES6、Vue指令、计算属性、绑定Class和Style、条件渲染、列表渲染、表单输入绑定(双向数据绑定)