Vue基础（干货+代码）

最新推荐文章于 2024-05-14 17:58:50 发布

364.99°

最新推荐文章于 2024-05-14 17:58:50 发布

阅读量1.9k

点赞数 4

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54355172/article/details/126122314

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文主要记录Vue2.0的干知识点 + 案例代码

Vue官网教程： https://cn.vuejs.org/v2/guide/

1.模板语法

这两个部分操作的都是 data(){} 中的数据。

1.插值语法

插值语法： 把指定的值放到指定的位置。

{{ js表达式 }} 读取data中的数据，可对读取到的数据进行处理。

解析标签体内容

2.指令语法

v-bind:属性名="xxx" 单向绑定，数据只能从 data 流向页面，简写为 : 。

一般用在标签属性中
xxx为js表达式

v-model:value="xxx" 双向绑定，数据不仅能从 data 流向页面，还能从页面流向 data，简写为 v-model="xxx" 。

只能用在表单元素上，如input、select

v-text = "固定值"类似于innerText属性，作用与{{}}类似，但只能写一个固定的值。

v-html="固定值" 类似于innerHTML属性，作用与{{}}类似，但只能写一个固定的值。

v-once 具有v-once的标签中的数据只在界面上渲染一次。

v-pre 标签具有v-pre，界面会原封不动地展示标签内的内容。

v-cloak 标签具有v-cloak，在界面和数据还没完全渲染的时候，它不会展示，当界面和数据渲染完成，它才显示。需要和css的代码 [v-cloak]{ display: none } 一起配合使用。

3.v-bind

字符串写法：

适用于：样式的类名不确定，需要动态指定。

<div :class="{ active: isActive , 'text-danger': hasError}"></div>

data: {
  isActive: true,
  hasError: false
}

数组写法：

适用于：要绑定的样式个数不确定、名字也不确定

<div :class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

对象写法：

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

<div :class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj"></div> 

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr"></div>

.basic{
        width: 400px;
        height: 100px;
        border: 1px solid black;
    }

            styleObj:{
                fontSize: '40px',
                color:'red',
            },
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]

2.事件绑定

这部分操作的都是是 methods:{} 中的方法。

注意： 普通函数中的this指代的是Vue实例，箭头函数中的this指代的是就不是Vue实例，箭头函数绑定到父上下文。

1.触发事件的方式

鼠标	说明	键盘	说明	表单	说明
`click`	鼠标单击	`keydown`	键盘按下	`blur`	失去焦点
`dblclick`	鼠标双击	`keyup`	键盘抬起	`focus`	获得焦点
`mousemove`	鼠标移动	`keypress`	按下按键	`change`	内容变化
`mouseover`	鼠标悬浮
`mouseout`	鼠标离开

vue中常用的按键别名：

回车：enter
删除：delete (捕获“删除”和“退格”键)
退出：esc
空格：space
换行：tab (特殊，必须配合keydown去使用)
上：up
下：down
左：left
右：right

键盘事件注意事项：

系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合keydown使用：正常触发事件
可以使用keyCode去指定具体的按键，比如：@keydown.13=“showInfo”，但不推荐这样使用
Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名

2.基本用法

v-on:click="方法名" 绑定一个点击触发的方法，简写为 @click 。

不建议在methods中的方法使用箭头函数

3.事件修饰符

触发一个事件会经历以下两个过程：

事件的捕获过程： 从最外面的祖先DOM传递到目标DOM
事件的冒泡过程： 从目标DOM原路传出去

默认情况，我们只是监测冒泡过程，只有给事件的触发条件加上了事件修饰符才会监测捕获过程。

事件修饰符：使用格式：@click.修饰符1.修饰符2="方法名"

修饰符	说明
`prevent`	阻止默认事件
`stop`	阻止事件冒泡
`once`	事件只触发一次
`capture`	使用事件的捕获模式
`self`	只有目标DOM是当前操作时才触发事件
`passive`	事件的默认行为立即执行

3.Computed 和 Watchers

1.计算属性

