1、原理性:
-
vue双向数据绑定:
我们使用v-model这个指令来实现,数据改变,视图改变,视图改变,数据也随之改变, vue是通过数据劫持和订阅发布来进行深入响应的,数据劫持指的是,vue通过es5的 Object.defineProperty属性对data选项中的数据进行getter和setter设置,订阅发 布指的是vue通过自定义事件将data的变化反映到视图上去,vue通过observer 观察者对象反应数据的变化,然后通知vue生成新的Virtual DOM ,进而渲染视图。
-
vue数据驱动:MVVM,数据更新,视图更新
-
深入响应式原理:数据劫持、订阅发布
-
Vue.set/this.$set:针对vue中不响应数组下标、length情况
2、vue的一些指令:
- v-html:解析html标签
- v-text:解析文本
- v-for:用作循环
- v-show:用作元素的显示和隐藏(适合切换频次高)
- v-if:用作元素的创建和销毁(适合切换频次不高的场合,开销大)
- v-on:绑定事件(可简写为@+事件类型,如@click,对于js原生的,要加.native)
- v-else: 必须和v-if连用 不能单独使用 否则报错 模板编译错误
- v-else-if:必须和v-if连用
- v-bind:单向数据绑定(可简写为:)
- v-model:双向数据绑定(适合于表单的输入框)
- v-slot:插槽,给组件模板的未来内容
- v-pre:把标签内部的元素原位输出
- v-once:进入页面时 只渲染一次 不在进行渲染
- v-cloak:防止闪烁
3、计算属性、侦听属性、方法的比较
- 计算属性computed
- 有逻辑操作
- 使用起来要像全局变量一样
- 侦听属性
- 大量数据操作 / 异步数据请求( 多 )
- 方法methods
- 事件处理程序(函数)
4、组件的注册
-
全局和局部注册
//全局组件注册: <body> <div id="app"> </div> <template id="hahaha"> <div>这里是全局组件</div> </template> </body> vue.component('Hello',{ template:'#hahaha' })
//局部注册,写在VM里面 new Vue({//VM el: '#app', components: { //局部注册组件的选项,注意这里是带有"s"的 // 组件名: 组件选项 'Hello': { template: '<div> Hello 这里是局部注册 </div>' } } })
5、组件生命周期
1、生命周期的概念:
vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做 生命周期钩子函数(组件钩子 )。
2、为什么要学习生命周期?
因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途。
3、Vue生命周期的三个阶段:
Vue的生命周期分为三个阶段,分别为: 初始化,运行中 和 销毁,一共8个钩子函数。
注意: 生命周期钩子函数不允许写成箭头函数,因为这里使用箭头函数就会改变this的指向
-
初始化:
- beforeCreate(){ } 数据没有获得,真实dom也没有渲染出来
- created(){ } 数据得到了,真实dom没有渲染出来
- beforeMount(){ } 数据可以获得,但是真实dom还没有渲染
- mounted(){ } 可以进行真实dom的操作了( 可以进行第三方库的实例化,静态数据)
- beforeCreate(){ } 数据没有获得,真实dom也没有渲染出来
-
运行中:
- beforeUpdate(){ } 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
- updated(){ } 真实dom得到了,数据也得到了( 更新后的 ),动态数据获取( 第三方库实例化 )
- beforeUpdate(){ } 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
-
销毁:用来做善后的,比如计时器的关闭、第三方实例的删除
- beforedestroy(){ }
- destroyed(){ }
销毁分为内部销毁和外部销毁,外部用开关、v-if,这种比较彻底,vue的数据和dom外壳都被销毁;内部销毁用的$destory()方法,这种只能销毁数据,没有销毁dom结构外壳,这时需要dom操作去除外壳。
- beforedestroy(){ }
6、组件通信
- 父子组件通信:父组件属性绑定,子组件props接收
- 子父组件通信:自定义事件
- 非父子组件通信:
- ref链
- bus事件总线
- 多组件通信:vuex
7、vue-router 路由 目前已3.0.7版本
- 路由基础:
-
路由实例对象
-
路由表
-
路由名称
-
路由组件
-
-
错误路由
-
路由重定向
-
路由模式 hash、history、abstract
- 路由分块
-
-
路由导出 export default
-
命名路由 name
-
路由导航
<router-link></router-link>
-
路由展示
<router-view></router-view>
-
- 动态路由、路由传参、路由接参
:to="{name: '',params: {id: xxx}, query: {xxx:xxx}}"
- 编程式导航:push、replace区别 push有历史记录,replace没用,作用像回退两层
- 路由导航守卫(路由监听)
-
全局路由守卫
-
全局前置守卫:beforeEach( to,from,next ){ }
- 全局解析守卫:beforeResolve( to,from,next ){ }
- 全局后置守卫:afterEach( to,from ){ }
-
-
路由独享守卫:beforeEnter(){ }
-
组件内守卫:
- 组件内前置守卫:beforeRouteEnter(){ }
- 组件内后置守卫:afterRouteEnter(){ }
- 组件内更新守卫:beforeRouteUpdate(){ }
- 组件内后置守卫:afterRouteEnter(){ }
- 组件内前置守卫:beforeRouteEnter(){ }
-
8、过渡和动画:组件库 animate.css
9、vue的前端渲染和后端渲染 Nuxt.js服务器端渲染,seo搜索引擎优化
10、:key的必要性 用作vdom的diff算法同级比较,
11、虚拟Dom和diff算法(Render函数、patch补丁对象)
12、前端框架级的数据请求方式
- axios:封装好的第三方库
- fetch:原生,需先数据格式化
13、vue的脚手架cli:快速构建项目环境
14、webpack:
- 基本配置
- 入口 单页面 / 多页面- 出口
- loader转换器
- css/less/sass babel css抽离
- plugin
- html产出
- 静态资源拷贝
- 扩展名省略
- 服务器配置
15、vue.config.js覆盖webpack的配置文件
> 路径别名、反向代理、语法检测关闭
16、vuex的状态管理模式
- Vue.component->Actions->Mutations->State->Vue.component
- 四个辅助工具:mapState mapGetters mapActions mapMutations