文章目录
- 一、基本使用步骤
- 测试样例
- 测试样例代码中MVVM对应关系图
- 二、 Vue指令
- 2.1 内容渲染指令
- 2.2 属性绑定指令
- 2.3 事件绑定指令
- 2.3.1 事件对象 event
- 2.3.2 事件修饰符
- 2.3.3 按键事件修饰符
- 2.4 双向绑定指令
- 修饰符
- 2.5 条件渲染指令
- 2.5.1 v-if / v-show
- 2.5.2 v-else/v-else-if
- 2.6 列表渲染指令 v-for
- 2.7 过滤器
一、基本使用步骤
- 导入Vue.js的script脚本
- 在页面中声明一个将要被Vue控制的DOM区域
- 创建VM实例对象（Vue实例对象）
测试样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 2. 声明要被 vue 所控制的 DOM 区域 -->
<div id="app">{{age}}</div>
<!-- 1. 导入 vue 的脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 3. 创建 vue 的实例对象 -->
<script>
const vm = new Vue({
// 3.1 使用 el 属性，指定 vue 要控制的区域
el: '#app',
// 3.2 数据源
data: {
username: 'zs',
age: 20
},
})
</script>
</body>
</html>运行结果
测试样例代码中MVVM对应关系图
二、 Vue指令
指令是用于辅助开发者渲染页面的基本结构
按照用途不同，可以分为以下六大类：
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
指令是Vue开发中最基础最常用的语法。
2.1 内容渲染指令
- v-text
- {{ }}
- v-html
测试样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="username"></p>
<p v-text="gender">性别</p>
<p>---------</p>
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<p>---------</p>
<p v-text="desc"></p>
<p>{{desc}}</p>
<p v-html="desc"></p>
</div>
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转 Message</button>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zs',
gender: '男',
desc: `<i style="color:red;">abc<i>`
}
})
const EventHandling = new Vue({
el:'#event-handling',
data:{
message: 'Hello Vue.js!',
},
methods: {
// 点击按钮，让 count 自增 +1
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>运行结果
注意 v-text 指令会覆盖元素内默认的值
Vue提供的{{ }}语法，专门用来解决v-text会覆盖默认文本内容的问题，专业表述叫插值表达式
v-text 指令和差值表达式只能渲染纯文本内容，如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到V-html命令
2.2 属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令
基本用法演示： <input type="text" v-bind:placeholder="inputValue" /> 其语法v-bind:属性名可以直接简写为:属性名
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- vue 实例要控制的 DOM 区域 -->
<div id="app">
<input type="text" :placeholder="inputValue">
<hr>
<img :src="imgSrc" alt="">
</div>
<!-- 导入 vue 脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 创建 VM 实例对象
const vm = new Vue({
// 指定当前 VM 要控制的区域
el: '#app',
// 数据源
data: {
// 文本框的占位符内容
inputValue: '请输入内容',
// 图片的 src 地址
imgSrc: './images/logo.png',
},
})
</script>
</body>
</html>插值表达式只能用在元素的内容节点中，不能动态绑定属性的值，此时只能用属性绑定指令
2.3 事件绑定指令
vue提供了 v-on 事件绑定指令，用来为DOM元素绑定事件监听
原生DOM对象有 onclick、oninput、onkeyup等原生事件
替换为vue的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明
v-on:指令的简写形式为@
2.3.1 事件对象 event
在原生的DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。
同理，在 v-on 指令下绑定的事件处理函数，也可以接收到事件对象event
若事件处理函有传入的参数，则在调用时可以传入 $event 来解决事件参数对象被覆盖的问题
2.3.2 事件修饰符
在事件处理函数中调用preventDefault() 或者 stopPropagation() 是非常常见的需求。因此vue提供了事件修饰符的概念，可以更方便的对事件的触发进行控制
事件修饰符 | 说明 |
| 阻止冒泡行为（比如阻止 a 的默认跳转，表单的默认提交） |
| 阻止事件的冒泡行为 |
.capture | 以捕获模式触发当前的事件处理函数 |
.once | 绑定的事件只触发依一次 |
.self | 只有在 event.target 是当前元素自身时触发事件处理函数 |
样例代码
<h4>① .prevent 事件修饰符的应用场景</h4>
<a href="https://www.baidu.com" @click.prevent="onLinkClick">百度首页</a>点击 a 标签后不会进行默认的跳转
2.3.3 按键事件修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
<!-- 处理函数只会在 $event.key 等于 PageDown 时被调用。 -->
<input v-on:keyup.page-down="onPageDown">Vue 提供了绝大多数常用的按键码的别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
你还可以通过全局
config.keyCodes对象自定义按键修饰符别名：Vue.config.keyCodes.f1 = 112
2.4 双向绑定指令
v-model 双向数据绑定指令，可以在不操作DOM的前提下，快速获取表单的数据
可使用的组件：
<input><select><textarea>- components
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值
而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。具体使用参见VUE官网 https://cn.vuejs.org/v2/guide/forms.html
修饰符
-
.lazy取代 input 监听 change 事件 -
.number输入字符串转为有效的数字 -
.trim输入首尾空格过滤
2.5 条件渲染指令
2.5.1 v-if / v-show
条件渲染指令可以按需控制DOM的显示与隐藏，有两个分别是v-if和v-show
测试样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="flag = !flag">Toggle Flag</button>
<p v-if="flag">请求成功 --- 被 v-if 控制</p>
<p v-show="flag">请求成功 --- 被 v-show 控制</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// flag 用来控制元素的显示与隐藏
// 值为 true 时显示元素
// 值为 false 时隐藏元素
flag: false,
},
})
</script>
</body>
</html>v-if 和 v-show的区别
实现原理不同
- v-if 指令会动态的创建或移除DOM元素，从而控制元素在页面上的显示与隐藏
- v-show 指令是利用元素的
display属性控制元素的显示与隐藏
性能消耗不同
v-if有更高的切换开销，而v-show有更高的初始渲染开销
2.5.2 v-else/v-else-if
v-else
前一兄弟元素必须有 v-if 或 v-else-if。
v-else-if
前一兄弟元素必须有 v-if 或 v-else-if。
测试样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="num > 0.5">随机数 ＞ 0.5</p>
<p v-else>随机数 ≤ 0.5</p>
<hr />
<p v-if = "type==='A'">优秀</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else-if="type === 'C'">一般</p>
<p v-else>差</p>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 生成 1 以内的随机数
num: Math.random(),
// 类型
type: 'A'
},
})
</script>
</body>
</html>2.6 列表渲染指令 v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 item in items，为当前遍历的元素提供别名。
- items 是待循环的数组
- item 是当前的循环项
另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>使用 key维护列表的状态
当列表的数据变化时，默认情况下，vue会尽可能的附庸已经存在的DOM元素，从而提升渲染的性能，这样会导致已经有状态属性的列表没有办法被正确的更新（比如已经被选中的单选框）
为了能追踪每个节点的身份，从而在保证有状态的列表被正确的 更新，需要为每项提供唯一的key属性
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：
v-for 中 key 的注意事项
- key 的值只能是字符串或者使数字类型，且必须唯一
- 使用index作为key值没有任何意义，因为其不具有唯一性
- 建议每次使用v-for指令时，都要指明key的值
2.7 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 |指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>全局过滤器：可以再多个vue实例之间共享
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})私有过滤器：在某个节点之下定义的过滤器，只能在当前vm控制的el区域内使用
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器可以串联：{{ message | filterA | filterB }}
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。
过滤器仅在vue2和vue1中受支持，在vue3版本中被剔除
