vue2知识

项目创建的方式

1. vue create name  命令行创建方式

2. vue ui   图形化方式创建

项目中的命令

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

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

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

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

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

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

 指令

1. v-model  默认只用于表单元素，数据双向绑定指令

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

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

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事件转原生事件,多用于自定义组件上绑定事件

- captrue   事件捕获

混入 mixins

热点：组件瘦身,功能复用

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

监听器

- watch

计算属性

- computed

两者相同点

都可以对数据监听

不同点

1. computed有缓存，watch没缓存

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

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

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

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

自定义指令   directive

- 全局使用vue.directive

- 组件内使用directives 指令,都是给标签身上附加的高级功能.

1. bind 第一次绑定,执行一次

2. inserted 元素挂载到页面,执行一次

3. componentUpdated 元素更新

过滤器 filter

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

组件通信

1. 父传子:父组件传给子组件绑定一个属性,子组件使用props接收

2. 子传父:父组件传给子组件绑定一个事件,子组件使用`$emit`去调用事件函数

3. 兄弟：所有的子组件通过同一个父组件进行数据的交换

4. .sync 伪数据双向绑定 属性修饰符,子组件使用固定语法调用`this.$emit('update:xx',val)`

5. v-model  数据双向绑定    会向子组件注入一个value属性和input事件

6. `$root` 获取根实例对象 `$parent` 获取直接父组件实例对象  `$children` 直接子组件实例集合 `$refs`获取子组件实例对象

7. `eventBus`   中央事件总线,基于new了一个vue实例对象

8. 高级用法

- `$attrs`  向后代传递除了样式之外的所有属性

- ``

9. 大型的数据共享:  vuex

 

内置组件

component  动态加载组件-动态组件

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标签上绑定属性传参