Vue2.0
简介
- 一套用于构建用户界面的渐进式JavaScript框架
- 尤雨溪
特点
- 1、采用组件化模式,提高代码复用率、且让代码更好维护
- 2、声明式编码,让编码人员无需直接操作DOM,提高开发效率
初始vue
- 使用Vue,先new一个vue实例,且要传入一个配置对象
- vue实例和容器是一一对应的
- 真实开发中只有一个vue实例,并且会配合着组件一起使用
{{xxx}}
中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性- 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
vue模板语法
- 插值语法:
- 功能:用于解析标签体内容
- 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
- 指令语法:
- 功能:用于解析标签(包括:标签属性、标签提内容、绑定事件……)
vue数据绑定的方式
- 单向数据绑定(
v-bind
):数据只能从data流向页面 - 双向数据绑定(
v-model
):数据不仅可以从data流向页面,还能从页面流向data
data与el的2种写法
- el的2种写法:
- new Vue时配置el属性
- 线创建Vue实例,随后再通过
vm.$mount("#app")
指定el的值
- data的2种写法
- 对象式
- 函数式
- 由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
MVVM模型
- M:模型(model):对应data中的数据
- V:视图(View):模板
- VM:视图模型(ViewModel):Vue对象实例
- data中所有的属性,最后都出现在了vm身上
- vm身上所有的属性Vue模型上所有属性,在Vue模板中都可以直接使用
Vue中常用的按键别名:
- 1、Vue中常用的按键别名
- 回车=>enter
- 删除=>delete(捕获删除和退格键)
- 退出=>esc
- 空格=>space
- 换行=>tab
- 2、Vue未提供别名的按键,可以使用按键原始的key值去绑定,但要注意转为kebab-case(短横线命名)
- 3、系统修饰符(用法特殊):ctrl、alt、shift、meta
- (1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
- (2)配合keydown使用,正常触发事件
- 4、也可以使用keyCode去指定具体的按键(不推荐)
- 5、Vue.config.keyCode.自定义键名,可以去指定按键别名
Vue中key的作用
1、虚拟DOM中key的作用:
- key是虚拟DOM对象的标识,当状态中的数据发生改变时,Vue会根据【新数据】生成的【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下
2、对比规则:
- (1)旧的虚拟DOM中找到了新虚拟DOM相同的key:
- ①若虚拟DOM中的内容没变,直接使用之前的真实DOM
- ②若虚拟DOM中的内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
- (2)旧虚拟DOM中未找到与新DOM相同的key
- ① 创建新的真实DOM,随后渲染到页面
3、用index作为key可能会引发的问题:
- 若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM的更新,页面效果没影响,但是效率低
- 如果结构中还包含输入类的DOM,会产生错误DOM更新,页面有问题
4、开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key,比如id、身份证号等
- 如果仅用于渲染列表用于展示,使用index作为key是没有问题的
Vue中的数据代理
- 通过vm对象来代理data对象中属性的操作
- 好处:更加方便操作data中的数据
- 基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个vm上的属性,都指定一个getter/setter,再getter/setter内部去操作data中对应的属性
计算属性computed
- 定义:要用的属性不存在,要通过已有属性计算得来
- 原理:底层借助了过Object.defineProperty()方法提供的getter、setter
- get函数什么时候执行:初次读取时执行一次;当依赖的数据发生改变时会被再次调用
- 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
- 备注:
- 计算属性最终会出现在vm上,直接读取使用即可
- 如果计算属性要被修改,那必须写set函数去相应修改,且set中要引起计算时依赖的数据发生改变。
computed和watch的区别:
- computed能完成的功能,watch都可以完成
- watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
- 两个重要的小原则:
1.所被vue管理的函数,最后写成普通函数,这样this的指向才是vm或组件实例对象
2.所有不被Vue管理的函数(定时器的回调函数、Ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象。
- 深度监视:
- (1)vue中的watch默认不监测对象内部值的改变(一层)
- (2)配置deep:true可以监测对象内部值改变(多层)
- 备注;
- (1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构,决定是否采用深度监测
Vue数据监测原理:
- 1、Vue会监测data中所有层次的数据
- 2、 如何监测对象中的数据:
- 通过setter实现监测,且要在new Vue时就传入要监测的数据
- (1)对象中后追加的属性,Vue默认不做响应式处理
- (2)如需给后添加的属性做响应式,请使用如下API
- Vue.set(target,propertyName/index,value)或
- vm.$set(target,propertyName/index,value)
- 通过setter实现监测,且要在new Vue时就传入要监测的数据
- 3、如何监测数组中的数据
- 通过包裹数组更新元素的方法实现,本质就是做了两件事:
- (1)调用原生对应的方法对数组进行更新
- (2)重新解析模板,进而更新页面
- 通过包裹数组更新元素的方法实现,本质就是做了两件事:
- 4、在Vue修改数组中某一个元素一定要使用如下方法:
- 使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
- Vue.set()或vm.$set()
- 特别注意:Vue.set()和vm.$set()不能给vm或vm根数据对象 添加属性!!!!
过滤器
- 定义:对要显示的数据进行特定格式后再显示(适用于一些简单的逻辑处理)
- 语法:
- 1.注册过滤器:Vue.flter(name,callback)或new Vue{filters:{}}
- 2.使用过滤器:{{xxx | 过滤器名}} 或v-bind:属性 =“xxx | 过滤器名”
- 备注:
- 过滤器也可以接收额外参数,多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
一些指令
v-html
指令:- 作用:向指定节点中渲染包含html结构的内容
- 与插值语法的区别:
v-html
会替换掉节点中所有的内容,{{xxx}}则不会v-html
可以识别html结构
- 严重注意:
v-html
有安全性问题- 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击
- 一定要在可信的内容上使用
v-html
,永不要在用户提交的内容上
v-cloak
指令(没有值):- 本质是一个特殊属性,Vue实例创建完毕兵接管容器后,会删掉
v-cloak
属性 - 使用css配合
v-cloak
可以解决网速慢时页面展示出{{xxx}}的问题
- 本质是一个特殊属性,Vue实例创建完毕兵接管容器后,会删掉
v-once指令
:v-once
所在节点在初次动态渲染后,就视为静态内容了- 以后数据的改变不会引起
v-once
所在结构的更新,可以用于优化性能
v-pre
指令:- 跳过其他所在节点的编译过程
- 可利用它的跳过,没有使用指令语法、没有使用插值语法的节点,会加快编译
自定义指令
一、 定义语法:
- (1)局部指令:
new Vue({
directives:{指令名,配置对象}
})
或
new Vue({
directives:{指令名,回调函数}
})
- (2)全局指令:
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,)
二、配置对象中常用的3个回调
- (1)bind:指令与元素成功绑定时调用
- (2)inserted:指令所在元素被插入页面时调用
- (3)update:指令所在模板结构被重新解析时调用
三、备注
- 指令定义时不加v-,使用时要加v-
- 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名
生命周期
- 又名:生命周期回调函数、生命周期函数、生命周期钩子
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可以更改,但函数的具体内容是自己根据需求进行编写的
- 生命周期函数中的this指向vm或组件实例对象
- 常用的生命周期钩子:
mounted
:发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)beforeDestroy
:清除定时器、解绑自定义事件、取消订阅消息等(收尾工作)
- 关于销毁Vue实例
- 1、销毁后借助Vue开发者工具看不到任何信息
- 2、销毁后自定义事件会失效,但原生DOM事件依然有效
- 3、一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了
模块
- 理解:向外提供特定功能的js程序,一般就是一个js文件
- 为什么:js文件很多和复杂
- 作用:复用js、简化js、提高js运行效率
模块化
- 当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用
组件
- 理解:用来实现局部(特定)功能效果的代码集合
- 为什么:一个界面的功能和复杂
- 作用:复用编码,简化项目编码,提高运行效率
组件化
- 当应用中的功能都是以多组件的方式来编写的,那这个应用就是一个组件化的应用
VueComponent
- 1、我们自定义的组件通过
Vue.extend()
生成的 - 2、Vue解析时会帮我们创建自定义组件的实例对象
- 3、每次调用
Vue.extend()
返回的都是一个全新的VueComponent
- 4、关于this的指向:
- 组件配置中:
- data函数、methods中的函数、 watch中的函数 他们的this均是
【VueComponent实例对象】
- data函数、methods中的函数、 watch中的函数 他们的this均是
- new Vue(options)配置中
- data函数、methods中的函数、 watch中的函数 他们的this均是
【Vue实例对象】
- data函数、methods中的函数、 watch中的函数 他们的this均是
- 组件配置中:
- 5、
VueComponent
的实例对象、简称vc(组件实例对象)、Vue的实例对象简称vm - 6、一个重要的内置关系:
VueComponent.prototype.__proto__ === Vue.prototype
- 让组件实例对象vc可以访问到Vue原型上的属性、方法
- 7、 关于脚手架
ref
属性
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
- 打标识:
<h1 rref = "xxx">·····</h1>
或<School ref = "xxx"></School>
- 获取:
this.$ref.xxx
- 打标识:
配置项props
- 功能:让组件接收外部传过来的数据
- (1)传递数据:
<School name="大学" :age="99"></School>
- (2)接收数据:
- 第一种方式(只接收):
props:["name","age"]
- 第二种方式(限制类型):
props: { name: String, age:Number }
- 第三种方式(限制类型、限制必要性,指定默认值)
- 第一种方式(只接收):
props: {
name: {
type: String,
requied: true,
},
age: {
type: Number,
requied: true,
default:18
}
}
- 备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据
mixin(混入)
- 功能:可以把多个组件共用的配置提取成一个混入对象
- 使用方式:
- 第一步定义混入:
{
data(){·······},
methods:{·····}
······
}
- 第二步使用混入
Vue.mixin(xxx)\mixin:['xxx']
插件
- 功能:用于增强Vue
- 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的额参数是插件使用者传递的数据
- 定义插件:
对象.install = function (Vue,options){
//1.添加全局过滤器
Vue.filter(····)
//2、添加全局指令
Vue.directives(····)
//3、配置全局混入
Vue.mixin(····)
//4、添加全局实例方法
Vue.prototype.$myMethod = function () {····}
Vue.prototype.$myProtottype = xxxx
}
使用插件:Vue.use()
scoped
样式
- 作用:让样式在局部生效,防止冲突
- 写法:
<stype scoped>
总结TodoList案例
- 1、组件化编码流程:
- (1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
- (2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
- 一个组件在用:放在组件自身即可
- 一些组件在用:放在他们共同的父组件上(状态提升)
- (3)实现交互:从绑定事件开始
- 2、props适用于:
- 父组件==>子组件 通信
- 子组件==>父组件 通信(要求父组件先给子组件一个函数)
- 3、使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的
- 4、props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做
组件的自定义事件
- 1.一种组件间通信的方式,适用于:子组件==>父组件
- 2.使用场景:A是父组件,B是子组件,B想给A组件传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)
- 3.绑定自定义事件:
- 第一种方式,在父组件中 :
<School @getData = "getData"/>
或<School v-on:getData = "getData"/>
- 第二种方式,在父组件中:
- 第一种方式,在父组件中 :
<School ref = "demo" />
········
mounted(){
this.$refs.demo.$on('getData',this.test)
}
- 若只想让自定义事件只能被触发一次,可以使用once修饰符,或$once方法
- 4.触发自定义事件:
this.$emit('getData',数据)
- 5.解绑自定义事件:
this.$off("getData")
- 6.组件上也可以绑定原生DOM事件,需要使用
native
修饰符 - 7.注意:通过
thsi.$refs.xxx.$on("getData",回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this的指向会出问题
全局事件总线
- 1.一种组件间通信的方式,适用于任意组件间通信
- 2.安装全局事件总线:
new Vue({
········
beforeCreated(){
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
}
········
})
- 3.使用事件总线:
- (1)接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
- (2)提供数据:
this.$bus.$emit('xxx',数据)
methods:{
demo(data){········}
}
·········
mounted(){
this.$bus.$on('xxxx',this.demo)
}
- 4.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM更新结束后执行其指定的回调
- 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在
nextTick
所指定的回调函数中执行
解决跨域
插槽
Vuex
- 概念:在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读、写),也是一种组件间通信的方式,且适用于任意组件间通信
- 何时使用:多个组件需要共享数据时
- 搭建vuex环境
(1)创建文件:src/store/index.js
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)
// 准备actions--用于响应组件中的动作
const actions = { },
// 准备mutations--用于操作数据(state)
const mutations = { }
// 准备state--用于存储数据
const state = { }
const getters = { }
// 创建并导出store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
(2)组件中读取vuex中的数据:$store.state.xxx
(3)组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)
或$store.commit('mutation中的方法名',数据)
- 备注:若没有网络请求或其他业务逻辑,组件中页可以越过actions,即不写
dispatch
,直接编写commit
四个map
方法的使用
1.mapState
方法:用于帮助我们映射state
中的数据为计算属性
computed:{
//借助mapState生成计算属性,sum,school,subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性,sum,school,subject(数组写法)
...mapState(['sum','school','subject'])
}
2.mapGetters
方法:用于帮助我们映射getters
中的数据为计算属性
computed:{
//借助mapGetters生成计算属性bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性bigSum(数组写法)
...mapGetters(['bigSum'])
}
3. mapActions
方法:用于帮助我们生成与actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成:oddN,waitN(对象形式)
...mapActions({oddN:'jiaOdd',waitN:'jiaWait'})
//靠mapActions生成:jiaOdd,jiaWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
4. mapMutations
方法:用于帮助我们生成与mutations
对话的方法,即:包含$store.commit(xxx)
的函数
methods:{
//借助mapMutations生成,increment、decrement(对象写法)
...mapMutations({increment:'JIA',decrement:'JIAN'})
//借助mapMutations生成,increment、decrement(数组写法)
...mapMutations(['JIA','JIAN'])
}
备注:mapActions与mapMutations使用时,若需要传递参数,在模板中绑定事件时传递好参数,否则参数是事件对象
模块化+命名空间
路由vue-router
** vue2中 ,要用 vue-router的3版本 **
** vue3中 ,要用 vue-router的4版本 **
vue-router
,Vue的一个插件库,专门用来实现SPA(single page web application)
应用SPA(single page web application)
应用:- 单页Web应用
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
- 数据需要通过ajax请求获取
什么是路由?
- 一个路由就是一组映射关系(key-value)
- key为路径,value可能是function或component
路由的分类:
- 1.后端路由:
- (1)理解:value是function,用于处理客户端提交的请求
- (2)工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
- 2.前端路由:
- (1)理解:value是component,用于展示页面内容
- (2)工作过程:当浏览器的路径改变时,对应的组件就会显示
- 1.后端路由:
几个注意点
- 1.路由组件通常存放在
pages
文件夹,一般组件通常存放在components
文件夹 - 2.通过切换,隐藏了的路由组件,默认是被销毁掉的,需要的时候再去挂载
- 3.每个组件都有自己的
$route
属性,里面存储着自己的路由信息 - 4.整个应用只有一个router,可以通过组件的
$router
属性获取到
- 1.路由组件通常存放在
多级路由
- 配置路由规则,使用
children
配置项 - 跳转(要写完整的路径)
<router-link to='/home/news'> News </router-link>
- 配置路由规则,使用
<router-link>的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:
push
和replace
,push
是追加历史记录,replace
是替换当前记录,路由跳转时候默认为push
- 如何开启
replace
模式:<router-link replace .......>News</router-link>
编程式路由导航
- 作用:不借助
<router-link>
实现路由跳转,让路由跳转更加灵活 - 具体编码:
- 作用:不借助
$router的两个API
this.$router.push({
name:'xinwen',
params:{
id:'001',
title:'xxxx'
}
})
this.$router.replace({
name:'xinwen',
params:{
id:'001',
title:'xxxx'
}
})
this.$router.back()//后退
this.$router.forward()//前进
this.$router.go()//正数可前进负数后退
缓存路由组件
- 作用:让不展示的路由组件保持挂载,不被销毁
- 具体编码:
<keep-alive include='News'>
//include写的是组件名
<router-view></router-view>
</keep-alive>
路由守卫
- 作用:对路由进行权限控制
- 分类:全局守卫、独享守卫、组件内守卫
全局守卫
:
独享守卫
组件内守卫
:
路由器的两种工作模式
- 1.对于一个url来说,什么是hash值?——#及其后面的内容就是hash值
- 2.hash值不会包含在HTTP请求中,即:hash值不会带给服务器
- 3.
hash
模式:- (1)地址中永远呆着#号,不美观
- (2)若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
- (3)兼容性较好
- 4.
history
模式:- (1)地址干净、美观
- (2)兼容性和hash模式相比略差
- (3)应用部署上线时需要后端人员支持,解决刷新页面服务端404问题