Vue从零到实战
一、Vue核心知识了解
1.1、初识VUE，走进VUE的世界
历史介绍
angular 09年，年份较早，一开始大家是拒绝 star:59.3k
react 2013年, 用户体验好，直接拉到一堆粉丝 star:119k
vue 2014年, 用户体验好 star:124k
Vue等框架与jQuery的区别
jQuery是基于操作dom的库
Vue框架是以数据驱动和组件化开发为核心
1.2、引包、留坑、实例化 、插值表达式{{}}
引包
确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)；
页面引入刚下载的包：
留坑
即留一个vue模板插入的地方或者是vue代码对其生效的地方
实例化 即启动Vue
启动：
new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options
options
目的地 el 对应上面留坑的坑位，可通过id名，类名，标签名来查找 。方式和jq一样
内容 template
数据 data 值为函数形式也可是对象，但是都是用函数，因为用的函数最后也是return一个对象
插值表达式：{{ }}
插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}
实例：
结果：
1.3、熟悉及使用常用指令
什么是指令
在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。
指令就是以数据去驱动DOM行为的,简化DOM操作；
如在HTML页面中这样使用，在vue中v-xxx就是vue的指令；
常用的指令及怎么使用这些指令
v-text 不可解析html标签 必须是双标签
v-html 可解析html标签
v-if 判断后，做元素的插入（append）和移除（remove）操作
v-else-if
v-else
v-show 判断是否隐藏，display:none 和display：block的切换
v-for
数组 item，index
对象 value，key ，index
代码案例：
效果：
1.4、阐述vue单双向数据流及事件绑定
vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)
单向数据绑定 内存(js)改变影响页面改变（js的改变会影响页面，但是页面的改变不会影响js）
例子：
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染
vue双向数据流 v-model 只作用于有value属性的元素
例子：
双向数据绑定 页面对于input的value改变，能影响内存中name变量
内存js改变name的值，会影响页面重新渲染最新值
单双向数据流代码
效果：
事件绑定：v-on:事件名=“表达式||函数名”， 简写： @事件名=“表达式||函数名”
事件名可以是原生也可以是自定义的
效果：
总结
v-model 双向数据绑定：
vue页面改变影响内存（js）
内存（js）改变影响vue页面；
v-bind 单向数据绑定只是内存（js）改变影响vue页面
1.5、过滤器
简介：如何给数据添加一个管道进行进一步处理再输出
过滤器就是可以对我们的数据进行添油加醋然后再显示
过滤器有全局过滤器和组件内的过滤器
全局过滤器Vue.filter('过滤器名',过滤方式fn );
组件内的过滤器 filters:{ '过滤器名',过滤方式fn }
{{ msg | 过滤器名}}
最终都是在过滤方式fn里面return产出最终你需要的数据
vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的
代码展示：
过滤器
我输入的：
我输出的：{{ instring }}
翻转输出：：{{ instring | reversal}}
结果：
上边是组件内过滤器，下边介绍全局过滤器
过滤器
我输入的：
我输出的：{{ instring }}
{{ instring | reversal('翻转输出：')}}
1.6、数据监听watch与计算属性computed
数据的单个监听以及多个监听还有深度监听的不同
watch监听单个，computed监听多个
思考业务场景：
类似淘宝，当我输入某个人名字时，我想触发某个效果
利用vue做一个简单的计算器
当watch监听的是复杂数据类型的时候需要做深度监听（写法如下）
watch:{
msg:{
handler(val){
if(val.text=='love'){
alert(val.text)
}
},
deep:true//开启深度监听
}
}
computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数
代码展示：
监听一般数据类型：
复杂数据类型监听
效果：
计算属性，做一个计算器
结果：
二、组件化开发知识介绍
2.1、组件化开发
简介：讲述页面拆分为组件进行开发和维护
创建组件的两种方式：
方式一、var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明
方式二、Vue.component('组件名',组件对象);//全局注册 等于注册加声明了
组件类型：
通用组件（例如表单、弹窗、布局类等)
业务组件（抽奖、机器分类）
页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
组件开发三步曲：声明、注册、使用
代码展示：
组件化开发
效果：
2.2、slot插槽和ref、$parent
简介：讲述如何设计可扩展组件及获取子组件和父组件实例
slot插槽(组件嵌套组件的话就使用slor)
slot就是子组件里给DOM留下的坑位
<子组件>DOM
slot是动态的DOM
ref获取子组件实例
识别：在子组件或元素上使用属性ref="xxxx"
获取：this.$refs.xxxx 获取元素
$el 是拿其DOM
$parent获取父组件实例（可在子组件直接使用this.$parent即可）
代码展示：
组件化开发
效果：
代码展示2：
组件化开发
效果：
2.3、父子组件的通信
简介：搭起专属于父子组件之间的沟通桥梁
父传子：（父亲传递数据给子）
父用子的时候通过属性传递
子要声明props:['属性名'] 来接收
子收到后就是自己的了，随便用
1、在template中 直接可以用
2、在js中使用 this.属性名 的方式用
子传父：（子传递数据给父亲）
子组件里通过$emit('自定义事件名',变量1，变量2)触发
父组件@自定义事件名=‘事件名’监听
子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件
父组件里 父传子实例展示：
父子组件的通信
效果：
子传父实例展示：
父子组件的通信
效果：
2.4、非父子组件之间的通信
简介：建立Bus总线机制实施非父子组件通讯（相当于通过中间的一个东西实现父子通信）
创建一个空实例（bus中央事件总线也可以叫中间组件）
利用$emit $on的触发和监听事件实现非父子组件的通信
Vue.prototype.$bus=new Vue()//在vue上面挂载一个$bus作为中央处理组件
this.$bus.$emit('自定义事件名','传递的数据')//触发自定义事件传递数据
this.$bus.$on('自定义事件名'，fn)//监听自定义事件获取数据
解决的方案还有vuex、provide/inject是解决同根往下派发、本地存储也可以进行非父子组件之间的通信
案例展示
非父子组件的通信
效果：
2.5、vue的生命周期
vue生命周期官方介绍
简介：详述vue所有的生命周期钩子函数的作用
需要频繁的创建和销毁组件
比如页面中部分内容显示与隐藏，但是用的是v-if
组件缓存
内置组件中
被其包裹的组件，在v-if=false的时候，不会销毁，而是停用
v-if="true" 不会创建,而是激活
避免频繁创建组件对象的性能损耗
组件的激活和停用
activated 和 deactivated
成对比较
created 和 beforeCreate
A 可以操作数据 B 数据没有初始化
mounted 和 beforeMount
A 可以操作DOM B 还未生成DOM
updated 和 beforeUpdate
A 可以获取最终数据 B 可以二次修改
destroyed 和 beforeDestroy
性能调优：频繁销毁创建的组件使用内置组件包裹
html：
vue的生命周期
js：
// created 和 beforeCreate
// A 可以操作数据 B 数据没有初始化
// mounted 和 beforeMount
// A 可以操作DOM B 还未生成DOM
// updated 和 beforeUpdate
// A 可以获取最终数据 B 可以二次修改
// destroyed 和 beforeDestroy
var Test={
template:`
我是Test组件{{ msg }}
`,
data(){
return{
msg:'HELLO VUE'
}
},
//组件创建前
beforeCreate(){
console.log('组件创建前')
console.log(this.msg)
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
},
//Dom挂载前
// beforeMount(){
// console.log('Dom挂载前')
// console.log(document.body.innerHTML)
// },
// //Dom挂载后
// mounted(){
// console.log('Dom挂载后')
// console.log(document.body.innerHTML)
// }
//基于数据更新前
beforeUpdate(){
console.log('数据更新前')
console.log(document.body.innerHTML)
},
//基于数据更新后
updated(){
console.log('数据更新后')
console.log(document.body.innerHTML)
},
//销毁前
beforeDestroy(){
console.log('销毁前')
},
//销毁后
destroyed(){
console.log('销毁后')
},
//组件停用
deactivated(){
console.log('组件停用')
},
//组件激活
activated (){
console.log('组件激活')
}
}
new Vue({
el:'#app',
components:{
Test
},
template:`
效果：
每测试一步，可以自己在浏览器的控制台查看
三、Vue核心插件之路由模块
3.1、路由的跳转原理（哈希模式）
简介：了解vue核心插件的工作原理
单页应用的路由模式有两种
哈希模式（常用的模式）：利用hashchange 事件监听 url的hash 的改变
history模式：使用此模式需要后台配合把接口都打到我们打包后的index.html上
哈希模式原理：
window.addEventListener('hashchange', function(e) {
console.log(e)
})
哈希模式核心是锚点值的改变，我们监听到锚点值改变了就去局部改变页面数据，不是做跳转。跟传统开发模式url改变后，立刻发起请求，
响应整个页面，渲染整个页面比路由的跳转用户体验更好；
代码展示：
效果：
3.2、 安装和使用路由
简介：引入路由插件，简单了解单页应用的实现
路由是以插件的形式引入到我们的vue项目中来的
vue-router是vue的核心插件：
1:下载 npm i vue-router -S
2:安装插件Vue.use(VueRouter);
3:创建路由对象 var router = new VueRouter();
4:配置路由规则 router.addRoutes([路由对象]);
路由对象{path:'锚点值',component:要(填坑)显示的组件}
5:将配置好的路由对象交给Vue
在options中传递-> key叫做 router
6:留坑(使用组件) 代码：
路由的安装和使用
3.3、路由的跳转
简介：简述路由的几种跳转方式及他们之间的异同
路由的跳转方式有：
通过标签：代码展示
路由的跳转
效果：
通过js跳转
路由的跳转
3.4、路由的传参和取参
简介：详解路由之间的沟通交流
查询参
配置（传参） :to="{name:'login',query:{id:loginid}}"
获取（取参） this.$route.query.id
路由参数
配置（传参） :to="{name:'register',params:{id:registerid} }"
配置路由的规则 { name:'detail',path:'/detail/:id'}
获取 this.$route.params.id
总结：
:to传参的属性里 params是和name配对的 query和name或path都可以
使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失
代码展示：
路由的跳转
3.5、嵌套路由
简介：了解嵌套路由的使用场景和如何实现
补充上一节知识点：js跳转路由传参和标签传参，路由相同而参数不同时页面不做刷新的问题
解决方案：代码展示：
路由的跳转
3.6、路由守卫
简介：了解路由守卫的作用和如何使用
const router = new VueRouter({ ... }
//前置的钩子函数 最后要执行next（）才会跳转
router.beforeEach((to, from, next) => {
// ...
})
//后置的钩子函数 已经跳转了不需要next
router.afterEach((to, from) => {
// ...
})
主要是简单介绍一下，路由守卫主要用于检验是否登录了，没登录就跳转到登录页面不让他在其他页面停留，但是现在这种处理主要的都用请求的全局拦截来做了。大致了解一下路由守卫即可
代码展示：
路由守卫
四、vue-cli快速搭建vue项目
4.1、
执行命令
vue init webpack
yes回车
在当前目录初始化vue项目，直接回车
项目描述，直接回车
作者信息，直接回车
选择第一个，回车
安装路由器
一些语法校验，这里选择no，不安装（语法特别多，校验不对的话就无法运行，所以选择no）
no：
no：
选择第一项，回车
需要安装几分钟，直到出现下边就是安装结束
执行如下命令来启动项目
npm run dev
启动成功：
访问上边的http://localhost:8080
4.2、配置
配置端口
安装插件：
安装完插件后界面就美观了
该文件有以下三大部分：
部署：
部署时，先运行npm run build(将项目打包到dis里)，然后将dis里的下边这俩文件放tomcat里即可
