Vue的基本使用
Vue的指令与过滤器
指令的概念
指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
指令的分类
vue中的指令按照不同的用途可以分为6大类：
- 内容渲染指令
- 属性绑定指定
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
指令是vue开发中最基础、最常用、最简单的知识点
内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。
常用的内容渲染指令有如下3个：
- v-text
- {{}}
- v-html
v-text
会覆盖标签中原有的内容
插值表达式
也就是{{}}
专门又来解决v-text会覆盖默认文本的问题
v-html
如果要把包含html标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令。
在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="'list-'+ id"></div>
属性绑定指令
插值表达是只能用在内容节点而不能用在属性节点。
如果需要为元素的属性动态绑定属性值，则需要用到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>
<div id="app">
<input type="text" v-bind:placeholder="tips">
<br>
<hr>
<!-- v-bind 可以简写为 : -->
<img :src="photo" alt="" style=" 100px; height: 100px;">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
tips: "Please input username",
photo: "https://cn.vuejs.org/images/logo.svg"
}
})
</script>
</body>
</html>
v-bind 可以简写为 :
绑定的内容如果需要拼接，则字符串的外面应该包裹单引号
v-bind会作为js表达式被解析
事件绑定指令
vue 提供了 v-on事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。
在methods中定义事件处理函数，格式如下：
methods: {
add: funtion() {
}
}
其简写形式：
methods: {
add() {}
}
在methods方法中，可以使用创建的实例对象（vm或this）来访问数据源。
在绑定事件处理函数的时候，可以使用()传递参数
v-on:可以简写为@
事件对象$event
事件修饰符
在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了时间修饰符的概念，来辅助程序员更方便地对事件的出发进行控制。
| 事件修饰符 | 说明 |
|---|---|
| .prevent | 阻止默认行为 |
| .stop | 阻止事件冒泡 |
| .capture | 以捕获模式出发当前的事件处理函数 |
| .once | 绑定的事件只触发一次 |
| .self | 只有在event.target是当前元素自身是出发事件处理函数 |
按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。
双向数据绑定指令
vue提供了v-model双向数据绑定指令，用来辅助开发者不操作DOM的前提下，快速获取表单的数据。
v-model只能和一些表单元素使用才有意义
<!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>事件绑定指令</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>用户名：{{username}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zihoo'
},
// 定义事件处理函数
methods: {
}
})
</script>
</body>
</html>
指令修饰符
为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 | |
| .trim | 自动过滤用户输入的首尾空白字符 | |
| .lazy | 在”change“时而非”input“时更新 |
<!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>v-model的修饰符</title>
</head>
<body>
<div id="app">
<div>
<h4>.number</h4>
<input type="text" v-model.number="num1"> + <input type="text" v-model.number="num2"> = {{num1 + num2}}
</div>
<div>
<h4>.trim</h4>
<input type="text" v-model.trim="username">
<button @click="showName">获取用户名</button>
</div>
<div>
<h4>.lazy</h4>
<p>data不会实时改变，当输入框失去焦点时，数据同步</p>
<input type="text" v-model.lazy="username">
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
username: ''
},
// 定义事件处理函数
methods: {
showName() {
alert("username ==>" + this.username)
}
}
})
</script>
</body>
</html>
条件渲染指令
v-if 会动态添加或删除元素
v-show 使用display: none来隐藏元素
v-if的配套指令
- v-else-if
- v-else
<!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>v-model的修饰符</title>
</head>
<body>
<div id="app">
<div>
<h4>v-if和v-show的区别</h4>
<p v-if="flag">v-if 的条件渲染</p>
<p v-show="flag">v-show 的条件渲染</p>
</div>
<div>
<h4>v-if的配套语法</h4>
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: true,
type: 'A'
},
// 定义事件处理函数
methods: {
}
})
</script>
</body>
</html>
列表渲染指令
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令需要使用item in items形式的特殊语法
<!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>v-model的修饰符</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="item, index in list">
<td>{{index + 1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: 'lisi'},
{id: 2, name: 'zhangsan'},
{id: 3, name: 'wangwu'}
]
}
})
</script>
</body>
</html>
官方简易：只要用到了v-for指令，那么一定要绑定一个:key属性。而且，尽量把id作为key的值。官方对key的值类型也是有要求的，只能是字符串或者数字类型。
过滤器
过滤器(Filters)是Vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定
过滤器应该在JavaScript表达式的尾部，由“管道符”进行调用
私有过滤器
一般定义的，在filters节点下定义的过滤器都为私有过滤器
公有过滤器
独立于每个vm实例之外
Vue.filter()方法接收两个参数：
- 全局过滤器的名字
- 全局过滤器的处理函数
如果全局过滤器和私有过滤器名字重复，则按照就近原则，优先使用私有过滤器
连续调用多个过滤器
过滤器可以连续调用多个
过滤器传参
<p>
{{message | filterA(arg1, arg2)}}
</p>
Vue.filter('filterA', (msg, arg1, arg2) => {
// 过滤器代码逻辑
})
<!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>v-model的修饰符</title>
</head>
<body>
<div id="app">
<h4>过滤器</h4>
<p>原字符串：{{message}}</p>
<p>过滤后的字符串：{{message | capitalize}}</p>
</div>
<div id="app2">
<h4>公有过滤器</h4>
<p>原字符串：{{ message }}</p>
<p>过滤后的字符串：{{message | capitalize}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.filter('capitalize', str => {
return str.toUpperCase() + "~~~"
})
const vm = new Vue({
el: '#app',
data: {
message: "hello vue.js"
},
// 定义过滤器函数
filters: {
// 形参值是管道符前面的值
capitalize(val) {
// 过滤器中一定要有一个返回值
return val.toUpperCase()
}
}
})
const vm2 = new Vue({
el: '#app2',
data: {
message: 'hello vue.js'
}
})
</script>
</body>
</html>