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

待我称王封你为后i 2023-05-29 03:59 10阅读 0赞

### 文章目录 ###

*  一、Vue.js 简介
 *  二、Vue.js 的使用
 *   *  2.1 Vue.js 入门
     *  2.2 模板语法
     *  2.3 数据绑定
     *  2.4 el 与 data 的两种写法
     *  2.5 数据代理
     *  2.6 事件处理
     *  2.7 计算属性和监听
     *  2.8 class 与 style 绑定
     *  2.9 条件渲染
     *  2.10 列表渲染
     *  2.11 Vue数据监视
     *  2.12 表单输入绑定
     *  2.13 过滤器
     *  2.14 内置指令
     *  2.15 自定义指令
     *  2.16 Vue 实例生命周期

# 一、Vue.js 简介 #

一位华裔前`Google`工程师(尤雨溪)开发的前端`js`库，用于动态构建用户界面

**特点**：

1.  遵循`MVVM`模式
2.  编码简洁，体积小，运行效率高，移动/`PC`端开发
3.  它本身只关注`UI`，可以轻松引入`VUE`插件和其他第三方库开发项目

**MVVM模型**：

*  M：模型(`Model`)：`data`中的数据
 *  V：模型(`View`)：模板代码
 *  VM：视图模型(`ViewModel`)：`Vue`实例

![在这里插入图片描述][fcb254e618c04f979ea836035d8d2b94.png]  
**与其他框架的关联**：

*  借鉴`angular`的模板和数据绑定技术
 *  借鉴`react`的组件化和虚拟`DOM`技术

**vue包含一系列的扩展插件(库)**

<table> 
 <thead> 
  <tr> 
   <th>vue-cli</th> 
   <th>vue脚手架</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vue-resource(axios)</td> 
   <td>ajax请求</td> 
  </tr> 
  <tr> 
   <td>vue-router</td> 
   <td>路由</td> 
  </tr> 
  <tr> 
   <td>vuex</td> 
   <td>状态管理</td> 
  </tr> 
  <tr> 
   <td>vue-lazyload</td> 
   <td>图片懒加载</td> 
  </tr> 
  <tr> 
   <td>vue-scroller</td> 
   <td>页面滑动相关</td> 
  </tr> 
  <tr> 
   <td>mint-ui</td> 
   <td>基于vue的组件库(移动端)</td> 
  </tr> 
  <tr> 
   <td>element-ui</td> 
   <td>基于vue的组件库(PC端)</td> 
  </tr> 
 </tbody> 
</table>

# 二、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>

效果：

![在这里插入图片描述][c8ed151babed4f5f91ec2b6e9bb5682a.gif_pic_center]

## 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>

效果：

![在这里插入图片描述][6705407e731a43c7adc9029b8f6f4984.gif_pic_center]

## 2.3 数据绑定 ##

`Vue`中有 2 种数据绑定的方式：

1.  单向绑定(`v-bind`)：数据只能从`data`流向页面
2.  双向绑定(`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>

效果：

![在这里插入图片描述][5ad50a98457d4c98860695b685c1bd40.gif_pic_center]

## 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`）的，具体属性值参考[链接][Link 1]。

![在这里插入图片描述][9ca188d3bee24ce783405bf5f389c64f.gif_pic_center]  
**② 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>

![在这里插入图片描述][940ebcacde964416be3cbc32e44ec4cc.png]

## 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>

![在这里插入图片描述][d9e09ebf248f4a38a58aefab49adb0d4.gif_pic_center]

**② 事件修饰符**

*  `.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>

![在这里插入图片描述][a04bcdb380cc47b0a7cb87a473c2394c.gif_pic_center]  
**③ 键盘事件**

*  `Vue`中常用的按键别名：

<table> 
 <thead> 
  <tr> 
   <th>按键</th> 
   <th>别名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>回车</td> 
   <td>enter</td> 
  </tr> 
  <tr> 
   <td>删除、退格</td> 
   <td>delete</td> 
  </tr> 
  <tr> 
   <td>退出</td> 
   <td>esc</td> 
  </tr> 
  <tr> 
   <td>空格</td> 
   <td>space</td> 
  </tr> 
  <tr> 
   <td>换行</td> 
   <td>tab (特殊，必须配合keydown去使用)</td> 
  </tr> 
  <tr> 
   <td>上、下、左、右</td> 
   <td>up、down、left、right</td> 
  </tr> 
 </tbody> 
</table>

*  `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
    			}
    		}
    	})

