本文介绍了Vue的基础知识，特别是其指令系统，包括内容渲染（v-text、{{}}文本插值、v-html）、属性绑定（v-bind）、事件绑定（v-on）、双向绑定（v-model）、条件渲染（v-if/v-else/v-else-if/v-show）和列表渲染（v-for）。Vue的核心功能是声明式渲染和响应性，它提供了一套强大的模板语法和指令，方便开发者构建用户界面。
目录
v-else-if指令 提供的是相应于v-if 指令 的“else if 区块”。
什么是vue？
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
Vue 的两个核心功能：
-
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
-
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
vue的基本使用：
- 导入vue.js的script脚本文件
- 在页面中声明一个要被vue所控制的DOM区域
- 创建一个vm实例对象
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const vm = new Vue({ el:"#app", data:{ massage:'Hello Vue!' } }) </script>
el指定的选择器区域就是View视图区域，new Vue（）构造函数得到的vm实例对象就是ViewModel，data指向的对象就是Model数据源。
有一个小工具是vue-devtools调试工具可以在浏览器上安装使用，便于对vue进行调试和开发。
vue指令
指令是vue的模板语法，用于辅助开发者渲染页面的基本结构。
内容渲染指令
内容渲染指令用于辅助开发者渲染DOM元素的文本内容，
v-text
v-text指令会覆盖元素内默认的值。
{{}}文本插值
最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
<span>Message: {{ msg }}</span>
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 data中的msg 属性更改时它也会同步更新。
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需使用 v-html 指令
使用：
<div id="app">
<p v-text="username"></p>
<p v-text="gender">性别</p>
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<p v-text="desc"></p>
<p>{{desc}}</p>
<p v-html="desc"></p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zs',
gender: '男',
desc: '<i style="color:red;">abc<i>'
}
})
</script>属性绑定指令
v-bind 指令
如果需要为
元素的属性
动态绑定
属性值
，则需要用到
v-bind
属性绑定指令，（简写为英文的
:
或者 当使用
.prop
修饰符为
.
)
v-bind 动态的绑定一个或多个 attribute，也可以是组件的 prop。
v-bind 指令修饰符：
.camel- 将短横线命名的 attribute 转变为驼峰式命名。.prop- 强制绑定为 DOM property。（.prop修饰符也有专门的缩写.）.attr- 强制绑定为 DOM attribute。
<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />
<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc" />
<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />
<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
<!--.prop简写-->
<div :someProperty.prop="someObject"></div>
<!-- 等同于 -->
<div .someProperty="someObject"></div>
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
通过不带参数的 v-bind ，你可以将它们绑定到单个元素上
<div v-bind="objectOfAttrs"></div>
带参数在：后面添加参数
<div v-bind:id="dynamicId"></div>
使用 Javascript 表达式
在 vue 提供的模板渲染语法中，除了支持
绑定简单的数据值
之外，还
支持 Javascript 表达式的运算
。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
- 在文本插值中 (双大括号)
- 在任何 Vue 指令 (以
v-开头的特殊 attribute) attribute 的值中
<div id="app">
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<!-- 导入 vue 脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
number: 9,
ok: false,
message: 'ABC',
id: 3,
user: {
name: 'zs',
},
},
})
</script>结果：
动态绑定Class值 与 Style 样式
vue 允许开发者通过 v-bind 属性绑定指令，为元素动态绑定 class 属性的值和行内的 style 样式。
可以通过三元表达式，动态的为元素绑定 class 的类名。
如果元素需要动态绑定多个 class 的类名，也可以使用数组的语法格式 ；如果使用数组语法动态绑定 class 导致模板结构臃肿，那么此时可以使用对象语法进行简化。
可以使用:style {}的语法来给style动态绑定样式。
<template>
<div>
//数组方式
<h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3>
<h3 class="thin" :class="[isItalic ? 'italic' : '', isDelete ? 'delete' : '']">MyStyle 组件</h3>
<button @click="isItalic = !isItalic">Toggle Italic</button>
<button @click="isDelete = !isDelete">Toggle Delete</button>
//对象方式
<h3 class="thin" :class="classObj">MyStyle 组件</h3>
<button @click="classObj.italic = !classObj.italic">Toggle Italic</button>
<button @click="classObj.delete = !classObj.delete">Toggle Delete</button>
<hr />
<div :style="{ color: active, fontSize: fsize + 'px', 'background-color': bgcolor }">博客</div>
<button @click="fsize+=1">字号 +1</button>
<button @click="fsize-=1">字号 -1</button>
</div>
</template>
<script>
export default {
name: 'MyStyle',
data() {
return {
// 字体是否倾斜
isItalic: false,
// 是否应用删除效果
isDelete: false,
//绑定的对象
classObj: {
italic: false,
delete: false,
},
// 改变的文本颜色
active: 'red',
// 文字的大小
fsize: 30,
// 背景颜色
bgcolor: 'pink',
}
},
}
</script>
<style lang="less">
// 字体变细
.thin {
font-weight: 200;
}
// 倾斜字体
.italic {
font-style: italic;
}
.delete {
text-decoration: line-through;
}
</style>
事件绑定指令
v-on 事件绑定
vue 提供了
v-on 事件绑定
指令，用来辅助程序员为 DOM 元素绑定事件监听。（简写为英文的
@
）
注意：原生 DOM 对象有
onclick
、
oninput
、
onkeyup
等原生事件，替换为 vue 的事件绑定形式后，
分别为：
v-on:click
、
v-on:input
、
v-on:keyup
通过 v-on 绑定的事件处理函数，需要
在 methods 节点
中进行声明
<div id="app">
<h3>count 的值为：{{count}}</h3>
<!-- TODO：点击按钮，让 data 中的 count 值自增 +1 -->
<button v-on:click="addCount">+1</button>
</div>
<!-- 导入 vue 脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
// 数据源
data: {
// 计数器的值
count: 0,
},
methods: {
// 点击按钮，让 count 自增 +1
addCount() {
this.count += 1
},
},
})
</script>
事件对象 event
在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件对象 event。同理，在
v-on 指令
所绑定的事件处理函数中，
同样可以接收到事件对象 event
。
绑定事件并传参
在使用 v-on 指令绑定事件时，可以使用
( )
进行传参。
$event
$event
是 vue 提供的
特殊变量
，用来表示
原生的事件参数对象 event
。$event 可以解决事件参数对象 event 被覆盖的问题。
如：event被第一个参数2，覆盖掉了，那么要获取 event 对象则可以使用
$event
来传递。
<div id="app">
<h3>count 的值为：{{count}}</h3>
<button @click="addCount(2, $event)">+2</button>
</div>
<!-- 导入 vue 脚本文件 -->
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 创建 VM 实例对象
const vm = new Vue({
// 指定当前 VM 要控制的区域
el: '#app',
// 数据源
data: {
// 计数器的值
count: 0,
},
methods: {
addCount(step, e) {
const bgColor = e.target.style.backgroundColor
// e的.target属性获取事件目标 当前是获取button按钮 看按钮背景颜色是否为红色是则去掉，否则添加
e.target.style.backgroundColor = bgColor === 'red' ? '' : 'red'
this.count += step
},
},
})
</script>事件修饰符
在处理事件时调用
event.preventDefault() 或
event.stopPropagation() 是很常见的。
Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：
.stop 阻止事件冒泡.prevent 阻止默认行为 （如：阻止a连接的跳转，表单的提交等等）.self只监听触发该元素的事件（只有event.target是自身时才会触发事件处理函数）.capture 以捕获模式触发当前事件处理函数.once 绑定的事件只触发一次.passive一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。.left- 左键事件.right- 右键事件.middle- 中间滚轮事件
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>
按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />
按键别名
Vue 为一些常用的按键提供了别名：（只有键盘相关的事件才可以使用按键修饰符）
.enter.tab.delete(捕获“Delete”和“Backspace”两个按键).esc.space 空格.up.down.left.right
系统按键修饰符
你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。
.ctrl.alt.shift.meta在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。
<!-- 键盘按下Alt + Enter 时触发clear事件-->
<input @keyup.alt.enter="clear" />
<!-- 键盘按下 Ctrl + 点击 时触发doSomething事件-->
<div @click.ctrl="doSomething">Do something</div>
<div id="app">
<input type="text" @keyup.enter="submit" @keyup.esc="clearInput" />
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
// 获取文本框最新的值
submit(e) {
console.log('摁下了 enter 键，最新的值是：' + e.target.value)
},
// 清空文本框的值
clearInput(e) {
e.target.value = ''
},
},
})
</script>鼠标按键修饰符
.left.right.middle
这些修饰符将处理程序限定为由特定鼠标按键触发的事件。
双向绑定指令
v-model 在表单输入元素或组件上创建双向绑定。
用来辅助开发者在
不操作 DOM 的前提下，
快速获取表单的数据
注意：v-model 指令
只能
配合
表单元素
一起使用！
-
仅限：
<input>定义输入域<select>定义了下拉选项列表<textarea>定义文本域 (一个多行的输入控件)- components
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
将多个复选框绑定到同一个数组或集合的值：
注：复选框和下拉列表等选中后会将value值同步到v-model所绑定的数组或集合中。
<body>
<div id="app">
<div>Checked names: {{ checkedNames }}</div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
checkedNames :[]
},
})
</script>
</body>结果：
（checkbox没有value值选中时v-model所绑定的值会为null，select没有value值时选中绑定的值会为<option>标签里面的数据。）
注意：v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。
v-model 指令的修饰符
为了方便对用户输入的内容进行处理
，vue 为 v-model 指令提供了 3 个修饰符，
-
修饰符：
条件渲染指令
这块内容只会在指令的表达式返回真值时才被渲染。
v-if 指令 用于条件性地渲染一块内容。
v-if 指令会
动态地
创建或移除 DOM 元素
，从而控制元素在页面上的
显示与隐藏
；
v-else指令为 v-if 添加一个“else 区块”。
一个 v-else元素必须跟在一个 v-if 或者v-else-if元素后面，否则它将不会被识别。
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
v-else-if指令 提供的是相应于v-if 指令 的“else if 区块”。
它可以连续多次重复使用，和v-else类似，一个使用v-else-if 的元素必须紧跟在一个v-if 指令 或一个v-else-if元素后面。
v-show 指令 可以用来按条件显示一个元素
v-show
指令会
动态
为
元素添加或移除 style="display: none;" 样式
，从而控制元素的
显示与隐藏
；
且v-show不支持在
<template> 元素上使用，也不能和
v-else 搭配使用。
<h1 v-show="ok">Hello!</h1>
v-if 和 v-show 的区别（面试可能会被问到）
实现原理不同：
- v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
- v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
性能消耗不同：
- v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。（初始渲染开销：就是说初始为false时也会被渲染，只不过是隐藏了，而初始为false时v-if还没有被创建，那么就减少了性能消耗）
- 如果需要非常频繁地切换，则使用 v-show 较好
- 如果在运行时条件很少改变，则使用 v-if 较好
列表渲染指令
v-for 指令 基于一个数组来渲染一个列表
v-for 指令需要使用 item in items 的特殊语法，其中：
- items 是待循环的数组 (是源数据的数组)
- item 是当前的循环项 (是迭代项的别名)
<div v-for="item in items">
{{ item.text }}
</div>
v-for 指令还支持一个可选的第二个参数，即当前项的索引。
<div v-for="(item, index) in items"></div>注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。
如：为索引指定别名 (如果用在对象，则是键值)
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>
使用：
<div id="app">
<ul>
<li v-for="(user, i) in list">索引是：{{i}}，姓名是：{{user.name}}</li>
</ul>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 用户列表的数据
list: [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' },
],
},
})
</script>渲染出来的列表：
通过 key 管理状态
v-for的默认方式是尝试就地更新元素而不移动它们。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。 也就是说，在默认情况下，当列表的数据变化时，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
为了给 vue 一个提示，以便它能跟踪每个节点的身份，
从而在
保证
有状态的列表被正确更新
的前提下，
提升渲染的性能
。此时，需要为每项提供一个
唯一的 key 属性
：
哪一个容器使用v-for，key就应该被放置在哪一个容器上：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
注意：key 在这里是一个通过 v-bind 绑定的特殊 attribute（属性）。请不要和在 v-for 中使用对象里所提到的对象属性名相混淆。
同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。
key 的注意事项：
- key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型
- key 的值必须具有唯一性
- 建议把数据项 id 属性的值作为 key 的值，因为id是唯一的
- 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
- 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱，除非所迭代的 DOM 内容非常简单 ，例如：不包含组件或有状态的 DOM 元素，或者你想有意采用默认行为来提高性能。）
具体可见 简介 | Vue.js
扫一扫
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
