Vue学习（一）Vue.js的基本使用

Vue.js的的基本使用：模板语法、计算属性和监听、class、Style绑定、条件渲染、列表渲染......

HuCheng1997

19502人浏览 · 2019-11-04 10:10:00

HuCheng1997 · 2019-11-04 10:10:00 发布

文章目录

一、Vue.js 简介
二、Vue.js 的使用

一、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>