vue2语法

## vue2

## 项目创建的方式

1. vue create name  命令行的方式

2. vue ui  图形化方式创建

## 项目中的命令

 - 首先在cmd命令行窗口中确认是在项目的根目录中，才能正确的启动命令

 - 开发环境命令：`npm run serve`

 - 打包编译命令：`npm run build`

## vue2里的核心特点--数据的双向绑定【响应】

 - v-model 是双向数据绑定指令

 - 原理：基于Object.defineProperty()封装的

## 指令

1. v-model 默认只用于表单元素，数据双向绑定指令，基于：Object.defineProperty()封装

2. v-text 渲染文本指令，和{{}}插值语法等同，唯一的区别就是过滤器只能用于插值不能用于指令，基于innerText

3. v-html 渲染dom指令，包含v-text指令的功能，同时可以把字符串dom变成真的dom元素，基于innerHTML

4. v-show 控制元素的css样式的display属性，对于元素的性能开销最小，如果频繁切换优先使用

5. v-if 控制元素的加载与销毁，会频繁的触发元素的生命周期，性能开销大，一般不推荐使用

6. v-for 循环渲染指令，可以渲染的值类型有：数组、数字、字符串还有对象

7. v-bind: 属性绑定指令，原生属性绑定[样式，类名]，自定义属性,缩写是：`:`

8. v-on: 事件绑定指令，原生事件绑定[click]，自定义事件，缩写是:`@`

9. v-pre:原格式输出值

10. v-once:永远只渲染第一次的值

11. v-cloak:防止闪烁

## 修饰符

## 指令修饰符

 - v-model有:trim去掉所有空格

 - number:把输入的值转成number

 - lazy: 实时触发变成失去焦点后触发

## 事件修饰符

 - stop：阻止事件冒泡

 - prevent：阻止默认行为

 - native：把vue事件转成原生事件，多用于自定义组件上绑定事件

 - capture：事件捕获

## 混入 mixins

 - 特点：组件瘦身，功能复用。

 - 如果组件里的属性和混入里的名字一样，会用组件内的替代混入文件里的，但是生命周期会保留

## 监听器

 - watch

## 计算属性

 -computed

## 两者的相同点

 - 都可以对数据监听

## 不同点

1. computed有缓存，watch没有

2. watch是对值的监听，值发生改变watch就会触发，computed是对值监听并返回一个新值，被监听的值改变以后重新计算N,

3. watch里可以写一步操作，computed因为需要立即return所有不能有异步操作

4. watch每次只能监听一个数据，computed可以监听多个数据，只要期中一个数据改变就会重新计算

5. 语法不同：watch对于数组对象需要开启深度监听，如果只想监听对象的某个数据使用点语法，计算属性没有数据类型的限制，但是如果要对计算属性的值重新赋值，需要写出对象的写法，使用get和set

## 自定义指令

 - 全局使用：vue.directive

 - 组件内使用：directive

 - 指令，都是给标签身上附加的高级功能

 - bind 第一次绑定，执行一次

 - inserted 元素挂载到页面，执行一次

 - componentUpdated 元素更新

## 过滤器 filter

 - 接收一个值返回一个新值，不对原始数据修改，使用管道符和数据隔开，多个过滤器使用过管道符隔开