目录
4.2.2 {{}}插值表达式-解决v-text文本覆盖问题
4.4.3 $event应用场景：如果默认的事件对象e被覆盖，则可以手动传一个$event
一、vue简介
1.1 vue概念
用于构建用户界面的前端框架
1.2 vue的两个特性：数据驱动视图、双向数据绑定
（1）数据驱动视图：单向数据绑定，页面数据变化时，页面重新渲染。在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构，示意图如下：
（2）双向数据绑定：在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。开发者不需要手动操作DOM，即可获取表单元素的最新值。示例如下：
1.3 MVVM-vue的核心原理
MVVM是实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model（当前页面渲染依赖的数据源）、View（当前页面所渲染的DOM结构）、ViewModel（vue实例，是MVVM的核心），每个HTML页面都被拆分成了三个部分：
MVVM的工作原理：ViewModel是MVVM的核心。数据源发生变化时，会被ViewModel监听到，并自动更新页面。表单元素值发生变化时，也会被ViewModel监听到，把值自动同步到Model数据源中。
1.4 vue版本
vue共有3大版本：
2.x是目前企业开发中主流版本，1-2年内会被逐渐淘汰
3.x于2019-09-19发布，尚未推广，是未来企业的开发趋势
1.x已被淘汰
二、vue的基本使用
（1）下载并导入vue.js的script脚本文件。vue.js下载网址：Installation — Vue.js。在项目中新建day02项目，并在day02下新建lib目录，并将vue.js放到lib目录下。用vscode打开项目。并在day02项目下新建vue.html文件。
（2）在页面中声明一个将要被vue控制的DOM区域
（3）创建vm实例对象（vue实例对象）
（4）选中vue.html右击open in brower即可看到页面效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">{{ username }}</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
// 属性1-el:固定写法，表示当前vm要控制哪个区域，接收的参数是选择器
el:'#app',
// 属性2-data:渲染到页面上的数据
data:{
username:'zhangsan'
}
})
</script>
</body>
</html>三、vue的调试工具
devtool安装配置参考vue(一)章节Vue(一):前端工程化与webpack_baiduwenku112的博客-CSDN博客
devtool下载地址：
链接：https://pan.baidu.com/s/1oTW6OtyjHkDUc4GDmnP17Q
提取码：m7yx
四、vue的指令与过滤器
4.1 指令的概念
指令（directives）是为vue开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为以下6类：
（1）内容渲染指令
（2）属性绑定指令
（3）事件绑定指令
（4）双向绑定指令
（5）条件渲染指令
（6）列表渲染指令
4.2 内容渲染指令
辅助开发者渲染DOM元素的文本内容，常用的内容渲染指令有{{}}，v-text,v-html
4.2.1 v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p v-text="username"></p>
<p v-text="gender">性别：</p>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
username:'zhangsan',
gender:'男'
}
})
</script>
</body>
</html>“性别”被v-text所指定的值“男”覆盖。页面效果如下：
弊端：v-text会覆盖元素内默认的值！！！，{{}}可解决该问题
4.2.2 {{}}插值表达式-解决v-text文本覆盖问题
{{}}，专业名称插值表达式，用来解决上面v-text的文本覆盖问题。实际开发中使用最多。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p>姓名：{{ username }}</p>
<p>性别：{{ gender }}</p>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
username:'zhangsan',
gender:'男'
}
})
</script>
</body>
</html> 
4.2.3 v-html
v-text和{{}}只能渲染纯文本内容，如果要包含HTML标签的字符串渲染为页面的HTML元素，需要使用v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p v-html="info"></p>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
info:'<h5 style="color:red">vue.js课程</h5>'
}
})
</script>
</body>
</html>效果如下：
* el属性值只能是一个标签元素，如果存在多个同名标签，只会控制第一个。官方推荐的做法是在所有希望被控的元素外面包裹一个id为app的div，让Vue控制这个div，里面的元素也会被控制。但在实际开发中，往往不需要自己指定控制元素，Vue项目会自动配好。
4.3 属性绑定指令v-bind
注：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中
在vue中，可以使用v-bind:指令，为元素的属性动态绑定值，可以简写为英文的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<input type="text" :placeholder="info">
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
info:'请输入用户名'
}
})
</script>
</body>
</html>效果为：
使用JS表达式
在vue提供的模板渲染语法【插值表达式和v-bind】中，除了支持绑定简单的数据值之外，还支持Js表达式的运算，如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<div>1+2的结果是：{{ 1+2 }}</div>
<div>{{info}}反转的结果是：{{ info.split('').reverse().join('') }}</div>
<div :title="'box' + index">这是一个div</div>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
info:'请输入用户名',
index:3
}
})
</script>
</body>
</html>效果如下：
在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号。不包裹的话按变量处理。
4.4 事件绑定指令v-on
4.4.1 v-on:绑定事件不传参
vue提供v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。
注：通过this访问数据源中的数据，this===vm.打印vm会发现vm中有一个count的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p>count的值是：{{count}}</p>
<button v-on:click="add">+1</button>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
count:3
},
methods:{
add(){
console.log('ok');
this.count += 1
}
}
})
</script>
</body>
</html>
4.4.2 绑定事件并传参：递增5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p>count的值是：{{count}}</p>
<button v-on:click="add(5)">+1</button>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
count:3
},
methods:{
add(n){
console.log('ok')
this.count += n
}
}
})
</script>
</body>
</html>v-on:指令可以简写为@
原生DOM对象有onclick、oninput、onkeyup原生事件。vue中对应的分别是：v-on:click、v-on-input、v-on:keyup
4.4.3 $event应用场景：如果默认的事件对象e被覆盖，则可以手动传一个$event
如果不传实参，则默认传一个事件对象e给处理函数。如下：
<button @click="add">+1</button>
add(e){
console.log('ok')
this.count += n
}案例：若count为偶数，则按钮设置为红色，否则不设置颜色。e.target。方法不需要加$event参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<p>count的值是：{{count}}</p>
<button @click="add">+1</button>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
count:3
},
methods:{
add(e){
console.log(e)
this.count += 1
if(this.count % 2 ===0){
e.target.style.background = 'red'
}else{
e.target.style.background = ''
}
}
}
})
</script>
</body>
</html>效果：
若上述案例还想add方法要传参，方法需要加$event参数，如下：
4.4.4 事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue也提供了事件修饰符的概念，辅助程序员对事件的触发进行控制，常用的5个事件修饰符如下：
（1）.prevent
<a @click.prevent="xxx">链接</a>
<form @submit.prevent="xxx"></form>问题描述：如下，点击链接后控制台输出hello,直接跳转至百度，无法再次点击原链接
原生DOM的解决办法：设置参数e，并采用e.preventDefault阻止默认事件
vue的解决办法：click后加.prevent
（2）.stop
<button @click.stop="xxx">按钮<button >冒泡：<div><button></button></div>。div和button各自都绑定了事件，里边的button的事件执行时会触发外面的div绑定事件的触发。示例如下：
点击按钮时会同时输出divHandler和btnHandler
vue的解决方案：@click后加.stop
4.4.5 按键修饰符
在监听键盘事件时，可以为键盘相关的事件添加按键修饰符，如点击esc后input输入框的内容清空：
<input type="text" @keyup.esc="clear">
<input type="text" @keyup.enter="submit"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<input type="text" @keyup.esc="clear">
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
count:3
},
methods:{
clear(e){
console.log('ok')
e.target.value=''
}
}
})
</script>
</body>
</html>4.5 双向绑定指令
4.5.1 v-model的使用
vue提供了v-modle双向数据绑定指令，在不操作DOM的前提下，快速获得表单的数据
v-model用户表单元素：<input><textarea><select>
案例一：input输入框应用如下：修改input的值，count的值随之改变。修改count的值，input值也改变
案例二：select 应用如下：
4.5.2 v-model的修饰符
为方便处理用户输入的内容，vue为v-model指令提供了3个修饰符，分别是：
（1）.number
input输入框输入的内容默认为String,有时候为了方便加减乘除的运算，需要转为数字，采用.number即可实现
未加.number前：
如图，初始状态下是正确的，此时n1和n2都是number类型。
编辑输入框：发现第一个输入框的内容变成了字符串
采用.number解决上述问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2">=<span>{{ n1 + n2}}</span>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
n1:2,
n2:3
}
})
</script>
</body>
</html>
注：.trim只会去除收尾的空格，中间的空格不会去除
4.6 条件渲染指令
4.6.1 v-if与v-show
条件渲染指令按需控制DOM的显示与隐藏。指令有v-if、v-show
v-if与v-show的区别：v-if是直接创建或移除元素，v-show是添加或移除元素的display="none"。
使用场景：若要频繁切换，使用v-show。如果刚进入页面时，某些元素默认不展示，而且该元素后期很可能不被展示，此时使用v-if
注：实际开发中，不需要考虑性能问题，直接使用v-if!!!!!
4.6.2 v-if配套的一些指令
v-if可以单独使用，也可以配合v-else指令使用。v-else-if充当v-if的else-if块
注：v-else必须配合v-if使用，否则不会被识别。
如下：flag为A显示优秀，B显示良好。。。
4.7 列表渲染指令v-for---注意加Key
v-for基于一个数组来渲染一个列表结构，v-for 指令需要使用item in items的语法，items是待循环的数组，item是被循环的每一项
v-for还支持可选的第二个参数，即当前项的索引，语法格式(item,index) in items。
注：v-for中的item和index都是形参，可以重命名，如（user,i）in userList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>序号</td>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id" :title="item.name">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{ id: '1',name: '张三',age:10 },
{ id: '2',name: '李四',age:12 },
{ id: '3',name: '王五',age:15 }
]
}
})
</script>
</body>
</html>注：（1）head中导入bootstrap.css用于设置table的样式：
<link rel="stylesheet" href="./lib/bootstrap.css">（2）table的属性：table-bordered（加边框） table-hover（鼠标悬浮变色） table-striped（隔行变色）
<table class="table table-bordered table-hover table-striped">（3）item in items 或者(item,index) in items两种方式都可以
（4）也可以在父标签<tr>中使用item的值
<tr v-for="(item,index) in list" :title="item.name">
Key的注意事项：
（1）key值只能是字符串或者数字
（2）key值必须具有唯一性
（3）建议把数据项id作为Key值。
（4）使用index作为Key值没有任何意义，因为index的值不具有唯一性
（5）v-for使用时一定要指定Key(提升性能，又能防止列表紊乱)
五、品牌列表案例
案例效果：
5.1知识点：lable for
按下图操作，则用户只有点中勾选框的时候才会被选中，理想的状态是点击男或者女也可以，此时借助for实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./lib/vue.js"></script>
<input type="checkbox" id="tb1">
<label>男</label>
<input type="checkbox" id="tb2">
<label>女</label>
</body>
</html>加上for后问题解决：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./lib/vue.js"></script>
<input type="checkbox" id="tb1">
<label for="tb1">男</label>
<input type="checkbox" id="tb2">
<label for="tb2">女</label>
</body>
</html>5.2 案例代码-基础版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>序号</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id" :title="item.name">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
<input type="checkbox" v-model="item.status" :id="'cb'+item.id">
<label v-if="item.status" :for="'cb'+item.id">已启用</label>
<label v-else :for="'cb'+item.id">已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{ id: '1',name: '奔驰',status:true, time:new Date()},
{ id: '2',name: '宝马',status:true, time:new Date() },
{ id: '3',name: '奥迪',status:true, time:new Date() }
]
}
})
</script>
</body>
</html>
注：（1）为了实现点击已禁用/已启动实现单选框勾选的效果，加入label for。但是此处的checkbox必须要动态生成。所以id和for要动态生成，如下：
<div>
<input type="checkbox" v-model="item.status" :id="'cb'+item.id">
<label v-if="item.status" :for="'cb'+item.id">已启用</label>
<label v-else :for="'cb'+item.id">已禁用</label>
</div>5.3 实现删除功能：借助过滤器
5.4 实现添加功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<form @submit.prevent="add">
<div>品牌名称</div>
<input type="text" placeholder="请输入商品名称" v-model.trim="brand">
<button type="submit">添加</button>
</form>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>序号</td>
<td>品牌名称</td>
<td>状态</td>
<td>创建时间</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="item.id" :title="item.name">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<div>
<input type="checkbox" v-model="item.status" :id="'cb'+item.id">
<label v-if="item.status" :for="'cb'+item.id">已启用</label>
<label v-else :for="'cb'+item.id">已禁用</label>
</div>
</td>
<td>{{ item.time }}</td>
<td>
<a @click="remove(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
list:[
{ id: '1',name: '奔驰',status:true, time:new Date()},
{ id: '2',name: '宝马',status:true, time:new Date() },
{ id: '3',name: '奥迪',status:true, time:new Date() }
],
nextId:'4',
brand:''
},
methods:{
remove(id){
this.list = this.list.filter(item => item.id !== id)
},
add(){
if(this.brand === ''){
alert('必须填写品牌名称')
return
}
// 添加功能
// 1、要添加的对象
const obj = {
id: this.nextId,
name: this.brand,
status: true,
time: new Date()
}
// 2、this.list中push新增的对象
this.list.push(obj)
// 3、清空this.brand，nextId自增1
this.brand=''
this.nextId++
}
}
})
</script>
</body>
</html>注：添加完成后需要清空brand，否则添加完再次添加input框中还是上次的值
六、过滤器
6.1 过滤器
<div>{{ info | capi }}</div>
filters:{
capi(val){
console.log(val)
// 获取首字母并将其转为大写
const first = val.charAt(0).toUpperCase()
// 从第1位开始截取
const other = val.slice(1)
return first + other
}
}注：（1）过滤器要定义到filter节点下，本质上是一个函数
（2）在过滤器函数中，一定要有return值
（3）在过滤器的形参中，就可以获取到管道符前面待处理的那个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<div>{{ info | capi }}</div>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
const vm = new Vue({
el:'#app',
data:{
info:'hello js',
},
filters:{
capi(val){
console.log(val)
// 获取首字母并将其转为大写
const first = val.charAt(0).toUpperCase()
// 从第1位开始截取
const other = val.slice(1)
return first + other
}
}
})
</script>
</body>
</html>6.2 私有过滤器与全局过滤器
6.1章节中的过滤器属于私有过滤器，只针对id=app的div区域。在filter节点下定义的过滤器，称为私有过滤器，只能在当前vm实例所控制的el区域内使用，如果希望多个vue实例之间共享过滤器，则可以定义全局过滤器：
注：如果全局过滤器和私有过滤器名字相同，此时调用的是私有过滤器
//Vue.filter接收两个参数
//第一个参数，是过滤器的名称
//第二个参数，是入参，过滤器管道符前面的值
//两种写法都可以
Vue.filter('capi',function(val){
return val.charAt(0).toUpperCase()+val.slice(1)
})
Vue.filter('capi',(val) => {
return val.charAt(0).toUpperCase() + val.slice(1)
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 步骤一：导入vue的库文件，这样Window全局就有了Vue这个构造函数 -->
<script src="./lib/vue.js"></script>
<!-- 步骤二：创建DOM -->
<div id="app">
<div>{{ info | capi }}</div>
</div>
<div id="app1">
<div>{{ info | capi }}</div>
</div>
<!-- 步骤三：创建Vue的实例对象 -->
<script>
Vue.filter('capi',(val) => {
return val.charAt(0).toUpperCase() + val.slice(1)
})
const vm = new Vue({
el:'#app',
data:{
info:'hello js',
}
})
const vm1 = new Vue({
el:'#app1',
data:{
info:'hello world',
}
})
</script>
</body>
</html>6.3 利用dayjs格式化时间
6.4 连续调用多个过滤器
过滤器支持串联调用
{{ message | filter1 | filter2 }}
6.5 过滤器传参
过滤器本质是JS，支持传参
6.6 过滤器的兼容性
过滤器仅vue2.x和1.x中支持，vue3.x不支持
若项目需要升级到vue3.x，建议使用计算属性或方法代替过滤器
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
