vue2
项目创建的方式
- vue create name 命令行方式创建
- vue ui 图形化方式创建
项目中的命令
首先在cmd命令行窗口中确认是在项目的根目录中，才能正确的启动命令
-
开发环境命令：
npm run serve
-
打包便衣命令：
num run build
vue2里的核心特点–数据双向绑定[相应]
- v-model是双向数据绑定指令
- 原理：基于Object.defineProperty()封装的
指令
- v-model 默认只用于表单元素，数据双向绑定指令
-
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 阻止事件冒泡
- pervent 阻止默认行为
- native 把vue事件转原生事件，多用于自定义组件上绑定事件
- capture 事件捕获
混入 mixins
特点：组件瘦身，功能复用。 如果组件里的属性和混入里的名字一样，会用组件内的替代混入文件里的
监听器
- wacth
计算属性
- computed
两者的相同点
都可以对数据监听
不同点
- computed有缓存，watch没有缓存
- watch是对值的监听，值发生改变watch就会触发.computed是对值监听并且返回一个新值，被监听的值改变以后重新计算。
- watch里可以写异步操作，computed因为需要立即return所以不能有异步操作
- watch每次只能监听一个数据，computed可以一次监听多个数据，只要其中一个数据改变就会重新计算
- 语法不同：watch对于数组对象需要开启深度监听，如果只想监听对象的某个数据使用点语法，计算属性没有数据类型的限制，但是如果要对计算属性的值重新赋值，需要写出对象的写法，使用get和set。
自定义指令 directive
指令，都是给标签身上附加的高级功能。
- 全局使用vue.directive
- 组件内使用directives
- bind 第一次绑定，执行一次
- inserted 元素挂载到页面，执行一次
- componentUpdated 元素更新
过滤器 filter
接收一个值返回一个新值,不对原始数据修改,使用管道符和数据隔开,多个过滤器使用过个管道福隔开
组件通信
- 父传子：父组件给子组件绑定一个属性，子组件使用props接收
-
子传父：父组件给子组件绑定一个事件，子组件使用
$emit
去调用事件函数 - 兄弟：所有的子组件通过一个父组件进行数据的交换
-
.sync 伪数据双向绑定 属性修饰符，子组件使用固定语法调用
this.$emit('update:xx',val)
- v-model 数据双向绑定 会向子组件注入一个value属性和input的事件
-
$root
获取根实例对象
$parent
获取直接父组件实例对象
$children
获取直接子组件实例集合
$refs
获取子组件实例对象 -
$eventBus
中央事件池，基于new了一个vue实例对象 - 高级用法
-
$attrs
向后代传递除了样式之外的所有属性 -
$listeners
向后代传递函数
- 大型的数据共享：vuex
内置组件
component 动态加载组件-动态组件
- 这个组件必须要有一个is属性，用来加载对应的组件名称
- 为了满足需要大量手写自定义组件的场景，实现tab选项卡。
keep-alive 缓存组件-缓存组件的状态
- 把组件所有被改变的状态都会存储起来
- 组件属性：exclude 把不想被缓存的组件名字写入，该组件就不会被缓存了
- 组件属性：include 只缓存被包含的组件，其他不写入的组件名字的组件则不会被缓存
slot 插槽
- 匿名插槽，无论组件的内部被插入任何内容，都会被slot标签接收，常用于纯静态的可复用的dom结构中
- 具名插槽，父组件使用template标签使用v-slot:name 加名字，插槽组件使用slot标签的name属性接收
- 作用域插槽，父组件在template标签使用v-slot:name=’接收值’ 子组件在slot标签上绑定属性传参
vue-router
-
路由【组件】的懒加载：使用函数返回一个import方法，在imoprt方法里加载组件路径，import方法会返回一个promise对象。只有当用户手动切换到当前的路由中，才会去加载这个组件。
-
$router
和
$route
的区别 答：router是new VueRouter的实例对象，表示当前项目中整个的路由实例，拥有全部的路由功能，而route仅仅表示当前路由的信息。 -
路由传参
- query 在地址中使用get方式显示
-
params 多个地址加载同一个组件，使用
/：动态参数
接收不同的值，其原理就是动态路由 - 元信息
- router-view 通过组件传参，凡是被router-view加载出来的视图组件，都会被传入自定义属性
- 路由守卫| 路由的拦截器| 路由的生命周期
- 全局的守卫
- beforeEach 前置守卫【路由鉴权】
- afterEach 后置守卫【作用很小】
- 路由独享守卫【路由配置里】
- beforeEnter 进入前确认【打酱油的】
- 组件内的路由守卫【组件用的】
- beforeRouteEnter 组件加载前再次确认
- beforeRouteUpdate 【重要】当前页面不销毁，但是地址在变化，用于获取最新路由信息的函数
- beforeRouteLeave 离开当前路由组件前
- 动态路由和嵌套路由
-
动态路由:
/path/:XX
一个路由匹配多个地址，加载的是同一个组件 - 嵌套:一个父路由里有children子路由
- 路由元信息
- meta对象来传递数据
- 动态添加路由
- addRoute：只能添加一条路由匹配对象
- addRoutes：可以添加一组路由匹配对象
- 路由模式 都是基于导航对象封装的，分别是history和hash对象
- history 历史记录对象封装的，普通的url地址
-
hash 锚地方式，用
#
表示路径 区别是：hash不回发起真正的url请求，而history会发起真正的请求
vuex 全局状态管理器
state 核心状态管理对象，数据存在内存中，刷新页面会丢失
getters 相当于计算属性，对state进行计算并且返回新值
mutations 同步方法，修改state的
actions 动作：处理异步
module 模块
plugins 插件，一般使用持久化存储
strict 严格模式
版权声明：本文为m0_70901094原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。