Vue
一.vue常用指令
1.1条件判断 v-if
v-if和v-show的区别:
**v-show:**使用该指令的元素会始终渲染在dom中,通过改变该元素的display值来实现是否显示在页面上,不需要操作js,开销相比较小
**v-if:**真正的条件渲染,当满足条件时才将元素添加到dom中并渲染到页面,反之销毁元素。因此性能开销大。
1.2列表遍历 v-for
使用v-for指令可以很方便地遍历数组或对象并将其数据展示到页面上
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
//迭代普通数组
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
//迭代对象数组
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
迭代对象
注意:在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
key值的作用!!
可以具体看看
[v-for中key的作用]((1条消息) Vue: v-for的键值key_明年今日7的博客-CSDN博客)
1.3 事件处理:v-on (简写@)
v-on:事件方式="函数"
修饰符
.once
- 只触发一次回调。.prevent
- 调用event.preventDefault()
。
1.4 表单输入绑定:v-model
在一些常用的表单元素使用v-model实现双向数据绑定
但v-model是语法糖,实际的原理为:
v-bind绑定一个value属性
v-on指令给当前元素绑定input事件
1.5绑定标签(任何属性)v-bind(简写 :)
绑定src和id属性
绑定class和style属性
<div id="app">
<!-- data中的属性值会替换为标签的属性值 -->
<img v-bind:src="src" />
<p v-bind:id="idValue">内容</p>
<p v-bind:class="{active: isActive,line: isLine}">内容</p>
//可以通过isAcyive和isLine的布尔值来确定该标签绑定的类
<h2 :style="{fontSize:finalSize,color:color}">{{message}}</h2>
//用v-bind:style="{}可以直接渲染css
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
src: './logo.png',
idValue: 'b'
}
});
</script>
二.生命周期
vue实例的生命周期就是在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
2.1钩子函数
**1.beforeCreate:**vue实例化之前
**2.created:**实例化完毕,此时已能读取到data里面的数据,已经vue实例的方法,此时页面还没渲染
3.beforeMount:组件挂载前,页面仍未显示,但虚拟dom已经配置
**4.mounted:**组件挂载后,此时页面已渲染到浏览器
**5.beforeUpdate:**组件更新前
**6.updated:**组件更新后
**7.beforeDestory:**销毁前
**8.destroyed:**销毁
2.2每个生命周期的具体步骤
1.
new Vue()实例化一个vue实例,然后init初始化event 和 lifecycle, 其实这个过程中分别调用 了3个初始化函数(initLifecycle(), initEvents(), initRender()),分别初始化了生命周期,事件以及定义createElement函数,初始化生命周期时,定义了一些属性,比如表示当前状态生命周期状态得isMounted ,isDestroyed ,isBeingDestroyed,表示keep-alive中组件状态的inactive,而初始化event时,实际上就是定义了 o n c e 、 once、 once、off、 e m i t 、 emit、 emit、on几个函数。而createElement函数是在初始化render时定义的(调用了initRender函数)
2.
执行beforeCreate生命周期函数
3.
beforeCreate执行完后,会开始进行数据初始化,这个过程,会定义data数据,方法以及事件,并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样,后续当数据发生变化时,才能感知到数据的变化并完成页面的渲染
4.
执行created生命周期函数,所以,当这个函数执行的时候,我们已经可以拿到data下的数据以及methods下的方法了,所以在这里,我们可以开始调用方法进行数据请求了
5.
created执行完后,我们可以看到,这里有个判断,判断当前是否有el参数(这里为什么需要判断,是因为我们后面的操作是会依赖这个el的,后面会详细说),如果有,我们再看是否有template参数。如果没有el,那么我们会等待调用$mount(el)方法(后面会详细说)。
6.
确保有了el后,继续往下走,判断当有template参数时,我们会选择去将template模板转换成render函数(其实在这前面是还有一个判断的,判断当前是否有render函数,如果有的话,则会直接去渲染当前的render函数,如果没有那么我们才开始去查找是否有template模板),如果没有template,那么我们就会直接将获取到的el(也就是我们常见的#app,#app里面可能还会有其他标签)编译成templae, 然后在将这个template转换成render函数。
7.
之后再调用beforMount, 也就是说实际从creted到beforeMount之间,最主要的工作就是将 模板或者el转换为render函数。并且我们可以看出一点,就是你不管是用el,还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件,他其实是会先编译成为template),最终他都是会被转换为render函数的。
8.
beforeMount调用后,我们是不是要开始渲染render函数了,首先我们会先生产一个虚拟dom(用于后续数据发生变化时,新老虚拟dom对比计算),进行保存,然后再开始将render渲染成为真实的dom。渲染成真实dom后,会将渲染出来的真实dom替换掉原来的vm. e l , 然 后 再 将 替 换 后 的 el,然后再将替换后的 el,然后再将替换后的el append到我们的页面内。整个初步流程就算是走完了
9.
之后再调用mounted,并将标识生命周期的一个属性isMounted 置为true。所以mounted函数内,我们是可以操作dom的,因为这个时候dom已经渲染完成了。
10.
再之后,只有当我们状态数据发生变化时,我们在触发beforeUpdate,要开始将我们变化后的数据渲染到页面上了(实际上这里是有个判断的,判断当前的isMounted是不是为ture并且isDestroyed是不是为false,也就是说,保证dom已经被挂载的情况下,且当前组件并未被销毁,才会走update流程)
11.
beforeUpdate调用之后,我们又会重新生成一个新的虚拟dom(Vnode),然后会拿这个最新的Vnode和原来的Vnode去做一个diff算,这里就涉及到一系列的计算,算出最小的更新范围,从而更新render函数中的最新数据,再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
12.
然后再执行updated,所以updated里面也可以操作dom,并拿到最新更新后的dom。不过这里我要插一句话了,mouted和updated的执行,并不会等待所有子组件都被挂载完成后再执行,所以如果你希望所有视图都更新完毕后再做些什么事情,那么你最好在mouted或者updated中加一个 n e x t T i c k ( ) , 然 后 把 要 做 的 事 情 放 在 nextTick(),然后把要做的事情放在 nextTick(),然后把要做的事情放在netTick()中去做(至于为什么,以后讲到$nextTick再说吧)
13.
再之后beforeDestroy没啥说的,实例销毁前,也就是说在这个函数内,你还是可以操作实例的
14.
之后会做一系列的销毁动作,解除各种数据引用,移除事件监听,删除组件watcher,删除子实例,删除自身self等。同时将实例属性_isDestroyed置为true
15.
销毁完成后,再执行destroyed
三.前端路由vue-router
基本使用
1.设置好html内容
<!-- router-link 最终会被渲染成a标签,to指定路由的跳转地址 -->
<router-link to="/users">用户管理</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
2.创建组件(组件可以在components下写vue文件)
// 创建组件
// 组件也可以放到单独的js文件中
var Home = {
template: '<div>这是Home内容</div>'
};
var Users = {
template: '<div>这是用户管理内容</div>'
};
3.配置路由规则(在脚手架中router文件的index.js配置)
// 配置路由规则
var router = new VueRouter({
routes: [
{ name: 'home',
path: '/',
component: Home },
{ name: 'users',
path: '/users',
component: Users }
]
});
4.设置vue的路由选择
var vm = new Vue({
el: '#app',
router
});