![在这里插入图片描述][3e96c24e1ba04a86888040fec3c876d4.gif_pic_center]  
**② 监视属性**

通过通过`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>

![在这里插入图片描述][5691cf515ca547ff98343624e5c77f2d.gif_pic_center]  
*深度监视属性*：`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>

![在这里插入图片描述][a04abbd9ff6d46ac83f295ee2ddbee75.gif_pic_center]

**③ computed 和 watch 之间的区别**

1.  `computed`能完成的功能，`watch`都可以完成
2.  `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']`

![在这里插入图片描述][1f115fc4aec44d4ea8dda0a54190d365.png]

## 2.9 条件渲染 ##

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>v-show</th> 
   <th>v-if</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>写法</td> 
   <td>v-show=“表达式”</td> 
   <td>v-if=“表达式”、v-else-if=“表达式”、v-else=“表达式”</td> 
  </tr> 
  <tr> 
   <td>适用于</td> 
   <td>切换频率较高的场景</td> 
   <td>切换频率较低的场景</td> 
  </tr> 
  <tr> 
   <td>特点</td> 
   <td>不展示的 DOM 元素未被移除，仅仅是使用样式隐藏掉（<code>display: none</code>）</td> 
   <td>不展示的 DOM 元素直接被移除</td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][89fd7a18e4414125a9cac0aa9c11ecb4.gif_pic_center]

## 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>

![在这里插入图片描述][2226eed892eb45c18ab88e497ebeb1bf.png]  
**② 列表过滤 & 列表排序 案例**

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

![在这里插入图片描述][19490d5174a14e0cb6d39c2363a90d9d.gif_pic_center]

## 2.11 Vue数据监视 ##

