今日内容
- ES6语法
- VUE使用步骤
- VUE常见指令
- VUE生命周期
- VUE组件
- ECMAScript语法
- ES6概述
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
① ECMAScript 和 JavaScript 的关系
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外 ECMAScript 方言还有 Jscript 和 ActionScript）。
② ES6 与 ECMAScript 2015 的关系
2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。
ES6 的第一个版本，在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）。
2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。
因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。
- Let变量
语法说明：
1） var 声明的变量没有局部作用域，let 声明的变量有局部作用域
2） 同一个作用域内var 可以声明多次，let 只能声明一次
3） var 会变量提升，let 不存在变量提升。变量提升指的是不声明也可以用，只不过值是undefined。而let变量不声明是会报错的。
- Const常量
语法说明：
1）声明之后不允许改变值
2）一但声明必须初始化，否则会报错
同java中final。
- 解构赋值
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
语法说明
数组解构：let [a,b,c]=[1,2,3]; 相当于给三个变量分别赋值1，2，3
对象解构：let[name,age] = user; 这里name,age必须是user对象的属性；
- 模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
语法说明：
1）多行字符串 let str = `abc xyz`;
2）字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let str = `你好吗${name}`;
- 字符串中调用函数
let str = `中公${print()}`;
- 声明对象简写
需要将某些变量的值赋值给对象中属性时使用。
声明对象的语法：var obj = {key1:val1,key2:val2....};
当对象的key和value相等的时候，可以省略对象的key
- 函数定义的简写
可以省略关键字：function
- 对象拓展运算符
拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
语法说明：
拷贝对象：let user2 = {...user1}; 把user1中所有属性拷贝给user2
合并对象: let user3 = {...user1,...user2}; 将user1和user2中的所有属性合到user3
- 带默认值的函数参数
函数中设置默认参数值。
注意事项：
1）带默认值的参数，只有在未传递参数，或者参数为 undefined 时，才会使用默认参数值
2）null 值被认为是有效的值，因此不会使用默认值。
- 不定参数
不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。（类似java的可变参数）
- 箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：(参数1，参数2) => {函数体}
语法说明：
- 当箭头函数没有参数或者有多个（2个以上）参数，要用 () 括起来。
- 只有一个参数的时候括号可以省略
3） 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块。
4） 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
- VUE基础
- VUE概述
- VUE概念
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue.JS是优秀的前端 JavaScript 框架
- Vue创始人：尤雨溪
vue发展史：
2013年底作为尤雨溪个人实验室项目开始研发
2014年2月分开发布
2014年11月发布0.11版本
目前最新版本Vue3.0
官网地址：https://vuejs.org/
- 为什么学习VUE
- 随着项目业务场景的复杂,传统模式(html+jquery)已无法满足需求,就出现了Angular/React/Vue等框架。
- 企业需求、主流框架之一、易用、灵活、高效
- VUE能做什么
- 最大程度上解放了 DOM 操作
- 单页web项目开发（所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。）
- 传统网站开发
- VUE核心概念
① 解耦视图与数据，前后端分离
② M-V-VM模型 关注模型和视图
M：即Model，模型（数据），包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型和视图间的双向操作
③ 双向数据绑定
- MVVM之前
开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。
- MVVM之后
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：
- 只要我们Model发生了改变，View上自然就会表现出来。
- 当用户修改了View，Model中的数据也会跟着改变
把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上
如下图：
- VUE入门
- 下载安装
引入方式有两种
① CDN在线引入
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
② 下载后离线引入
开发版本: https://vuejs.org/js/vue.js
生产版本: https://vuejs.org/js/vue.min.js
<script src="js/vue.min.js"></script>
- 入门案例
- 使用CDN或离线引入方式将vue.js文件引入到html页面中
- 在html页面中创建挂载点
- 在script标签中创建Vue实例，并定义数据。
概念说明：
- Vue实例：new Vue()内容
- 挂载点：el对应的dom元素节点
- 插值表达式：{{}}获取data中的数据
注：一个html页面可以有多个Vue实例对象
- VUE常见指令
- v-text和v-html
类似innerText text()和innerHTML html()，给页面中带文本节点元素绑定数据
① v-text：更新标签中的内容，不会识别内容中的标签
② v-html：更新标签中的内容/标签，会解析内容包含的标签
- v-if和v-show
根据表达式的boolean值进行判断是否渲染该元素（与元素的显示和隐藏有关）boolean值为true表示显示，false表示隐藏。
v-if:隐藏元素的时候，直接删除dom元素
v-show:隐藏元素内容，通过display属性控制，dom元素依然存在
- v-on
① 作用：使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
② 语法：
v-on:事件名 = "methods中的方法名";
v-on的简写方法: @事件名 = "methods中的方法名";
- v-for
① 作用：列表渲染,当遇到相似的标签结构时,就用v-for去渲染
② 格式：
【1】(item,index) in 数组或集合
参数item:数组中的每个元素
参数index:数组中元素的下标
【2】(value, key, index) in 对象
参数index:对象中每对key-value的索引 从0开始
参数key:键
参数value:值
- v-bind
① 作用: 可以给标签上的任何属性绑定值
② 格式：v-bind:属性="值"
③ 简写格式：:属性="值"
④ 属性值一部分进行替换的格式：:属性="'常量值' + vue对象data中的数据"
- v-model
1. 作用：表单元素的绑定
2.特点：双向数据绑定
（1）vue对象中的数据发生变化可以更新到界面
（2）通过界面可以更改vue对象中数据
（3）v-model 会忽略所有表单元素的 value、 checked 、 selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。
3.v-model修饰符：
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入vue.js文件 --> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <p>{{user.username}}</p> <p>{{user.pwd}}</p> <p>{{user.sex}}</p> <p>{{hobbies}}</p> <p>{{user.degree}}</p> <p>{{user.mark}}</p>
<table border="1" cellpadding="10" cellspacing="0" width="500px"> <tr> <td>用户名</td> <td><input type="text" v-model="user.username"></td> </tr> <tr> <td>密码</td> <td><input type="password" v-model="user.pwd"></td> </tr> <tr> <td>性别</td> <td><input type="radio" value="0" v-model="user.sex">男 <input type="radio" value="1" v-model="user.sex">女</td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" value="唱歌" v-model="hobbies">唱歌 <input type="checkbox" value="跳舞" v-model="hobbies">跳舞 <input type="checkbox" value="健身" v-model="hobbies">健身 <input type="checkbox" value="爬山" v-model="hobbies">爬山 </td> </tr> <tr> <td>学历</td> <td><select v-model="user.degree"> <option value="0">本科</option> <option value="1">硕士</option> <option value="2">博士</option> </select></td> </tr> <tr> <td>简介</td> <td> <textarea cols="50" rows="4" v-model="user.mark"></textarea> </td> </tr> </table> </div> <script> //创建Vue实例 var app = new Vue({ el:"#app",//指定挂载点 data:{ //定义数据 user:{ username:'', pwd:'', sex:0, degree:0, mark:'' }, hobbies:[] } }) </script> </body> </html> |
- computed
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便
计算属性可以简化表达式
例如：
- 将一个字符串反转后显示
- 获取系统当前时间并拼接指定的格式输出
- watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
- VUE生命周期
- 概念：
Vue实例从创建到销毁的过程，就是生命周期。
详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
在vue整个的生命周期中提供了八个钩子函数：
beforeCreate 创建前
created 创建结束
beforeMount挂载前
mounted挂载结束
beforeUpdate修改前
updated修改后
beforeDestroy销毁前
destroyed销毁后
- 图示
VUE生命周期图示：
3.详解
生命周期的各个钩子函数说明：
1）在beforeCreate和created钩子函数之间的生命周期：在这个生命周期之间，进行初始化事件，进行数据的观测，挂载点、data属性及数据均未初始化。
2）created钩子函数和beforeMount间的生命周期：在created后data和数据已经初始化，并进行了绑定。但此时还没有el挂载点。
如果此时把el挂载点去掉，则生命周期结束。
3）beforeMount钩子函数和Mounted间的生命周期：首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。但这时生成的html页面还没有挂载到el上。
4）Mounted钩子函数之后：生成的html就已经显示到网页上。
5）当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。（此过程会执行多次）
在console中输入：app.message = '触发组件更新'测试
4.beforeDestroy和destroyed钩子函数间的生命周期
调用：app.$destroy()销毁实例
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
生命周期代码示例：
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue生命周期</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{message}} </div> <script> var app=new Vue({ el:"#app", data:{ message:"hello vue !" }, beforeCreate: function() { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red" , "el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //undefined console.log("%c%s", "color:red","message: " + this.message) //undefined }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }); </script> </body> </html> |
console.log支持的格式标志有:
- VUE组件
组件是可复用的 Vue 实例，组件定义后，可以作为自定义元素来使用。每个组件都有名字，这个名字就相当于标签名，可以多次复用。
分类：
全局组件
局部组件
- 全局组件
语法：
Vue.component(组件名称,{
template:”html模板内容”,
data(){
return{
}
},
Methods:{}
})
特点：
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用
- data的定义方式比较特殊，必须是一个函数。
- 定义组件要在Vue对象之前声明。
- 一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
- 通常是一些频繁使用的组件。
- 一个页面可以使用多个全局组件。
- 组件名称是多个单词的，使用的时候需要使用-连接单词
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入vue.js文件 --> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <con1></con1> <con1></con1> <page-bean></page-bean> <page-bean></page-bean> </div> <script> Vue.component("con1",{ template:"<h2 @click='fun()'>{{msg}}</h2>", data(){ return{ msg:"全局组件" } }, methods:{ fun(){ alert(1); } } }) Vue.component("pageBean",{ template:"<div>{{msg}}</div>", data(){ return{ msg:"分页组件" } } }) //创建Vue实例 var app = new Vue({ el:"#app",//指定挂载点 data:{ //定义数据
} }) </script> </body> </html> |
- 局部组件
语法：
Vue实例外定义
const 组件名称={
template:”html模板内容”,
data(){
return{}
},
Methods:{}
}
vue实例内
Components:{
组件一key:组件一值，
组件二key:组件二值，
.....
}
特点：
- components就是当前vue对象子组件集合
- components 的key是自定义的子组件名称
- components 值是外面定义的组件对象的变量名称
- 当key和值相等的时候可以省略key
- 组件只能在当前的Vue实例中使用
- 当组件名称是复合单词时候：比如connAdd，引用的时候需要<conn-add>
- 定义组件要在Vue对象之前声明
- 一个页面可以引入多个组件
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入vue.js文件 --> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <conn1></conn1> <conn2></conn2> <con-add></con-add> </div> <div id="app2"> <conn1></conn1> </div> <script> const con1 = { template:"<p>{{msg}}</p>", data(){ return{ msg:"局部组件1" } } } const con2 = { template:"<p>{{msg}}</p>", data(){ return{ msg:"局部组件2" } } } const conAdd = { template:"<p>{{msg}}</p>", data(){ return{ msg:"局部组件3" } } } //创建Vue实例 var app = new Vue({ el:"#app",//指定挂载点 data:{ //定义数据
}, components:{ "conn1":con1, "conn2":con2, conAdd } }) var app2 = new Vue({ el:"#app2", components:{ "conn1":con1, "conn2":con2, conAdd } }) </script> </body> </html> |
69
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
