vue2
项目创建的方式
1.vue create name 命令行方式创建 2.vue ui 图形方式创建
项目中的命令
- 首先在cmd命令行窗口中确认是在项目的根目录中，才能正确的启动命令
- 开发环境命令：
npm run serve - 打包编译命令：
npm run build
vue2里的核心特点--数据的双向绑定【响应】
- v-model 是双向数据绑定指令
- 原理：基于Object.defineProperty()封装的
指令
- v-model 默认只用于表单元素，数据双向绑定指令，基于：Object.defineProperty()封装
- v-text 渲染文本指令，和{{}}插值语法等同，唯一的区别就是过滤器只能用于插值不能用于指令，基于innerText
- v-html 渲染dom指令，包含v-text指令的功能，同时可以把字符串dom变成真的dom元素，基于innerHTML
- v-show 控制元素的css样式的display属性，对于元素的性能开销最小，如果频繁切换优先使用
- v-if 控制元素的加载与销毁，会频繁的触发元素的生命周期，性能开销大，一般不推荐使用
- v-for 循环渲染指令，可以渲染的值类型有：数组、数字、字符串还有对象
- v-bind: 属性绑定指令，原生属性绑定[样式，类名]，自定义属性,缩写是：
: - v-on: 事件绑定指令，原生事件绑定[click]，自定义事件，缩写是:
@ - v-pre:原格式输出值
- v-once:永远只渲染第一次的值
- v-cloak:防止闪烁
修饰符
指令修饰符
- v-model有:trim去掉所有空格
- number:把输入的值转成number
- lazy: 实时触发变成失去焦点后触发
事件修饰符
- stop：阻止事件冒泡
- prevent：阻止默认行为
- native：把vue事件转成原生事件，多用于自定义组件上绑定事件
- capture：事件捕获
混入 mixins
- 特点：组件瘦身，功能复用。
- 如果组件里的属性和混入里的名字一样，会用组件内的替代混入文件里的，但是生命周期会保留
监听器
-watch
计算属性
-computed
相同点
都可以对数据监听
不同点
- computed有缓存，watch没有
- watch是对值的监听，值发生改变watch就会触发，computed是对值监听并返回一个新值，被监听的值改变以后重新计算
- watch里可以写异步操作，computed因为需要立即return所以不能有异步操作
- watch每次只能监听一个数据，computed可以监听多个数据，只要其中一个数据改变就会重新计算
- 语法不同：watch对于数组对象需要开启深度监听，如果只想监听对象的某个数据使用点语法，计算属性没有数据类型的限制，但是如果要对计算属性的值重新赋值，需要写出对象的写法，使用get和set
自定义指令
- 全局使用：vue.directive
- 组件内使用：directive
- 指令，都是给标签身上附加的高级功能
- bind 第一次绑定，执行一次
- inserted 元素挂载到页面，执行一次
- componentUpdated 元素更新
过滤器 filter
- 接收一个值返回一个新值，不对原始数据修改，使用管道符和数据隔开，多个过滤器使用过管道符隔开
组件通信
- 父传子：父组件给子组件绑定一个属性，子组件使用props接收
- 子传父：父组件给子组件绑定一个事件，子组件使用
$emit去调用事件函数 - 兄弟：所有的子组件通过同一个父组件进行数据的交换
- .sync 伪数据双向绑定：属性修饰符，子组件使用固定语法调用
this.$emit('update:xx',val) - v-model 数据双向绑定：会向子组件注入一个value属性和input事件
$root：获取根实例对象$parent：获取直接父组件实例对象$children：直接子组件实例集合$refs：获取子组件实例集合
evenBus中央事件池，基于new了一个vue实例对象- 高级用法
$sttrs向后代传递了样式之外的所有属性$listeners向后代传递函数
- 大型的数据共享：vuex
内置组件
component 动态加载组件--动态加载组件
- 这个组件必须要有一个is属性，用来加载对应的组件名称
- 为了满足需要大量手写自定义组件的场景，实现tab选项卡
keep-alive 缓存组件-缓存组件的状态
- 把组件的所有被改变的状态都会存储起来
- 组件属性：exclude 把不想被缓存的组件名字写入，该组件就不会被缓存
- 组件属性：include 只缓存被包含的组件，其他不写入组件名字的组件则不会被缓存
slot 插槽
- 匿名插槽：无论组件内部被插入任何内容，都会被slot标签接收，常用语纯静态的可复用的dom结构中
- 具名插槽：父组件使用template标签使用v-slot:name加名字，插槽组件使用slot标签的name属性接收
- 作用域插槽：父组件在template标签使用v-slot:name='接收值'子组件在slot标签绑定属性传参
