目录
1.Vue指令
1.常用内置指令
2.自定义指令
3.原型与实例
- 构造函数有个 prototype 属性指向原型对象
- 实例化的对象有一个 [[prototype]] 属性指向原型对象
- 原型对象有一个 constructor 属性指向构造函数。
- 实例对象通过构造函数进行创建，原型对象是有了构造函数就会产生的。
- 原型对象中的方法可以被实例对象所共享
- 实例对象中没有方法，但是可以调用，是因为实例对象的原型__proto__指向了构造函数的原型对象（桥梁），所以可以调用。
- 未实例化Vue时，Vue.调用函数对象的方法
- Vue.$调用实例对象的方法
- 原型实例构造：参考博客
2.vue-cli项目
1.组件化编码
-
脚手架的本质是库
-
export 暴露
-
import导入
-
Vue.use()声明使用
2.参数传递及重定向
- 只能有一个根节点
- 通过设置路由中的props属性解耦
- 404页面，
- 测试数据：mock文件夹
3.路由钩子与异步请求
-
路由钩子函数
-
beforeRouteEnter:(to, from, next) =>{ next() } //进入路由前执行 beforeRouteLeave:(to, from, next) =>{ next() } //离开路由前执行 -
链式编程
-
axios.get('data.json').then(response=>(---))
4.babelrc
- rc->runtime control
- es6->es5
5.组件
- 局部功能界面
- 包含所有本实现功能界面所需资源
6.关于冒泡
- onmouseenter&onmouseleave事件，鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡
- onmouseover&onmouseout事件，鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有） ，支持冒泡
7.持久化、存储数据
- 使用localStorage，将数据存储在本地文件，存储形式为txt文本
- 使用深度监视，实时存储在本地 deep: true//深度监视，handler: function (value){触发函数}
- 在存储和取值的时候要注意转化和解析json字符串格式
8.组件间通信
- props
- v-on绑定自定义事件:$on(eventName, function)监听事件、$emit(eventName, optionalPayload)触发事件，用于父子之间传递
- 消息订阅与发布(pubsub-js).
- slot(插槽):由于父组件向子组件传递
标签数据 - vuex
9.axios
- npm install axios --save
- 在哪使用在哪引入
- 测试接口：https://api.github.com/search/repositories?q=vue&sort=stars
10.案例：搜索
- 兄弟组件间传递数据使用pubsub订阅发布消息
- 使用axios异步请求
- 使用模板字符串携带参数
- 测试接口：https://api.github.com/search/users?q=aa
- 使用.map()解析返回值
11.vue UI 组件库
-
安装mint-ui：npm i mint-ui -S
-
借助 babel-plugin-component，我们可以按需导入组件，以达到减小项目体积的目的
-
安装babel-plugin-component：npm install babel-plugin-component -D
-
vue2.0+按需引入时修改babel.config.js的配置，plugins里面不能再使用数组作为参数
-
手机端适配的meta代码：
-
手机端适配的js代码：
<script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function () { FastClick.attach(document.body); }, false); } if (!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>'); } </script>
1.关于命令参数
-D == --save-dev 写入devDependencies（开发环境依赖模块）只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。
-S == --save 写入dependencies（生产环境依赖模块）
2.关于版本
- 对vue进行降版本，同时需要注意vue-template-compiler的版本，必须保持两者版本一致
- 设置一下vue.config.js中的配置
runtimeCompiler: true
12.vue 路由介绍
1.基本路由
- 单页面应用（SPA）：一个真实页面
- 点击路由链接，不向后台发送请求
- 路由器管理路由
- 路由是映射关系 K - V
- path - {前台路由：组件，后台路由：处理请求的回调函数}
- <router-link/>:用来生成路由链接
- <router-view/>:用来显示当前路由组件界面
- 实际项目中分为两种组件 views：路由组件、components：非路由组件
- 单独创建路由器模块：router/index.js
- 默认路由组件：{ path: '/', redirect: '/XXX' }
2.嵌套路由
1.关于数据结构的设计和选择
- 数组/对象/普通数据
2.流程
- 定义组件
- 注册路由
- 配置嵌套路由：路由属性children:[]
3.注意事项
- path最左侧的/永远代表根路径
- 嵌套路由path两种写法：全路径或省略'/'
- 嵌套路由默认显示：子路由添加路由{path: "", redirect: '全路径'}
- 排错方法：先看是否报错 => 查看数据是否异常 => 查看代码
3.缓存路由组件
-
一个路由组件被切换时死亡，切换回来时重新创建
-
<keep-alive> <router-view></router-view> </keep-alive> -
被缓存的是
组件对象 -
实际工作中根据数据的实时性要求高/低来使用
4.向路由传递参数
1.vue的两种通过路由路径传参方式
- query传参方式
this.$router.push({
path: "/home",
query: {code:"123"}
})
- param传参方式
this.$router.puth({
name: "/home",
param: {code: "123"}
})
- 在配置路由时使用
:xxx占位符，传参方式为param - 数据中的
$route代表当前路由，取得当前路由param的值$route.params - 当仅改变路由参数时，通过监视
$route实时做出响应
2.通过<router-view></router-view>传递数据
5.编程式路由导航
1.页面跳转的两种方式
<a/>标签链接跳转- js代码实现跳转 =>编程式
2.路由实现的两种方式
- /#/：hash，h5之前的方法，浏览器使用location.hash和hashchange事件来实现对路径的保存、监视
- istory api，使用html5的history api实现，主要就是popState事件等
3.使用js代码实现页面跳转的几种方式
window.location = urlthis.$router.push: 会向history栈添加一个记录，点击后退会返回到上一个页面this.$router.replace: 用新路由替换当前路由，不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的
4.关于数组
- 栈：先进后出
- 队列：先进先出
5.关于组件对象
- this => $route：代表当前路由组件，有一些数据
- this => $router：代表路由器，功能的对象，有操作路由的一些方法
6.js实现回退
- $router.back：请求（返回）上一个记录路由
- $router.go(-1)：请求（返回）上一个记录路由
13.Vuex
1.vuex是什么
- vuex是vue的一个插件
- 对vue应用中多个组件的共享状态进行集中式的管理（读/写）
2.什么是状态自管理应用
1.state：驱动应用的数据源
2.view：以声明方式将state映射到视图
3.actions：响应在view上的用户输入导致的状态变化（包含n个更新状态的方法）
3.多组件共享状态的问题
- 多个视图依赖于统一状态
- 来自不同视图的行为需要变更同一状态
- vuex就是用来解决这个问题的
4.vuex的运行模式
- 在vuex中
actions不会直接更新state - 由
mutations来直接更新state状态数据
5.store对象
- 所有用vuex管理的组件中都多了一个属性
$store，它就是一个store对象 - 属性: {state: 注册的state对象, getters: 注册的getters对象}
- 方法: dispatch(actionName, data): 分发调用action
6.store.js: vuex的核心管理对象模块
export default new Vuex.Store({
state,//vuex管理的状态对象，它应该是唯一的
mutations,//包含多个更新state的方法（回调函数）的对象，commit()调用
actions,//包含多个对应事件回调函数的对象，$store.dispatch()调用
getters//包含多个getter计算属性函数的对象
})
7.vuex的辅助函数
- mapState：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用
mapState辅助函数帮助我们生成计算属性 ...对象展开符可以优化代码
//之前的computed
computed:{
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
........
}
//引入mapState辅助函数之后
computed:{
//原来的继续保留
fn1(){ return ...},
fn2(){ return ...},
fn3(){ return ...}
......
//再维护vuex
...mapState({ //这里的...不是省略号了,是对象扩展符
count:'count'
})
8.main.js中的render配置
-
components: {App},//将App映射为标签 template: '<App/>',//使用App标签 -
render: h => h(App),//渲染函数，传入参数为函数类型(createElement()根据组件创建元素标签)，返回传入函数的返回值<App/> -
render可以代替components与template配置
3.vue源码分析
1.说明
-
分析vue作为一个MVVM框架的基本实现原理
-
数据代理
-
模板解析
-
数据绑定
-
2.知识点
1.理解源码所需的一些知识点
-
将伪数组转化为真数组：伪数组不是数组，本质上是一个对象，特性是有length属性、有下标属性，ES6语法中使用
Array.from(lis)转化，ES5语法中使用Array.prototype.slice.call(lis)获取数组 -
.call让一个函数成为指定对象的方法并进行调用，函数中的this在定义时无法确定，只有在执行时才能确定 -
最大的节点是document/文档 => 整个html文件，其次是Element/元素，再其次是Attr/属性，再其次是Text/文本
-
node.nodeType：得到节点类型 -
Object.defineProperties(obj, propertyName, {})：给对象添加属性(指定描述符) -
属性描述符
- 数据描述符
- 访问描述符号
-
vue不支持IE8的根本原因，是因为vue使用了
Object.defineProperties(obj, propertyName, {})作为核心语法 -
obj.hasOwnProperty(prop)：判断prop是否是obj自身的属性 -
DocumentFragment接口是内存中保存n个element的容器对象（不与界面关联）， 如果更新framgment中的某个element，界面不变。文档碎片（高效批量更新多个节点） -
一个节点只能有一个父亲，当一个节点被添加为其他节点的子节点，它将从原来的父节点移除
-
通过DOM的方式取到的多个节点/元素都是伪数组
-
当向一个节点添加文档片段时，添加的是文档片段的子节点群，自身不会被添加进去
2.关于debug
- 调试中的重点：如何打断点
- 断点只能打在一条语句的开头
- 调用栈：函数依次调用的堆栈的保存记录
3.源码分析——数据代理
- 数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）
- vue数据代理：通过vm对象来代理data对象中所有属性的操作
- 最终通过
Object.defineProperty(obj, propertyName, {})为vm对象添加属性（包括get、set方法），来实现数据代理
4.源码分析——模板解析
1.表达式解析
{{name}}如何显示对应的数据？这就是表达式解析需要研究的内容- 最重要三步
- 将页面中
el所有的子节点转移到framgment中 - 在内存中进行编译，遍历
framgment中的子节点- 对存在子节点的节点递归调用编译，编译所有层次的子节点
- 当遍历到元素节点时，编译该节点所有指令属性
- 当遍历到文本节点并且符合正则表达式
/{{(.*)}}/时，取得子匹配的值，调用编译bind指令的函数并传入参数，通过参数调用text更新函数给节点指定特定的属性值，特定的属性值是子匹配的值用.split('.')分割后遍历，取出的vm对象中的data中对应的数据
- 将
framgment添加为el的子节点
- 将页面中
2.事件指令解析
- p54待补全
5.源码分析——数据绑定
- 待补全
4.我的核心总结
- vue组件化编码思想
- 常用vue指令和配置
- vue-router的配置及使用方法
- vue中数据的流向
- vuex的配置和使用
- vuex的工作流程
- 一些vue特性的底层实现思路
- 项目经验