Vue基础

VUE2

项目创建的方式

1. vue create name 命令行方式创建
2. vue ui 图形化方式创建

项目中的命令

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

• 开发环境命令npm run serve
• 打包编译命令npm run build

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

• v-model 是双向数据绑定指令
• 原理：基于Object.defineprotoperty()封装的

指令

1. v-model 默认只用于表单元素，数据双向绑定指令
2. v-text 渲染文本指令，和{{}}插值语法等同，唯一的区别就是过滤器只能用于插值，不能用于指令，基于innerText
3. v-html 渲染dom指令，包含v-text指令的功能，同时可以把字符串dom变成真实的dom元素。
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 把输入值转成数字、lazy 实时触发变成失去焦点后触发

事件

• stop 阻止事件冒泡
• prevent 阻止默认行为/事件
• native 把vue事件转原生事件，多用于自定义组件上绑定行为
• capture 事件捕获

混入 mixins

• 特点：组件瘦身，功能复用。 混入文件就是把vue里的js部分抽离了出来独立封装 如果组件里的属性和混入里的名字一样，会用组件内的替代混入文件里的，但是生命周期会保留

监听器

• watch

计算属性

• 计算属性

两者的相同点

都可以对数据监听

不同点

1. computed有缓存，watch没有缓存
2. watch是对值得监听，值发生变化watch就会触发，computed是对值监听并且返回一个新值，被监听的值改变以后重新计算
3. watch里可以写异步操作，computed因为需要立即return所以不能有异步操作
4. watch每次只能监听一个数据，computed可以一次监听多个数据，只要其中一个数据改变就会重新计算
5. 语法不同：watch对于数组对象需要开启深度监听，如果只想监听对象的某个数据使用点语法。计算属性没有数据类型的限制，但是如果要对计算属性的值重新赋值，需要写出对象的写法，使用get和set

自定义指令 directives

• 全局使用vue.directives
• 组件内使用directives 指令，都是给标签身上附加的高级功能。
• bind 第一次绑定，执行一次
• inserted 元素挂载到页面，执行一次
• componentUpdated 元素更新

过滤器 filter

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

组件通信

1. 父传子：父组件给子组件绑定一个属性，子组件使用props接收
2. 子传父：父组件给子组件绑定一个事件，子组件使用$emit去调用事件函数
3. 兄弟：所有的子组件通过同一个父组件进行数据的交换
4. .sync 伪数据双向绑定
5. v-model 数据双向绑定 会向子组建注入一个value属性和input事件
6. $root获取根实例对象 $parent获取直接父组件实例对象 $children获取直接子组建实例集合 $refs获取子组建实例对象
7. $eventBus 中央事件池，基于new了一个vue实例对象
8. 大型的数据共享：vuex
9. 高级用法
   • $attrs向后代传递除了样式之外的所有属性
   • $listeners向后代传递函数

内置组件

component 动态加载组件0动态组件

1. 这个组件必须要有一个is属性，用来加载对应的组件名称

2. 为了满足需要大量手写自定义组件的场景，实现tab选项卡。

keep-alive 缓存组件-缓存组件的状态

1. 把组件的所有改变的状态都会存储起来。

2. 组件属性exclude把不想缓存的组件名字写入，该组件就不会被缓存

3. 组件属性include只缓存被包含的组件，其他不写入的组件名字的组件则不会被缓存

slot插槽

1. 匿名插槽，无论组建的内部被插入任何内容，都会被slot标签接受，常用于纯静态的可复用的dom解构中

2. 具名插槽，父组件使用template标签使用v-slot：name加名字，插槽组件使用slot标签的name属性接受

3. 作用域插槽，父组件在template标签使用v-slot：name='接收值'，子组件在slot标签上绑定属性传参