Vue 实例
- 通过 Vue 函数创建
new Vue({});
el 选项
- 可以为 CSS 选择器格式的字符串 或 HTMLElement 实例,但不能 为 html 或 body。
// 1、使用 css 选择器
/* var vm = new Vue({
el: '#app'
});
// 2、HTMLElement 实例
/* var app = document.querySelector('#app');
var vm = new Vue({
el: app
});
//
var app = document.getElementById('app');
var vm = new Vue({});
// vm.$mount('#app');
vm.$mount(app);
console.log(vm.$el);
- 未设置 el 的 vue 实例,也可以通过 vm.$mount() 进行挂载,参 数形式与 el 规则相同。
var app = document.getElementById('app');
var vm = new Vue({});
// 1、css 选择器选择
// vm.$mount('#app');
// 2、HTMLElement 实例
vm.$mount(app);
插值表达式
- 挂在元素内部可以使用 Vue.js 的模版语法,模版中可以通过差值表达式为元素进行动态内容设置,写法为 {{}}
<div id="demo">
<ul>
<li>基本运算:{{ 2 + 2 }}</li>
<li>三元运算:{{ 1 > 2 ? '1 > 2' : '1 < 2' }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo'
})
</script>
注意:
- 插值表达式只能书写在标签内容区域,可以与其它内容混合。
- 内部只能书写 JavaScript 表达式,不能书写语句
data 选项
- 用于存储 Vue 实例需要使用的数据,值为对象类型
- data 中的数据可以通过 vm.$data.数据 或 vm.数据 访问
- data 中的数据可以直接在视图中通过插值表达式访问
- data 中的数据为响应式数据,在发生改变时,视图会自动更新
<body>
<div id="demo">
<ul>
<li>第一个 li 的内容:{{ content}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: "hello vue data!"
}
})
vm.content = '你好啊!'
</script>
</body>
- data 中存在数组时,索引操作与 length 操作无法自动更新视图, 这时可以借助 Vue.set() 方法替代操作
<body>
<div id="demo">
<ul>
<li>第一个 li 的内容:{{ content[0] }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: ['zm', 'oy']
}
})
Vue.set(vm.content, 0, 'zx')
</script>
</body>
methods 选项
- 用于存储需要在 Vue 实例中使用的函数
- methods 中的方法可以通过 vm.方法名 访问
- 方法中的 this 为 vm 实例,可以便捷的访问 vm 数据等功能
<body>
<div id="demo">
<ul>
<li>第一个 li 的内容:{{ fn() }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: 'z-m'
},
methods: {
fn () {
return this.fn1(this.content.split('-').join(''))
},
fn1 (value) {
return value.toUpperCase()
}
}
})
Vue.set(vm.content, 0, 'zx')
</script>
</body>
Vue.js 指令
- 指令的本质就是 HTML 自定义属性
- Vue.js 的指令就是以 v- 开头的自定义属性
内容处理
v-once 指令
- 使元素的插值表达式只生效一次
<body>
<div id="demo">
<ul>
<li v-once>第一个 li 的内容:{{ content }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: 'z-m'
}
})
vm.content = 'ZM' // 第一个 li 的内容还展示 z-m
</script>
</body>
v-text 指令
- 元素内容整体替换为指定纯文本数据
<body>
<div id="demo">
<ul>
<li v-text="content">第一个 li 的内容</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '数据中的 content' // 最终 li 中的内容展示该值
}
})
</script>
</body>
v-html 指令
元素内容整体替换为指定的 HTML 文本
<body>
<div id="demo">
<ul v-html="content">
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '<li>数据中的content</li>'
}
})
</script>
</body>
属性绑定
v-bind 指令
- v-bind 用于动态绑定 html 属性
- Vue.js 还为 v-bind 指令提供了简写方式
- 如果需要一次绑定多个属性,还可以绑定对象
- 与插值表达式类似,v-bind 中也允许使用表达式
<body>
<div id="demo">
<!-- <p v-bind:title="title">test</p> -->
<!-- <p :title="title">test</p> -->
<!-- <p v-bind="obj">test</p> -->
<p v-bind:class="prex + ext">test</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
prex: '测试',
ext: 'v-bind使用插值表达式',
obj: {
id: 'success',
title: 'v-bind 动态绑定title'
}
}
})
</script>
</body>
Class 绑定
- class 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 class 属性共存
<body>
<div id="demo">
<p class="b" :class="a">test</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
a: '动态绑定的class'
}
})
</script>
</body>
- 对于 class 绑定, Vue.js 中还提供了特殊处理方式
<body>
<div id="demo">
<p :class="{a: isA, b: isB, 'c': true}">test</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
isA: true,
isB: false
}
})
</script>
</body>
<body>
<div id="demo">
<p :class="['a', 'b', {c: isC}]">test</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
isC: true
}
})
</script>
</body>
Style 绑定
- style 是 HTML 属性,可以通过 v-bind 进行绑定,并且可以与 style 属性共存
- 当我们希望给元素绑定多个样式对象时,可以设置为数组
<body>
<div id="demo">
<div :style="[styleObj1, styleObj2]" style="color: blue;">test</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
styleObj1: {
width: '100px',
height: '100px'
},
styleObj2: {
border: '1px solid #ccc'
}
}
})
</script>
</body>
渲染指令
v-for 指令
- 用于遍历数据渲染结构,常用的数组与对象均可遍历
<body>
<div id="demo">
<ul>
<li v-for="item in arr">{{ item }}</li>
</ul>
<ul>
<li v-for="item in obj">{{ item }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
arr: ['a', 'b', 'c'],
obj: {
first: 'zhang',
second: 'meng'
}
}
})
</script>
</body>
- 使用 v-for 的同时,应始终指定唯一的 key 属性,可以提高渲 染性能并避免问题
<body>
<div id="demo">
<ul>
<li v-for="item in obj" :key="item.id">{{ item.name }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
obj: [
{
id: 0,
name: 'zhang'
},
{
id: 1,
name: 'meng'
}
]
}
})
</script>
</body>
- 通过 <template> 标签设置模板占位符,可以将部分元素或内容 作为整体进行操作
<body>
<div id="app">
<template v-for="item in obj">
<span>{{ item }}</span>
<br>
</template>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
content1: '内容1',
content2: '内容2',
content3: '内容3'
}
}
})
</script>
</body>
v-show 指令
- 用于控制元素显示与隐藏,适用于显示隐藏频繁切换时使用
<body>
<div id="demo">
<p v-show="true">这个 p 标签会展示</p>
<p v-show="false">这个 p 标签会隐藏</p>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo'
})
</script>
</body>
- <template> 无法使用 v-show 指令
v-if 指令
- 用于根据条件控制元素的创建与移除
<body>
<div id="demo">
<p v-if="false">这个 p 标签不会展示</p>
<p v-else-if="true">这个 p 标签会展示</p>
<p v-else>这个 p 标签不会展示</p>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo'
})
</script>
</body>
- 给使用 v-if 的同类型元素绑定不同的 key
<body>
<div id="demo">
<div v-if="type === 'username'" :key="username">
用户名:<input type="text">
</div>
<div v-else :key="email">
邮   箱:<input type="text">
</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
type: 'username'
}
})
</script>
</body>
- 出于性能考虑,应避免将 v-if 与 v-for 应 用于同一标签
<body>
<div id="app">
<ul v-if="false">
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
items: {
content1: '内容1',
content2: '内容2',
content3: '内容3'
}
}
});
</script>
</body>
事件处理
v-on 指令
- 用于进行元素的事件绑定
<body>
<div id="demo">
<p v-show="true">{{ content }}</p>
<button v-on:click="content='新内容'">点击</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '默认内容'
}
})
</script>
</body>
- Vue.js 还为 v-on 指令提供了简写方式
<body>
<div id="demo">
<p v-show="true">{{ content }}</p>
<button @click="content='新内容'">点击</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '默认内容'
}
})
</script>
</body>
- 事件程序代码较多时,可以在 methods 中设置函数,并设置为事件处理程序
<body>
<div id="demo">
<p v-show="true">{{ content }}</p>
<button @click="fn()">点击</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '默认内容'
},
methods: {
fn() {
this.content='新内容'
}
}
})
</script>
</body>
- 设置事件处理程序后,可以从参数中接收事件对象
<body>
<div id="demo">
<p v-show="true">{{ content }}</p>
<button @click="fn">点击</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '默认内容'
},
methods: {
fn (event) {
this.content='新内容'
console.log(event)
}
}
})
</script>
</body>
- 在视图中可以通过 $event 访问事件对象
<body>
<div id="demo">
<p v-show="true">{{ content }}</p>
<button @click="fn('新的内容', $event)">点击</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
content: '默认内容'
},
methods: {
fn (value, event) {
this.content = value
console.log(value, event)
}
}
})
</script>
</body>
表单输入绑定
v-model 指令
- 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据 绑定
输入框绑定
- 输入框分为单行输入框 input 与多行输入框 textarea
<body>
<div id="demo">
<p>input 输入框的值:{{ value1 }}</p>
input 输入框:<input type="text" v-model="value1">
<p>textarea 输入框的值:{{ value2 }}</p>
textarea 输入框<textarea type="text" v-model="value2"></textarea>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value1: '',
value2: ''
}
})
</script>
</body>
单选按钮绑定
<body>
<div id="demo">
<p>单选框:{{ value }}</p>
<input type="radio" id="one" value="1" v-model="value">
<label for="one">选项1</label>
<input type="radio" id="two" value="2" v-model="value">
<label for="two">选项2</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
}
})
</script>
</body>
复选框绑定
- 复选框绑定分为单个选项与多个选项两种情况,书写方式不同
<body>
<div id="demo">
<!-- 展示是否选中 true/false -->
<p>复选框-单选项:{{ value }}</p>
<input type="checkbox" id="item" value="选项内容" v-model="value">
<label for="item">选项</label>
<!-- 展示被选中的 value -->
<p>复选框-多选项:{{ value1 }}</p>
<input type="checkbox" id="one" value="选项一内容" v-model="value1">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="选项二内容" v-model="value1">
<label for="two">选项二</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: '',
value1: []
}
})
</script>
</body>
选择框绑定
- 选择框绑定分为单选绑定与多选绑定两种情况,书写方式不同
<body>
<div id="app">
<!-- 单选选择框 -->
<p>单选选择框的内容: {{ value6 }}</p>
<select v-model="value6">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多选选择框 -->
<p>多选选择框的内容:{{ value7 }}</p>
<select v-model="value7" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value6: '',
value7: []
}
});
</script>
</body>
修饰符
- 修饰符是以点开头的指令后缀,用于给当前指令设置特殊操作
事件修饰符
.prevent 修饰符
- 用于阻止默认事件行为,相当于 event.preventDefault()
<body>
<div @click="fn1" id="demo">
<a @click.prevent="fn" href="www.baidu.com">a链接</a>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
console.log('a 的点击事件')
},
fn1 () {
console.log('div 的点击事件')
}
}
})
</script>
</body>
.stop 修饰符
- 用于阻止事件传播,相当于 event.stopPropagation()
- Vue.js 中允许修饰符进行连写,例如:@click.prevent.stop
<body>
<div @click="fn1" id="demo">
<!-- 阻止冒泡 -->
<!-- <a @click.stop="fn" href="https://kaiwu.lagou.com/">a链接</a> -->
<!-- 阻止冒泡并阻止默认行为 -->
<a @click.prevent.stop="fn" href="www.baidu.com">a链接</a>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
console.log('a 的点击事件')
},
fn1 () {
console.log('div 的点击事件')
}
}
})
</script>
</body>
.onece 修饰符
- 用于设置事件只会触发一次
<body>
<div id="demo">
<button @click="fn">按钮1</button>
<!-- 用于设置事件只会触发一次 -->
<button @click.once="fn">按钮2</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
console.log('a 的点击事件')
}
}
})
</script>
</body>
按键修饰符
按键码
<body>
<div id="demo">
<!-- <input type="text" @keyup="fn"> -->
<!-- <input type="text" @keyup.a="fn"> -->
<!-- <input type="text" @keyup.97="fn"> -->
<!-- <input type="text" @keyup.esc="fn"> -->
<input type="text" @keyup.a.b.c="fn">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
console.log('触发按键事件')
}
}
})
</script>
</body>
特殊按键
- 特殊按键指的是键盘中类似 esc、enter、delete 等功能按键, 为了更好的兼容性,应首选内置别名
<!-- <input type="text" @keyup.esc="fn"> -->
系统修饰符
- 系统按键指的是 ctrl 、alt 、shift 等按键
- 单独点击系统操作符无效
- 系统按键通常与其他按键组合使用
<body>
<div id="demo">
<input type="text" @keyup.ctrl.q="fn" v-model="value">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
this.value = ''
}
}
})
</script>
</body>
鼠标按键修饰符
- 用于设置点击事件由鼠标哪个按键来完成
<body>
<div id="demo">
<button @click.left="fn">按钮1</button>
<button @click.right="fn">按钮2</button>
<button @click.middle="fn">按钮3</button>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
},
methods: {
fn () {
console.log('点击事件')
}
}
})
</script>
</body>
v-model 修饰符
- trim 修饰符:用于自动过滤用户输入内容首尾两端的空格
- lazy 修饰符:用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发
- number 修饰符:用于自动将用户输入的值转换为数值类型,如无法被 parseFloat() 转换,则返回原始内容
<body>
<div id="demo">
<!-- <p>{{ value }}</p>
<input type="text" v-model.trim="value"> -->
<!-- <p>{{ value }}</p>
<input type="text" v-model.lazy="value"> -->
<p>{{ value }}</p>
<input type="text" v-model.number="value">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: ''
}
})
</script>
</body>
自定义指令
自定义全局指令
- 指的是可以被任意 Vue 实例或组件使用的指令
<body>
<div id="demo">
<input type="text" v-focus>
</div>
<div id="demo1">
<input type="text" v-focus>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.directive('focus', {
inserted: function (el) {
console.log(el)
el.focus()
}
})
new Vue({
el: '#demo',
data: {}
})
new Vue({
el: '#demo1',
data: {}
})
</script>
</body>
自定义局部指令
- 指的是可以在当前 Vue 实例或组件内使用的指令
<body>
<div id="demo">
<input type="text" v-focus>
</div>
<!-- 报错 -->
<!-- <div id="demo1">
<input type="text" v-focus>
</div> -->
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#demo1',
data: {}
})
new Vue({
el: '#demo',
data: {},
directives: {
focus: {
inserted(el) {
console.log(el)
el.focus()
}
}
}
})
</script>
</body>
过滤器
- 过滤器用于进行文本内容格式化处理
- 过滤器可以在插值表达式和 v-bind 中使用
全局过滤器
<body>
<div id="demo">
<!-- v-model 不能使用过滤器 -->
<!-- <input type="text" v-model="value"> -->
<p :title="value | filterA">这是全局过滤器</p>
<p>
{{ value | filterA }}
</p>
</div>
<div id="demo1">
<p>
{{ 'h-h-h' | filterA }}
</p>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.filter('filterA',function (value) {
return value.split('-').join('')
})
new Vue({
el: '#demo',
data: {
value: 'a-b-c',
}
})
new Vue({
el: '#demo1',
data: {
}
})
</script>
</body>
- 可以将一个数据传入到多个过滤器中进行处理
- 一个过滤器可以传入多个参数
<body>
<div id="demo">
<!-- v-model 不能使用过滤器 -->
<!-- <input type="text" v-model="value"> -->
<p :title="value | filterA('d', 'e') | filterB">这是全局过滤器</p>
<p>
{{ value | filterA('d', 'e') | filterB}}
</p>
</div>
<script src="lib/vue.js"></script>
<script>
Vue.filter('filterA',function (value1, value2, value3) {
return value1.split('-').join('') + value2 + value3
})
Vue.filter('filterB',function (value) {
return value.toUpperCase()
})
new Vue({
el: '#demo',
data: {
value: 'a-b-c',
}
})
</script>
</body>
局部过滤器
<body>
<div id="demo">
<p :title="value | filterA">这是局部过滤器</p>
<p>
{{ value | filterA }}
</p>
</div>
<!-- filterA 为局部过滤器 -->
<!-- <div id="demo1">
<p>
{{ value | filterA }}
</p>
</div> -->
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
value: 'a-b-c',
},
filters: {
filterA : function (value) {
return value.split('-').join('')
}
}
})
// new Vue({
// el: '#demo1',
// data: {
// value: 'h-h-h'
// }
// })
</script>
</body>
计算属性
- Vue.js 的视图不建议书写复杂逻辑,这样不利于维护
<body>
<div id="demo">
<p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
arr: [1, 2, 3],
}
})
</script>
</body>
- 封装函数是很好的方式,但有时重复的计算会消耗不必要的性能
<div id="demo">
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
arr: [1, 2, 3],
},
methods: {
getSum () {
var sum = 0
for (var i = 0; i < this.arr.length; i++) {
sum += this.arr[i]
}
return sum
}
}
})
</script>
</body>
- 计算属性使用时为属性形式,访问时会自动执行对应函数
<body>
<div id="demo">
<!-- <p>{{ Math.max.apply(null, arr) }}</p>
<p>{{ Math.max.apply(null, arr) }}</p> -->
<p>{{ getSum }}</p>
<p>{{ getSum }}</p>
<p>{{ getSum }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
arr: [1, 2, 3],
},
computed: {
getSum () {
var sum = 0
for (var i = 0; i < this.arr.length; i++) {
sum += this.arr[i]
}
return sum
}
}
})
</script>
</body>
methods 与 computed 区别
- computed 具有缓存,methods 没有
- computed 通过属性名访问,methods 需要调用
- computed 仅适用于计算操作
计算属性的 setter
- 计算属性默认只有 getter,Vue.js 也允许给计算属性设置 setter
<body>
<div id="demo">
<p>{{ fullName }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'zhang',
secondName: 'meng'
},
computed: {
fullName: {
get () {
return this.firstName + this.secondName
},
set (value) {
var arr = value.split(' ')
this.firstName = arr[0]
this.secondName = arr[1]
}
}
}
})
</script>
</body>
侦听器
- 侦听器用于监听数据变化并执行指定操作
- 为了监听对象内部值的变化,需要将 watch 书写为对象,并设置 选项 deep: true,这时通过 handler 设置处理函数
⚠️: - 当更改(非替换)数组或对象时,回调函数中的新值与旧 值相同,因为它们的引用都指向同一个数组 、对象
- 数组操作不要使用索引与length,无法触发侦听器函数
<body>
<div id="demo">
<p>{{ value }}</p>
<p>{{ getSum }}</p>
<p>{{ obj.firstName + obj.secondName }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
value: '默认内容',
arr: [1, 2, 3],
obj: {
firstName: 'z',
secondName: 'm'
}
},
computed: {
getSum () {
var sum = 0
for (var i = 0; i < this.arr.length; i++) {
sum += this.arr[i]
}
return sum
}
},
watch: {
value (val, oldVal) {
console.log('value 被修改了', val, oldVal)
},
arr (val, oldVal) {
console.log('数组被修改了', val, oldVal)
},
// 只有对象被本身被修改,可以使用该方法
// obj (val, oldVal) {
// console.log('对象被修改了', val, oldVal)
// }
obj: {
deep: true,
handler (val, oldVal) {
console.log('对象被修改了', val, oldVal)
}
}
}
})
</script>
</body>
Vue.js 生命周期
创建阶段
- beforeCreate:实例初始化之前调用
- created: 实例创建后调用
- beforeMount:实例挂载之前调用
- mounted: 实例挂载完毕
特点:每个实例只能执行一次
运行阶段
- beforeUpdate:数据更新后,视图更新前调用
- updated: 视图更新后调用
特点:按需调用
销毁阶段
- beforeDestroy:实例销毁之前调用
- destroyed: 实例销毁后调用
特点:每个实例只能执行一次