前端知识点总结——Vue
作者：楷楷
来源：https://www.hazyzh.com/b/180211145458
一、框架和库的区别
框架（framework）：有着自己的语法特点、都有对应的各个模块。
库（library）：专注于一点。
框架的好处：
- 提到代码的质量，开发速度
- 提高代码的复用率
- 降低模块之间的耦合度（高内聚低耦合）
UI：user interface
GUI：graphical user interface
CLI：command line interface
API：application interface
思维模式的转换：从操作 DOM 的思维模式切换到以数据为主。
二、Vue 概述
1、what
是一个渐进式的构建用户界面的 js 框架
2、where
小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序
3、why
- 方便阅读的中文文档
- 容易上手 （学习曲线比较缓和）
- 体积小
- 基于组件化的开发方式
- 代码的可读性、可维护性得到了提高
4、how
工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能
搭建环境
方式 1
全局安装 vue-cli
$ npm install --global vue-cli创建一个基于 webpack 模板的新项目
$ vue init webpack my-project安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev方式 2
直接引入对应的 js 文件
三、Vue 中基础知识
1、双花括号
mustache(胡子)/interpolation（插值表达式）
语法：
<any>{{表达式}}</any>作用：将表达式执行的结果 输出当调用元素的 innerHTML 中；还可以将数据绑定到视图。
2、指令-循环指令
基本语法1：
<any v-for="tmp in array"></any>基本语法 2：
<any v-for="(value,index) in array"></any>作用：在遍历 array 这个集合时，将临时变量保存在 tmp 中，创建多个 any 标签。
3、指令-选择指令
语法：
<any v-if="表达式"></any>
<any v-else-if="表达式"></any>
<any v-else="表达式"></any>作用：根据表达式执行结果的真假，来决定是否要将当前的这个元素，挂载到 DOM 树。
4、指令-事件绑定
语法：
<any v-on:eventName="handleEvent"></any>作用：给指定的元素将 handleEvent 的方法绑定给指定 eventName 事件。
5、指令-属性绑定
基本语法：
<any v-bind:myProp="表达式"></any>补充，支持简写：
<any :myProp="表达式"></any>作用：将表达式执行的结果绑定到当前元素的 myProp 属性。
<img v-bind:src="'img/'+myImg" alt="">动态样式绑定：
<p :style="{backgroundColor:myBGColor}">动态样式绑定</p>动态样式类绑定：
<h1 :class="{myRed:false}">动态样式类的绑定</h1>6、指令-双向数据绑定
方向1：数据绑定到视图
方向2：将视图中（表单元素）用户操作的结果绑定到数据
基本语法：
<表单元素 v-model="变量"></表单元素>四、组件化
组件：组件就是可被反复使用的，带有特定功能的视图。
所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。
组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序。
1、组件的创建
全局组件：
Vue.component('my-com',{
template:`
<h2>it is a header</h2>
`
})局部组件：
new Vue({
components:{
'my-footer':{
template:''
}
}
})2、组件使用
作为普通的标签去使用
<my-com></my-com>3、注意事项
- 组件的 id 和使用方式 遵循烤串式命名方式：a-b-c
- 如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
- 全局组件可以用在 id 为 example 的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用
五、自定义指令
创建：
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化，都会调用
},
unbind:function(){
//解绑
}
})使用：
<any v-change="count"></any>六、过滤器
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。
过滤器的本质 就是一个带有参数带有返回值的方法。
Vue1.* 支持内置的过滤器，但是 Vue2.* 就不再内置过滤器，但是支持自定义过滤器。
1、过滤器的创建和使用
1. 创建
Vue.filter(
'myFilter',
function(myInput){
//myInput是在调用过滤器时，管道前表达式执行的结果
//针对myInput，按照业务需求做处理
//返回
return '处理后的结果'
})2. 使用
<any>{{expression | myFilter}}</any>2、如何在调用过滤器时，完成参数的发送和接受
1. 发送
<any>{{expression | myFilter(参数1，参数2)}}</any>2. 接受
Vue.filter('myFilter',function(myInput，参数1，参数2){
return '处理后的结果'
})七、复合组件
知识回顾：
Vue.component('my-header',{
template:`<div></div>`
});
<my-header></my-header>复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件。
注意事项：
1. 组件要渲染的内容 取决于在定义组件时 template
<my-list>
<my-item></my-item>
</my-list>效果是出不来的。
2. 允许在一个组件中，直接来调用另外一个组件。
八、生命周期
四个阶段：
- create 准备工作 （数据的初始化。。。）
- mount 挂载前后针对元素进行操作
- update 数据发生变化，
- destroy 清理工作 (关闭定时器、集合清空..)
- beforeCreate/created
- beforeMount/mounted
- beforeUpdate/updated
- beforeDestroy/destroyed
九、常用属性
1、watch
1. 表单元素的双向数据绑定
v-model="myValue"2. 监听
watch:{
myValue:function(newValue,oldValue){
}
}2、computed
计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。
1. 指定计算属性
computed:{
myHandle:function(){
return 数据
}
}2.调用
<any>{{myHandle}}</any>十、组件间通信
1、父与子通信 （props down）
1.发送
<son myName='zhangsan'></son>2.接受到 son 组件：
Vue.component('son',{
props:['myName'],
template:`
<p>{{myName}}</p>
`
})2、子与父通信 (events up)
1. 绑定
methods:{
handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>2. 触发
子组件内部：
this.$emit(‘customEvent’,100);3、ref(reference 引用/参考 外号)
帮助在父组件中 得到子组件中的数据、方法。
1. 指定 ref 属性
<son ref="mySon"></son>2. 根据 ref 得到子组件实例
this.$refs.mySon4、$parent
this.$parent 得到父组件的实例
5、兄弟组件通信
1.
var bus = new Vue();2. 接收方
bus.$on('eventName',function(msg){})3. 发送方
bus.$emit('eventName',123);十一、补充组件创建的方式
1、直接在 template 属性中指定模板内容
1. 全局组件
Vue.component2. 局部组件
{
components:{
'my-footer'：{template:``}
}
}2、.vue 结尾的文件
<template></template>
<script></script>
<style></style>3、单独指定一个模板内容
<script
id='myContent'
type='text/x-template'>
</script>
Vue.component('',{
template:'#myContent'
})十二、路由模块
路由模块的本质就是建立起 url 和页面之间的映射关系。
1、SPA 的基本概念和工作原理
SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容，比如 Gmail、移动的 webApp。
工作原理：
- 解析地址栏：完整的页面地址、路由地址
- 根据路由地址从路由词典中找到真正的要加载的页面
- 发起 ajax 请求：请求要加载的页面
- 像指定的容器中插入加载来的页面
2、路由模块的基本使用
专业术语：
- router 路由器
- route 路由
- routes 路由数组（路由词典）
1.引入 vue.js vue-router.js
2. 指定一个容器
<router-view></router-view>3. 创建业务所需要用到的组件类
var MyLogin = Vue.component()4. 配置路由词典
const myRoutes = [
{path:'',component:MyLogin},
{path:'/login',component:MyLogin}
];
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter
})5. 测试
修改地址栏中的路由地址，测试看加载的组件是否正确
注意事项：
1. 先引入 vue，再引入插件
2. 一定要指定 router-view
3. route 路由 {path:'',component:}
routes：路由数组 []
router：路由器，按照指定的路由规则去访问对应的组件 new VueRouter
3、使用路由模块来实现页面跳转的方式
方式 1：
直接修改地址栏
方式 2：
this.$router.push(‘路由地址’);方式 3：
<router-link
to="路由地址"></router-link>4、完成参数的传递
在页面之间跳转的时候，在有些场景下，需要同时指定参数
1. 明确发送方和接收方
list --20--> detail2. 配置接收方的路由地址
/detail --》 /detail/:index
this.$route.params.index3. 发送
routerLink to="/detail/20"
this.$router.push('/detail/20')5、路由嵌套
在一个路由中，path 对应一个 component，如果这个 component 需要根据
不同的 url 再加载其他的 component，称之为路由的嵌套。
举例：比如 A 组件现在需要根据不同的 url，加载 B 组件或者 C 组件
1. 给 A 组件指定一个容器
<router-view></router-view>2. 配置路由词典
{
path:'/a',
component:A,
children:[
{path:'/b',component:B}
]
}需求：现在有两个组件，分别是 login/mail，建立 SPA。
在此基础上，希望 mail 组件嵌套 inbox/outbox/draft
补充：在设置子路由，路由匹配规则依然是适用的，只不过路由地址为空和异常，要携带父组件的路由地址
/mail /mail/draft十三、搭建基于CLI开发环境的方式
1. 指定一个文件夹：C:\xampp\htdocs\framework\vue\project
2. 将 tpls.zip 拷贝到 project 中
3. 右键单击压缩包，解压缩到当前文件夹
4. 进入到 tpls
5. 同时按下 shift 和鼠标右键，选择在此位置打开命令行串口
6. 执行 npm install
7. 执行 npm start
站在巨人的肩膀上，我们可以看得更远，约翰 · 雷西格发布了 jQuery 的第一个版本，从此让我们进入了 jQuery 时代；尤雨溪创造了 Vue，使我们正式迈入 Vue 的时代。
我们选择了 IT 行业，大家都希望能够在自己所处的行业以及所处的领域中有所建树。而如果要实现这个目标，在成长的过程中，不可避免的会踩坑、走弯路，那有没有办法可以少踩一些坑、少走一些弯路呢？万幸，答案是有的。
我与这些领军者相去甚远，但依然希望尽自己的一些力量来帮助到一些人，让大家可以少走一些弯路、少踩一些坑。