计算属性：根据已经存在的属性，去加工获得新的属性或属性值。对于复杂的逻辑，应该使用计算属性。

要用的属性不存在，需要通过已有属性计算得来
底层借助了Objcet.defineproperty()方法提供的getter和setter
初次读取时会执行一次getter，依赖的数据发生改变时会被再次调用getter
必须要有return返回，如果没有return会报错。
与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    // 这里可以把function省略
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

计算出的属性是基于它们的依赖关系进行缓存的。计算属性只会在其某些依赖项发生更改时才会重新评估。这意味着只要message没有改变，多次访问reversedMessage计算属性将立即返回先前计算的结果，而不必再次运行该函数。这就比methods效率更高。

<div id="root">
  姓：<input type="text" v-model="firstName"><br><br>
  名：<input type="text" v-model="lastName"><br><br>
  姓名：<span>{{fullName}}</span>
</div>

        new Vue({
            el:'#root', 
            data:{ 
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + '-' + this.lastName
                    },
                    set(value){
						const arr = value.split('-')
						this.firstName = arr[0]
						this.lastName = arr[1]
                    }
                }
            }
        })

2.监视属性

监视属性：监视数据，当数据发生变化的时候，就会自动回调函数，进行相关的操作。

监视的数据必须是存在的：data、props 、$route 、$emit 、computed

监视属性简写：如果监视属性除了handler没有其他配置项的话，可以进行简写。

    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            //正常写法
            isHot:{
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}, 
            //简写
            isHot(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue,this)
			}
        }
    })

    //正常写法
    vm.$watch('isHot',{
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
    //简写
    vm.$watch('isHot',function(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    })

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

深度监视：监视对象的属性值的变化。

Vue中的watch默认不监测对象内部值的改变
在watch中配置 deep:true 可以监测对象内部值的改变（多层）

    <div id="root">
        <h3>a的值是:{{numbers.a}}</h3>
		<button @click="numbers.a++">点我让a+1</button>
		<h3>b的值是:{{numbers.b}}</h3>
		<button @click="numbers.b++">点我让b+1</button>
    </div>

        new Vue({
            el:'#root', 
            data:{ 
                isHot:true,
                numbers:{
                    a:1,
                    b:1,
                }
            },
            watch:{
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
					handler(){
						console.log('numbers改变了')
					}
                }
                //监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
            }
        })

4.条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>

			<h2 v-show="true">Hello,{{name}}!</h2>

			<div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else>Vue</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'jojo',
				n:0
			}
		})
	</script>
</html>

1.v-if

v-if 当表达式为真时，才会显示组件内容，否则组件不可见。

写法：

v-if="表达式"
v-else-if="表达式"
v-else

适用场景：切换频率较低的场景（开发阶段需要经常刷新页面，建议使用v-show）。

原因：不展示的DOM元素直接被移除

注意：v-if 可以和 v-else-if 、 v-else 一起使用，但要求结构不能被打断

2.v-show

v-show 作用同 v-if 类似，表达式为真才显示组件内容，否则组件不可变。

适用于：切换频率较高的场景。

原因：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

注意： v-show 不能与<template>一起用，不然会无法显示，v-show 建议和 <div>一起使用。

5.列表渲染v-for

1.遍历数组元素

v-for 用数组将元素映射到元素。

items：源数据数组
item：正在迭代的数组元素的别名
可以使用 of 替代 in

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

p是数据源persons的元素的别名
index用来获取到当前项目的索引
:key 用来绑定索引

<ul>
	<li v-for="(p,index) in persons" :key="index">
		{{p.name}}-{{p.age}}
	</li>
</ul>

persons:[
	{id:'001',name:'张三',age:18},
	{id:'002',name:'李四',age:19},
	{id:'003',name:'王五',age:20}
],

2.遍历对象属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

<ul>
	<li v-for="(value,k) in car" :key="k">
		{{k}}-{{value}}
	</li>
</ul>

car:{
	name:'奥迪A8',
	price:'70万',
	color:'黑色'
},