参考[ 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`的三个修饰符：

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>lazy</td> 
   <td>失去焦点再收集数据</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>输入字符串转为有效的数字</td> 
  </tr> 
  <tr> 
   <td>trim</td> 
   <td>输入首尾空格过滤</td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][74d2216273834e0095196eddf73f6c87.png]

## 2.13 过滤器 ##

对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.  注册过滤器：`Vue.filter(name,callback)`或`new Vue{filters:{}}`
2.  使用过滤器：`{ { 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>

![在这里插入图片描述][fef4637875294f78a697d66579dd9dea.png]

## 2.14 内置指令 ##

上述已学习的指令：

<table> 
 <thead> 
  <tr> 
   <th>指令</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-bind</td> 
   <td>单向绑定解析表达式，可简写为 :xxx</td> 
  </tr> 
  <tr> 
   <td>v-model</td> 
   <td>双向数据绑定</td> 
  </tr> 
  <tr> 
   <td>v-for</td> 
   <td>遍历数组/对象/字符串</td> 
  </tr> 
  <tr> 
   <td>v-on</td> 
   <td>绑定事件监听，可简写为@</td> 
  </tr> 
  <tr> 
   <td>v-if</td> 
   <td>条件渲染（动态控制节点是否存存在）</td> 
  </tr> 
  <tr> 
   <td>v-else</td> 
   <td>条件渲染（动态控制节点是否存存在）</td> 
  </tr> 
  <tr> 
   <td>v-show</td> 
   <td>条件渲染 (动态控制节点是否展示)</td> 
  </tr> 
 </tbody> 
</table>

**① 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`

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

![在这里插入图片描述][e9f0dd66aa284a849c8cc140fd0481e6.gif_pic_center]

## 2.16 Vue 实例生命周期 ##

生命周期，又名生命周期回调函数、生命周期函数、生命周期钩子，指的是`Vue`在关键时刻帮我们调用的一些特殊名称的函数。

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。生命周期函数中的`this`指向是`vm`或组件实例对象。

`Vue`生命周期流程图如下：  
![在这里插入图片描述][33537094809a44ed82551f54127bc792.png]

**①`vue`生命周期分析**

<table> 
 <thead> 
  <tr> 
   <th>生命周期</th> 
   <th>函数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>初始化显示</td> 
   <td>beforeCreate() 、created()、beforeMount()、页面渲染后mounted()</td> 
  </tr> 
  <tr> 
   <td>更新状态：this.xxx = value</td> 
   <td>beforeUpdate()、updated()</td> 
  </tr> 
  <tr> 
   <td>销毁 vue 实例：vm.$destroy()</td> 
   <td>beforeDestory()、destoryed()</td> 
  </tr> 
 </tbody> 
</table>

**② 主要的生命周期函数使用时机**

*  `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>

效果：  
![在这里插入图片描述][20210317151154964.gif]

[fcb254e618c04f979ea836035d8d2b94.png]: https://img-blog.csdnimg.cn/fcb254e618c04f979ea836035d8d2b94.png
[c8ed151babed4f5f91ec2b6e9bb5682a.gif_pic_center]: https://img-blog.csdnimg.cn/c8ed151babed4f5f91ec2b6e9bb5682a.gif#pic_center
[6705407e731a43c7adc9029b8f6f4984.gif_pic_center]: https://img-blog.csdnimg.cn/6705407e731a43c7adc9029b8f6f4984.gif#pic_center
[5ad50a98457d4c98860695b685c1bd40.gif_pic_center]: https://img-blog.csdnimg.cn/5ad50a98457d4c98860695b685c1bd40.gif#pic_center
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
[9ca188d3bee24ce783405bf5f389c64f.gif_pic_center]: https://img-blog.csdnimg.cn/9ca188d3bee24ce783405bf5f389c64f.gif#pic_center
[940ebcacde964416be3cbc32e44ec4cc.png]: https://img-blog.csdnimg.cn/940ebcacde964416be3cbc32e44ec4cc.png
[d9e09ebf248f4a38a58aefab49adb0d4.gif_pic_center]: https://img-blog.csdnimg.cn/d9e09ebf248f4a38a58aefab49adb0d4.gif#pic_center
[a04bcdb380cc47b0a7cb87a473c2394c.gif_pic_center]: https://img-blog.csdnimg.cn/a04bcdb380cc47b0a7cb87a473c2394c.gif#pic_center
[3e96c24e1ba04a86888040fec3c876d4.gif_pic_center]: https://img-blog.csdnimg.cn/3e96c24e1ba04a86888040fec3c876d4.gif#pic_center
[5691cf515ca547ff98343624e5c77f2d.gif_pic_center]: https://img-blog.csdnimg.cn/5691cf515ca547ff98343624e5c77f2d.gif#pic_center
[a04abbd9ff6d46ac83f295ee2ddbee75.gif_pic_center]: https://img-blog.csdnimg.cn/a04abbd9ff6d46ac83f295ee2ddbee75.gif#pic_center
[1f115fc4aec44d4ea8dda0a54190d365.png]: https://img-blog.csdnimg.cn/1f115fc4aec44d4ea8dda0a54190d365.png
[89fd7a18e4414125a9cac0aa9c11ecb4.gif_pic_center]: https://img-blog.csdnimg.cn/89fd7a18e4414125a9cac0aa9c11ecb4.gif#pic_center
[2226eed892eb45c18ab88e497ebeb1bf.png]: https://img-blog.csdnimg.cn/2226eed892eb45c18ab88e497ebeb1bf.png
[19490d5174a14e0cb6d39c2363a90d9d.gif_pic_center]: https://img-blog.csdnimg.cn/19490d5174a14e0cb6d39c2363a90d9d.gif#pic_center
[Vue]: https://hucheng.blog.csdn.net/article/details/120041766
[74d2216273834e0095196eddf73f6c87.png]: https://img-blog.csdnimg.cn/74d2216273834e0095196eddf73f6c87.png
[fef4637875294f78a697d66579dd9dea.png]: https://img-blog.csdnimg.cn/fef4637875294f78a697d66579dd9dea.png
[e9f0dd66aa284a849c8cc140fd0481e6.gif_pic_center]: https://img-blog.csdnimg.cn/e9f0dd66aa284a849c8cc140fd0481e6.gif#pic_center
[33537094809a44ed82551f54127bc792.png]: https://img-blog.csdnimg.cn/33537094809a44ed82551f54127bc792.png
[20210317151154964.gif]: https://img-blog.csdnimg.cn/20210317151154964.gif