微服务项目之电商--7.ECMAScript6语法及Vue框架使用（一）

目录

一、ECMAScript6语法

1、let变量

 2、const变量

 3、解构表达式

解构表达式解析数组

 解构表达式解析对象

 函数优化

二、Vue框架

1、安装node

2、创建项目

 项目安装vue

 vue的简单使用

 函数的使用

 3、vue的生命周期

钩子函数 

4、指令

插值表达式

v-text和v-html 

v-model

 v-on

事件修饰符

key

v-if和v-show

v-bind

 计算属性

 watch

---

一、ECMAScript6语法

1、let变量

var：全局变量

let：定义局部变量，弥补了var定义的界面的全局变量的问题

打开界面控制台

 2、const变量

const：定义常量，相当于java中的final，一定定义以后就不能修改了

 

 3、解构表达式

解构表达式解析数组

 解构表达式解析对象

数组是有索引的，变量名可以随意。但是对象的属性是没有属性的，必须都通对象属性名相同才能获取对应的值

 

 函数优化

 

二、Vue框架

1、安装node

安装node和npm管理前端依赖

官网下载node

 安装完之后，直接查看版本即可

node安装完之后会自带npm

 但是由于npm的镜像仓库在国外，在下载依赖的时候很慢，所以需要我们切换到国内镜像

-g：全局切换

安装完成之后查看 nrm  ls

 

 指定国内taobao镜像

2、创建项目

创建一个空工程

 

 添加一个module

 

 

 

 移动到vue模块里面

 

 项目安装vue

--save：只针对当前项目

-g：针对整个电脑系统

安装vue之后，发送的变化 

 

 

 创建html文件，引入vue.js

 vue的简单使用

modul--》view

 在这里给你的感觉就是modul到view的过程，其实功能远远没这么简单

 view--》modul

 

 

 函数的使用

 

 3、vue的生命周期

每个vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当vue实例处于不同的生命周期时，对应的函数就会被触发调用。

vue的this对象指向的是创建出来的vue对象

钩子函数 

所以我们在修改对象值的什么都需要添加this

create()：在对象创建之前执行的方法

 总结：this就是当前的vue实例，在vue内部，必须使用this才能访问到vue中定义的data内属性、方法等。

4、指令

指定（directives）是带有v-前缀的特殊属性。例如我们在前面案例中的v-model，代表双向绑定。

插值表达式

花括号

在用户网速比较慢的情况下会出现插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据为加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

可以调慢网速测试

v-text和v-html 

通过指令来代替花括号

对比 v-text和v-html 

 

 

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。v-model视图（view）和模型（model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input

select

textarea

checkbox

redio

component（vue中的自定义组件）

v-model一般使用在用户操作 

 

 v-on

v-on指令用于给页面元素绑定事件。简写可以只写使用“@”

事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop：阻止事件冒泡

.prevent：阻止默认事件发生

.capture：使用事件捕获模式

.self：只有元素自身触发事件才执行

.once：只执行一次

实现父类的触发事件和子类的触发事件不会冲突

key

当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有的且唯一的id。

v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

可以动态的点击切换

 

 

 

 v-for也可以和v-if一起使用

 

v-if和v-show两个效果一样，前面是直接干掉源码，后面是修改隐藏 属性

v-bind

属性上使用vue数据，

将class变为vue的本身属性，然后进行赋值

：是v-bind的缩写

 

 

 计算属性

看起来birth是方法，其实在vue内部来说，他就是一个属性，使用的时候直接属性调用就可以了

 

 

 watch