文章目录
前言
在Vue中,模板语法 的使用是频繁的。
一、插值
1.插值语法
插值语法用于文本的插入,数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新。也就是数据的动态绑定。
值得注意的是插值语法中可以使用JavaScript的表达式。
主要用于解析标签体内容。
2.指令语法
用于解析标签(标签属性、标签体内容、绑定事件…)
(1)数据绑定指令
v-bind:(单向数据绑定)
v-bind指令可以用于响应式地更新 HTML attribute。
data中的数据改变可以影响页面数据,但反过来不行。
<a v-bind:href="url">...</a>
其中href为参数,url是绑定的值,该指令也可以简写为“:”
<a :href="url">...</a>
v-model:双向数据绑定)
该指令只能用于表单类元素(input、select等),也就是拥有value的标签,v-model实际上是通过标签value值来控制标签内容。
<input type=‘button' v-model:value='name'/>
也可以简写为:
<input type=‘button' v-model='name'/>
改变输入框的值也会 影响data中的值,反过来也可以。
(2)事件监听指令
v-on:(事件监听)
用于事件的触发监听来执行对应的JS表达式。
<input type=‘button' v-on:click='num++'/>
监听了点击事件使num每点击一下+1,也可以是一个函数
<button v-on:click='say()'>Say hi</button>
该指令也可以简写为“@”
<input type=‘button' @click='num++'/>
(3)条件渲染指令
v-if、v-else-if、v-else
和判断相同根据表达式值在DOM中渲染或销毁元素或组件
v-else是没有判断条件的,如果你加上去不会影响得到的结果
<p v-if="flag===‘晴’">今天大晴天</p>
<p v-else-if="flag==='多云'">今天多云</p>
<p v-else>今天下雨</p>
v-show
和v-if类似,根据表达式的值控制标签或者组件的显示与隐藏。
<p v-show="flag">今天要下雨</p>
<p v-show="!flag">今天不要下雨</p>
(4)内容渲染指令
v-text
v-text用法简单,只能用来渲染纯文本内容,如下:
<p v-text="username"></p>
他的缺点是他会直接覆盖掉原来标签里的内容。
v-html
如果要渲染带包含html标签的内容,可以使用v-html
<div v-html="content"></div>
const vm = new Vue({
el: "#app",
data: {
content: "<h1>你好</h1>"
}
})
(5)列表渲染指令
v-for
需要生成多个某个标签,就可以在该标签上加入v-for进行动态生成,v-for可以遍历数组、对象、字符串以及指定次数(将in或of后边换成数字即可),v-for可以接收两个参数,其中第一个为每一项,第二个是当前索引值。
具体语法如下:
<ul>
<li v-for="(item,inex) in 某个数据集合" :key="index">
{{形参.数据集合的属性}}
</li>
</ul>
in也可以换成of,某些版本可能不行
对于绑定的key(标识符)的使用存在着一些问题,后面可能会在其它文章中体现。
指令间的小tips
1.v-if和v-show
(1)v-if和v-show的区别:
- v-if控制元素是否渲染到页面(是否创建)
- v-show控制元素是否显示(已经创建,是否显示)
(2)v-if和v-show如何选择:
- 当频繁的切换显隐时使用v-show
- 只有一次的切换时使用v-if
2.v-if和v-for
v-if的优先级是没有v-for的高的,也就是说将两个指令用在同一个标签上时,会先进行循环,再进行判断。
这样做会导致性能受到影响。
在源码中可以发现,他判断的顺序是:once–>for–>if(也就不难理解为什么for的优先级会比if高了)
export function genElement(el: ASTElement, state: CodegenState): string {
if (el.parent) {
el.pre = el.pre || el.parent.pre
}
if (el.staticRoot && !el.staticProcessed) {
return genStatic(el, state)
} else if (el.once && !el.onceProcessed) {
return genOnce(el, state)
} else if (el.for && !el.forProcessed) {
return genFor(el, state)
} else if (el.if && !el.ifProcessed) {
return genIf(el, state)
} else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
return genChildren(el, state) || 'void 0'
} else if (el.tag === 'slot') {
return genSlot(el, state)
} else {
// component or element
let code
if (el.component) {
code = genComponent(el.component, el, state)
} else {
let data
const maybeComponent = state.maybeComponent(el)
if (!el.plain || (el.pre && maybeComponent)) {
data = genData(el, state)
}
let tag: string | undefined
// check if this is a component in <script setup>
const bindings = state.options.bindings
if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
tag = checkBindingType(bindings, el.tag)
}
if (!tag) tag = `'${el.tag}'`
const children = el.inlineTemplate ? null : genChildren(el, state, true)
code = `_c(${tag}${
data ? `,${data}` : '' // data
}${
children ? `,${children}` : '' // children
})`
}
// module transforms
for (let i = 0; i < state.transforms.length; i++) {
code = state.transforms[i](el, code)
}
return code
}
}
如果想一起使用,可以在标签外层嵌套一层,将v-if绑定在外层。
3.v-on事件修饰符
事件修饰符可以多个一起用(如:事件.prevent.stop)。
- @事件.prevent:阻止默认事件
- @事件.stop:阻止事件冒泡(在包含关系中不同标签上有相同的触发函数,导致这两个被关联起来)
- @事件.once:事件只触发一次
- @事件.capture:使用事件捕获模式
- @事件.self:只有event.target是当前操作的元素才触发事件
- @事件.passive:事件的默认行为立即执行,无需等待事件回调执行
3.v-on键盘事件
@keyup:按键放开触发
@keydown:按键按下触发
几个按键也可以同时使用(如:@keyup.ctrl.y)。
根据按键触发:
@keyup.按键别名
常用按键别名:
- 回车:enter
- 删除:delete
- 退出:esc
- 空格:space
- 换行:tab(只能配合@keydown中使用)
- 上:up
- 下:down
- 左:left
- 右:right
获取按键名称或者编码:
show(e){//事件调用函数
e.key;//按键名称
e.keyCode;//按键编码
}
系统修饰键(特殊):ctrl、alt、shift、meta
配合keyup使用时必须同时按下其它键,释放后才会触发,keydown中正常。
Vue自定义别名按键
Vue.config.keyCodes.自定义键名=键码;
总结
以上就是今天要讲的内容,本文简单介绍了Vue的模板语法,以及常用的指令语法