3.遍历字符串

<ul>
	<li v-for="(char,index) in str" :key="index">
		{{char}}-{{index}}
	</li>
</ul>

str:'hello'

4.遍历指定次数

在这种情况下，它会多次重复该模板。

<ul>
	<li v-for="(number,index) in 5" :key="index">
		{{index}}-{{number}}
	</li>
</ul>

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

5.小结

v-for

用于展示列表数据
语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

key的原理：
当Vue更新呈现的元素列表时v-for，默认情况下它使用“就地补丁”策略。如果数据项的顺序发生了变化，Vue将不会移动DOM元素来匹配项目的顺序，而是会将每个元素就地修补并确保它反映应该在该特定索引处呈现的内容。
这个默认模式是有效的，但只适用于你的列表渲染输出不依赖子组件状态或临时DOM状态（例如表单输入值）的情况。
为了给Vue一个提示，以便它可以跟踪每个节点的身份，并因此重新使用和重新排序现有元素，您需要key为每个项目提供一个唯一的属性。一个理想的价值key将是每个项目的唯一ID。
它的作用类似于一个属性，所以你需要使用v-bind它来将它绑定到动态值。

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

    <ul>
      <li v-for="(item, i) in list" :key="item.id">
        <input type="checkbox"> {{item.name}}
      </li>
    </ul>

list: [
   { id: 1, name: '李斯' },
   { id: 2, name: '吕不韦' },
   { id: 3, name: '嬴政' }
]

react、vue中的key有什么作用？（key的内部原理）

虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

旧虚拟DOM中找到了与新虚拟DOM相同的key
若虚拟DOM中内容没变, 直接使用之前的真实DOM
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

用index作为key可能会引发的问题:

若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

开发中如何选择key?

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的

6.列表过滤

要显示一个数组的过滤或排序版本，而不需要实际改变或重置原始数据。在这种情况下，可以创建一个返回过滤或排序数组的计算属性。

筛选元素：

<input type="text" placeholder="请输入名字" v-model="keyWord">
<ul>
	<li v-for="(p,index) of filPersons" :key="index">
		{{p.name}}-{{p.age}}-{{p.sex}}
	</li>
</ul>

keyWord:'',
persons:[
	{id:'001',name:'马冬梅',age:19,sex:'女'},
	{id:'002',name:'周冬雨',age:20,sex:'女'},
	{id:'003',name:'周杰伦',age:21,sex:'男'},
	{id:'004',name:'温兆伦',age:22,sex:'男'}
]
...
computed:{
	filPersons(){
		return this.persons.filter((p)=>{
		return p.name.indexOf(this.keyWord) !== -1
		})
	}
}

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

列表排序：

<input type="text" placeholder="请输入名字" v-model="keyWord">
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
    <li v-for="(p,index) of filPersons" :key="p.id">
       {{p.name}}-{{p.age}}-{{p.sex}}
    </li>
</ul>

data:{
    persons:[
        {id:'001',name:'马冬梅',age:30,sex:'女'},
		{id:'002',name:'周冬雨',age:45,sex:'女'},
		{id:'003',name:'周杰伦',age:21,sex:'男'},
		{id:'004',name:'温兆伦',age:22,sex:'男'}
    ],
    keyWord:'',
    sortType:0,//0代表原顺序，1代表升序，3代表降序
},
computed:{
   filPersons(){
        const arr = this.persons.filter((p)=>{
        return p.name.indexOf(this.keyWord) !== -1
   		})
   		if(this.sortType){
        	arr.sort((p1, p2)=>{
            return this.sortType ===1 ? p2.age-p1.age : p1.age-p2.age
   			})
   		}
   		return arr
	}
}

7.数据监视

变化方法:

Vue包装观察数组的变异方法，以便它们也会触发视图更新。包装的方法是：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button><br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button><br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					//Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					this.student.hobby.splice(0,1,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})

监视原理：

