Vue学习（一）Vue.js的基本使用
Vue.js的的基本使用：模板语法、计算属性和监听、class、Style绑定、条件渲染、列表渲染......
·
文章目录
一、Vue.js 简介
一位华裔前Google工程师(尤雨溪)开发的前端js库，用于动态构建用户界面
特点：
- 遵循
MVVM模式 - 编码简洁，体积小，运行效率高，移动/
PC端开发 - 它本身只关注
UI，可以轻松引入VUE插件和其他第三方库开发项目
MVVM模型：
- M：模型(
Model)：data中的数据 - V：模型(
View)：模板代码 - VM：视图模型(
ViewModel)：Vue实例
与其他框架的关联：
- 借鉴
angular的模板和数据绑定技术 - 借鉴
react的组件化和虚拟DOM技术
vue包含一系列的扩展插件(库)
| vue-cli | vue脚手架 |
|---|---|
| vue-resource(axios) | ajax请求 |
| vue-router | 路由 |
| vuex | 状态管理 |
| vue-lazyload | 图片懒加载 |
| vue-scroller | 页面滑动相关 |
| mint-ui | 基于vue的组件库(移动端) |
| element-ui | 基于vue的组件库(PC端) |
二、Vue.js 的使用
2.1 Vue.js 入门
<div id="root">
<h1>hello {{name}}</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name: 'vue'
}
})
</script>
效果：
2.2 模板语法
模板的理解：动态的html页面
① 插值语法
- 功能：用于解析标签体内容
- 写法：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
② 指令语法
- 功能：用于解析标签（包括标签属性、标签体内容、绑定时间）
- 举例：
v-bind:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性
Vue模板示例代码如下：
<div id="root">
<h1>1、插值语法</h1>
<h3>hello,{{msg}}</h3>
<hr />
<h1>2、指令语法</h1>
<a v-bind:href="baidu.url">跳转百度</a>
<!-- 简写 -->
<a :href="baidu.url">跳转百度</a>
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
"msg": "vue",
"baidu": {
"name": "baidu",
"url": "http://www.baidu.com"
}
}
})
</script>
效果：
2.3 数据绑定
Vue中有 2 种数据绑定的方式：
- 单向绑定(
v-bind)：数据只能从data流向页面 - 双向绑定(
v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
- 双向绑定一般都应用在表单类元素上（如：
input、select等） v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
<div id="root">
单向数据绑定：<input v-bind:value="name"/>
双向数据绑定：<input v-model="name"/>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
"name":"world"
}
})
</script>
效果：
2.4 el 与 data 的两种写法
el有 2 种写法：
new Vue时候配置el属性- 先创建
Vue实例，随后再通过vm.$mount('#root')指定el的值
data有 2 种写法：对象式和函数式。以后使用到组件时必须使用函数式不然会报错
说明：
data中的属性最后都会出现在vm身上VM身上的所有属性及Vue原型上的所有属性都可以直接在Vue模板上使用
重要原则：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
<div id="root">
<h1>hello {{msg}}</h1>
</div>
<script type="text/javascript">
// 1、对象式
// const vm = new Vue({
// el:"#root",
// data:{
// "msg":"world"
// }
// })
// 2、函数式
const vm = new Vue({
data(){
return{
"msg":"world"
}
}
})
vm.$mount('#root')
</script>
2.5 数据代理
所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。
① Object.defineproperty
Object.defineproperty允许修改默认的额外选项（或配置），默认情况下添加的属性值是不可修改（immutable）的，具体属性值参考链接。
<script type="text/javascript">
let number = 18
let person = {
name: "张三",
sex: "男"
}
Object.defineProperty(person, 'age', {
get() {
console.log("---读取数据----")
return number
},
set(value) {
console.log("---设置数据----"+value)
number = value
}
})
Object.defineProperty(person, 'height', {
value:190,
writable: false
})
console.log(person)
</script>
② Vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写），更加方便的操作data中的数据
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter，在getter/setter内部去操作（读/写）data中对应的属性。
<body>
<div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'Peking',
address:'Beijing'
}
})
console.log(vm)
</script>
2.6 事件处理
事件的基本使用:
- 使用
v-on:xxx或@xxx绑定事件，xxx是事件名 methods中配置的函数，都是被Vue所管理的函数，this的指向是Vm或者组件实例对象；method中配置的函数不要用箭头函数，否则this就不是vm。@click="demo"和@click="demo($event)"效果一致，但后者可以传参- 默认事件形参
event，隐含属性对象$event
① 绑定监听
模板：v-on:xxx="fun"或者@xxx="fun"
<body>
<div id="root">
<button v-on:click="show($event)">点我提示信息1（不传参）</button>
<button @click="show2(66)">点我提示信息2（传参）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
methods: {
show() {
console.log(event.target.innerText)
console.log(this) //此处的this是vm
alert('同学你好！')
},
// show2(event,number){
// console.log(event,number)
// // console.log(event.target.innerText)
// // console.log(this) //此处的this是vm
// alert('同学你好！！')
// }
show2:(number)=>{
console.log(this)
alert('同学再见')
}
}
})
</script>
② 事件修饰符
.prevent：阻止事件的默认行为event.preventDefault().stop：停止事件冒泡event.stopPropagation()once：事件只触发一次capture：使用事件的捕获模式self：只有event.target是当前操作的元素才触发元素
<body>
<div id="root">
<!-- 阻止默认事件（常用）-->
<a href="http://www.baidu.com" target="_blank" @click.prevent="show">点击跳转百度</a>
<!-- 阻止事件的冒泡（常用）事件修饰符可以连写 -->
<div class="height" style="background-color: yellowgreen;" @click="show">
<button @click.stop.prevent="show2">点我提示信息</button>
</div>
<!-- 事件只触发一次（常用） -->
<button @click.once="log">事件只触发一次</button>
<!--优先执行捕获事件-->
<div class="height" style="background-color: pink;" @click.capture="show">
<button @click="show2">点我提示信息</button>
</div>
<div class="height" style="background-color: aquamarine;" @click.self="log">
<button @click="log">点我提示信息</button>
</div>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods: {
show() {
alert('同学你好！')
},
show2() {
alert('同学再见！')
},
log() {
console.log(event.target)
}
}
})
</script>
③ 键盘事件
Vue中常用的按键别名：
| 按键 | 别名 |
|---|---|
| 回车 | enter |
| 删除、退格 | delete |
| 退出 | esc |
| 空格 | space |
| 换行 | tab (特殊，必须配合keydown去使用) |
| 上、下、左、右 | up、down、left、right |
-
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） -
系统修饰键（用法特殊）：
ctrl、alt、shift、meta- 配合
keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发 - 配合
keydown使用：正常触发事件
- 配合
-
也可以使用
keyCode去指定具体的按键（不推荐） -
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<body>
<div id="root">
<input placeholder="请输入姓名" @keydown.enter="commit()" />
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
methods: {
commit() {
alert('提交成功！')
}
}
})
</script>
2.7 计算属性和监听
① 计算属性
在computed属性对象中定义计算属性的set、get方法实现对属性数据的显示和监视，当计算属性不需要双向绑定的时候，可以采用简写的方式。
计算属性存在缓存，多次读取只执行一次getter计算。
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
姓名：<input type="text" v-model="fullName" /><br />
姓名2：{{fullName2}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
firstName: 'Ken',
lastName: 'Brown'
},
computed: {
fullName: {
get() {
console.log("----get()方法调用----")
return this.firstName + '-' + this.lastName
},
set(value) {
console.log("----set()方法调用----")
const arr = value.split("-")
this.firstName = arr[0]
this.lastName = arr[1]
}
},
// 简写、相当于只有get方法
fullName2(){
console.log('get2被调用了')
return this.firstName + '-' + this.lastName
}
}
})
② 监视属性
通过通过vm对象的$watch()或watch配置来监视指定的属性。当属性变化时，回调函数自动调用，在函数内部进行计算。
<body>
<div id="root">
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
姓名：{{fullName}}
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
firstName: 'Ken',
lastName: 'Brown'
},
computed: {
fullName() {
return this.firstName + '-' + this.lastName
}
}
// ,watch:{
// fullName:{
// immediate:true,//初始化时让handler调用一下
// handler(newValue,oldValue){
// console.log('fullName被修改了',newValue,oldValue)
// }
//简写
/* fullName(newValue,oldValue){
console.log('fullName被修改了',newValue,oldValue,this)
} */
// }
// }
})
vm.$watch('fullName', {
immediate: true,//初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('fullName被修改了', newValue, oldValue)
}
})
</script>
深度监视属性：Vue中的watch默认不监测对象内部值的改变（一层），配置deep:true可以监测对象内部值改变（多层），默认为false。
<body>
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
numbers: {
a: 1
}
},
watch: {
//监视多级结构中所有属性的变化
numbers: {
deep: true,
handler() {
console.log('numbers改变了')
}
}
}
})
</script>
③ computed 和 watch 之间的区别
computed能完成的功能，watch都可以完成watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
- 所被
Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象 - 所有不被
Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
2.8 class 与 style 绑定
在应用界面中，某个(些)元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术。
① class 绑定
class绑定模板：:class='xxx'，表达式写法：
- 表达式是字符串：
'classA' - 表达式是对象：
{classA:isA,classB:isB} - 表达式是数组：
['classA','classB']
② style 绑定
style绑定模板：:class='xxx'，表达式写法：
- 表达式是对象：
{classA:isA,classB:isB} - 表达式是数组：
['classA','classB']
<style>
.classA {
color: red;
}
.classC {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<h2>1. class绑定：:class='xxx'</h2>
<p :class="a">表达式是字符串：'classB'</p>
<p :class="classObj">表达式是对象:{classA:isA,classB:isB}</p>
<p :class="classArr">表达式是数组:['classA','classC']</p>
<h2>2. style绑定：:style='xxx'</h2>
<p :style="styleObj">:style={color: activeColor, fontSize: fontSize + 'px'}</p>
<p :style="styleArr">:style={color}</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
a: 'classA',
c: 'classC',
classObj: {
classA: false,
classB: true
},
classArr: ['classA','classC'],
styleObj: {
backgroundColor: 'aqua',
color: 'red'
},
styleArr: [{
fontSize: '30px',
color: 'blue'
}]
}
})
</script>
2.9 条件渲染
| v-show | v-if | |
|---|---|---|
| 写法 | v-show=“表达式” | v-if=“表达式”、v-else-if=“表达式”、v-else=“表达式” |
| 适用于 | 切换频率较高的场景 | 切换频率较低的场景 |
| 特点 | 不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉（display: none） | 不展示的 DOM 元素直接被移除 |
<div id="app">
<h2>当前n的值：{{n}}</h2>
<button @click="n++">点击n++</button>
<h3>1、v-show的使用</h3>
<h4 v-show="false" :style=styleArr>v-show=false</h4>
<h4 v-show="n === 2" :style=styleArr>n == 2</h4>
<h3>2、v-if的使用</h3>
<h4 v-if="false" :style=styleArr>v-show=false</h4>
<h4 v-if="n === 1" :style=styleArr>n == 1</h4>
<h3>3、 v-else和v-else-if的使用</h3>
<h4 v-if="n === 1" :style=styleArr>n == 1</h4>
<h4 v-else-if="n === 2" :style=styleArr>n == 2</h4>
<h4 v-else :style=styleArr>v-else</h4>
<h3>4、 v-if与template的配合使用</h3>
<template v-if="n===4">
<h4>template模板</h4>
</template>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
n: 0,
styleArr: { color: 'blue' }
}
})
</script>
2.10 列表渲染
① v-for 的基本使用
列表渲染指令v-for用于展示列表数据，可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
语法：v-for="(item, index) in xxx" :key="yyy"
<div id="app">
<h2>1、遍历数组</h2>
<ul>
<li v-for="(val, index) of arr" :key="index">
{{index}}-{{val}}
</li>
</ul>
<h2>2、遍历对象</h2>
<ul>
<li v-for="(val, key) of obj" :key="key">
{{key}}-{{val}}
</li>
</ul>
<h2>3、测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(char, index) of str" :key="index">
{{index}}-{{char}}
</li>
</ul>
<h2>4、测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(num, index) of 5" :key="index">
{{index}}-{{num}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
str:'hello',
arr: ['a', 'b', 'c'],
obj: {
name: 'Robert',
age: 18
}
}
})
</script>
② 列表过滤 & 列表排序 案例
<div id="app">
搜索：<input v-model="key" />
<ul>
<li v-for="(person,index) of filterPerson" :key="person.id">{{index}}-{{person}}</li>
</ul>
<div>
<button @click="isSorted=0">不排序</button>
<button @click="isSorted=1">升序</button>
<button @click="isSorted=2">降序</button>
</div>
</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
key: '',
isSorted: 0,
objArr: [{id: '001', name: 'Robert', age: 19},
{id: '002', name: 'Rose', age: 18},
{id: '003', name: 'Jack', age: 20}]
},
computed: {
filterPerson() {
const filterArr = this.objArr.filter((obj) => {
return obj.name.indexOf(this.key) !== -1
})
//是否排序
if (this.isSorted) {
filterArr.sort((obj1, obj2) => {
return this.isSorted === 1 ? obj1.age - obj2.age : obj2.age - obj1.age
})
}
return filterArr
}
}
// watch: {
// key: {
// immediate: true,
// handler(val) {
// this.filterPerson = this.objArr.filter((obj) => {
// return obj.name.indexOf(val) !== -1
// })
// if (this.isSorted) {
// this.filterPerson = this.objArr.sort((obj1, obj2) => {
// return this.isSorted === 1 ? obj1.age - obj2.age : obj2.age - obj2.age
// })
// }
// }
// }
// }
})
</script>
2.11 Vue数据监视
参考 Vue 数据监视
2.12 表单输入绑定
使用v-model对表单数据进行收集：
<input type="text"/>中v-model收集的是value值，用户输入的就是value值<input type="radio"/>中v-model收集的是value值，且要给标签配置value值<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked
- 配置input的value属性：v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）；v-model的初始值是数组，那么收集的的就是value组成的数组。
v-model的三个修饰符：
| 修饰符 | 效果 |
|---|---|
| lazy | 失去焦点再收集数据 |
| number | 输入字符串转为有效的数字 |
| trim | 输入首尾空格过滤 |
<div id="app">
<form @submit.prevent="demo">
账号：<input v-model="user.account" /><br />
密码：<input v-model="user.password" type="password" /><br />
年龄：<input v-model="user.age" /><br />
性别:<input type="radio" name="sex" value="1" v-model="user.sex" />男
<input type="radio" name="sex" value="2" v-model="user.sex" />女<br />
爱好：<input type="checkbox" v-model="user.hobbies" value="basketball" />篮球
<input type="checkbox" v-model="user.hobbies" value="game"/>游戏
<input type="checkbox" v-model="user.hobbies" value="swim"/>游泳<br />
籍贯：<select v-model="user.city" >
<option value="Bj">北京</option>
<option value="Sh">上海</option>
<option value="Sz">深圳</option>
</select><br />
其他信息：<textarea v-model.lazy="user.other"></textarea> <br/><br/>
<input type="checkbox" v-model="user.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
data: {
user:{
account: '',
password: '',
age: '',
sex: '',
hobbies: [],
city:'',
other:'',
agree:''
}
},
methods:{
demo(){
console.log(JSON.stringify(this.user))
}
}
})
</script>
2.13 过滤器
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
- 注册过滤器：
Vue.filter(name,callback)或new Vue{filters:{}} - 使用过滤器：
{{ xxx | 过滤器名}}或v-bind:属性 = "xxx | 过滤器名"'
备注：
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据，是产生新的对应的数据
<div id="app">
<h2>当前时间戳:{{time}}</h2>
<h2>methods格式化当前时间戳:{{getFmtTime()}}</h2>
<h2>computed格式化当前时间戳:{{fulltime}}</h2>
<h2>过滤器格式化当前时间戳:{{time | filterFulltime}}</h2>
<h2>过滤器传参格式化当前时间戳:{{time | filterFulltime('YYYY-MM-DD')}}</h2>
<h2>过滤器传参格式化&全局过滤器当前时间戳:{{time | filterFulltime('YYYY-MM-DD') | mySlice}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
const vm = new Vue({
el: '#app',
data: {
time: Date.parse(new Date())
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
computed: {
fulltime() {
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
filters: {
filterFulltime(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
return dayjs(value).format(str)
}
}
})
</script>
2.14 内置指令
上述已学习的指令：
| 指令 | 描述 |
|---|---|
| v-bind | 单向绑定解析表达式，可简写为 :xxx |
| v-model | 双向数据绑定 |
| v-for | 遍历数组/对象/字符串 |
| v-on | 绑定事件监听，可简写为@ |
| v-if | 条件渲染（动态控制节点是否存存在） |
| v-else | 条件渲染（动态控制节点是否存存在） |
| v-show | 条件渲染 (动态控制节点是否展示) |
① v-text 指令
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
② v-html 指令
作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
v-html会替换掉节点中所有的内容，{{xx}}则不会v-html可以识别html结构
注意：v-html有安全性问题！！！！
- 在网站上动态渲染任意
HTML是非常危险的，容易导致XSS攻击 - 一定要在可信的内容上使用
v-html，永不要用在用户提交的内容上！
③ v-cloak
- 本质是一个特殊属性，
Vue实例创建完毕并接管容器后，会删掉v-cloak属性 - 使用
css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题，防止闪回
④ v-once
v-once所在节点在初次动态渲染后，就视为静态内容了- 以后数据的改变不会引起
v-once所在结构的更新，可以用于优化性能
⑤ v-pre
- 跳过其所在节点的编译过程
- 可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译
<div id="app">
<div>hello {{msg}}</div>
<div v-text="msg">hello </div>
<div v-html="msg">hello </div>
<h2 v-v-cloak>初始化的n值是:{{n}}</h2>
<h2 v-once>初始化的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-pre>hello</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
data: {
msg: '<h2>world</h2>',
n: 0
}
})
</script>
2.15 自定义指令
① 定义语法
- 局部指令：
new Vue({directives:{指令名:配置对象}})或new Vue({directives{指令名:回调函数}}) - 全局指令：
Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)
② 配置对象中常用的3个回调
bind：指令与元素成功绑定时调用。inserted：指令所在元素被插入页面时调用update：指令所在模板结构被重新解析时调用
③ 备注
- 指令定义时不加
v-，但使用时要加v- - 指令名如果是多个单词，要使用
kebab-case命名方式，不要用camelCase命名 - 自定义指令函数何时会被调用？1.指令与元素成功绑定时2.指令所在的模板被重新解析时。
- 自定义指令函数中的
this均为Window
<!-- 需求1：定义v-tensize指令，和v-text指令功能相同但是可以将数值扩大10倍
需求2：定义v-tensize2指令，和v-bind指令功能相同但是可以将数值扩大10倍、
其所绑定的input元素默认获取焦点
-->
<div id="app">
<h2 >n的值是<span>{{n}}</span></h2>
<h2 >n的10值是<span v-tensize="n">{{n}}</span></h2>
<button @click="n++">n++</button>
<input v-tensize2:value="n">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#app',
data: {
n: 1
},
directives:{
tensize(element,binding){
console.log('tensize',this)
console.log(element)
console.log(binding)
element.innerText = binding.value * 10
},
tensize2:{
//指令与元素成功绑定时
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value * 10
}
}
}
})
</script>
2.16 Vue 实例生命周期
生命周期，又名生命周期回调函数、生命周期函数、生命周期钩子，指的是Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的this指向是vm或组件实例对象。
Vue生命周期流程图如下：
①vue生命周期分析
| 生命周期 | 函数 |
|---|---|
| 初始化显示 | beforeCreate() 、created()、beforeMount()、页面渲染后mounted() |
| 更新状态：this.xxx = value | beforeUpdate()、updated() |
| 销毁 vue 实例：vm.$destroy() | beforeDestory()、destoryed() |
② 主要的生命周期函数使用时机
mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
③ 关于销毁 Vue 实例
- 销毁后借助
Vue开发者工具看不到任何信息 - 销毁后自定义事件会失效，但原生
DOM事件依然有效 - 一般不会在
beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
<div id="app">
<button @click="destroyVue">销毁vue1对象</button>
<p v-if="ok">{{msg}}</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vue1 = new Vue({
el: '#app',
data: {
msg: 'hello vue',
ok: true,
intervalId: ''
},
beforeCreate() {
console.log("beforeCreate(),msg = ", this.msg)
},
created() {
console.log("create(),msg = ", this.msg)
this.intervalId = setInterval(() => {
console.log("loading---")
this.ok = !this.ok
}, 1000)
},
beforeMount() {
console.log('beforeMount() msg = ' + this.msg)
},
mounted() {
console.log('mounted() msg = ' + this.msg)
},
beforeUpdate() {
console.log('before Update ok = ' + this.ok)
},
updated() {
console.log('updated ok = ' + this.ok)
},
beforeDestroy() {
console.log('beforeDestroy() msg = ' + this.msg)
clearInterval(this.intervalId)
},
destroyed() {
console.log('destroyed() msg = ' + this.msg)
},
methods: {
destroyVue() {
vue1.$destroy()
}
}
})
</script>
效果：
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)