vue2基础知识点

项目创建方式

1.vue create name 命令创建

2.vue ui 图形化方式创建

项目中的命令

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

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

• v-model是双向数据绑定

• 原理：基于object.defineproperty（)

封装的

指令

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

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

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

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

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

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

7.v-bind 属性绑定指令，原生事件绑定【样式，类名】，自定义属性，缩写

8.v-on 事件绑定指令，原生事件绑定【click],自定义事件，缩写@

9.v-pro 原格式输出命令

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

11.v-cloak 防止闪烁

修饰符

指令

• v-model有：trim去除所有空格,number把输入值转成number，lazy实时触发变成失去焦点后触发

事件

• stop 阻止事件冒泡

• prevent 阻止默认行为

• native 吧vue事件转原生事件，多用于自定义组件上绑定事件

• capture 事件捕获

混入 mixins

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

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

监听器

watch

计算属性

computed

相同点

都可以对数据进行监听

不同点

1.computed有缓存，watch没有缓存

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

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

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

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

自定义指令 directive

• 全局使用vue.directive

• 组件内使用directives

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

• bind 第一次绑定,执行一次

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

• componentUpdated 元素更新

过滤器 filter

接受一个值返回一个心智，不对元素数据修改，使用管道符合数据隔开，多个过滤器是通过各管道符隔开

组件通信

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

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

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

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

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

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

4. eventBus中央事件池，基于new一个vue实例对象

5. 高级

   -$attrs想后代传递除了央视之外的所有属性

   -$listenters向后代传递函数

6. 大型的数据共享:vuex

内置组件

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

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

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

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

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

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

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

slot插槽

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

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

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