vue会监视data中所有层次的数据
如何监测对象中的数据
- 通过setter实现监视，且要在new Vue时就传入要监测的数据
- - 对象中后追加的属性，Vue默认不做响应式处理
- - 如需给后添加的属性做响应式，请使用如下API：
    Vue.set(target,propertyName/index,value)
    vm.$set(target,propertyName/index,value)
如何监测数组中的数据
- 通过包裹数组更新元素的方法实现，本质就是做了两件事：
- - 调用原生对应的方法对数组进行更新
- - 重新解析模板，进而更新页面
在Vue修改数组中的某个元素一定要用如下方法
- 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()

特别注意： Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等）添加属性。

6.收集表单数据

1.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区：
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:0,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

2.小结

收集表单数据：

若：<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性
若：<input type="checkbox"/>
- 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
- 配置了value属性：
- - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- - v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点后再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

7.过滤器

过滤器是vue中的一个特性，作用是对文本进行格式化的作用。

注意：vue 1.0中有内置的过滤器，在2.0中去掉了内置过滤器，只有自定义过滤器。

1.过滤器的使用

过滤器只能应用在两个地方：{{ xxx | xxx }}、:xx = " xxx | xxx "

1.全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定义全局过滤器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
               return value<10?"0"+value:value;
           });
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
    </div>
</body>
</html>

2.本地过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器</title>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 定义全局过滤器
           Vue.filter("addZero",function(value){
               // 如果value的值小于10则在前面添加0然后返回，否则直接返回value值
               return value<10?"0"+value:value;
           });
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
               },
               // 方法
               methods:{

               },
               // 定义本地过滤器
               filters:{
                   roundNum:function(value){
                       // 四舍五入 小数点后保留两位
                       return value.toFixed(2);
                   },
                   roundNumWithPara:function(value,digit){
                       // 根据digit返回相应位数的小数
                       return value.toFixed(value,digit);
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
        <!--在双花括号中使用全局过滤器 格式：{{值 | 过滤器的名称}}-->
        <div>{{3 | addZero}}</div>
        <div>{{15 | addZero}}</div>
        <!--在v-bind中使用全局过滤器 格式：v-bind:id="值 | 过滤器的名称"-->
        <div v-bind:id="1 | addZero">11</div>
        <div v-bind:id="12 | addZero">15</div>
        <!--使用本地过滤器-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNum}}</div>
        <!--保留小数点后3位-->
        <div>原始值：3.1415926，过滤后的值：{{3.1415926 | roundNumWithPara(3)}}</div>
    </div>
</body>
</html>

2.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,11)
		})
		new Vue({
            el:'#root',
            data:{
                time:Date.parse(new Date()),
            },
			//局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
	</script>
</html>

3.小结

过滤器的语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

注意：

过滤器能连接在一起：{{ message | filterA | filterB }}
过滤器并没有改变原本的数据，而是产生新的对应的数据

8.Vue生命周期

1.什么是vue的生命周期

Vue生命周期：

定义：Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，钩子就是在某个阶段给你一个做某些处理的机会。
又名：生命周期回调函数、生命周期函数、生命周期钩子
生命周期的函数名不可更改，只能编写其函数体
生命周期函数中的this指向是vm 或组件实例对象

2.生命周期函数

函数	说明
`beforeCreate`	在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问`methods`， `data`， `computed`等上的方法和数据。
`created`	这一步，实例已经完成的配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化。挂载还未开始，`$el`属性目前不可见。可进行的操作：调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等。通常在这里对实例进行预处理。
`beforeMount`	挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM）实例已经完成的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化。此时还没有挂载html到页面上。
`mounted`	挂载完成（将模板中的html渲染到页面上）。 mounted只会执行一次。一般在这阶段做一些Ajax操作。
`beforeUpdate`	实例数据更新前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。
`updated`	实例数据更新后调用（数据更改导致虚拟DOM重新渲染和打补丁），组件DOM已经更新，可以执行依赖于DOM的操作。然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。
`beforeDestroy`	实例销毁之前调用，实例仍然完全可用。这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件。
`destroyed`	实例销毁之后调用，调用后，所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。