Vue3x基础 - 模板语法

模板语法

Vue.js是以HTML为基础的模板语法,它允许你声明式的将底层组件实例的data数据绑定到渲染的DOM。所有的Vue.js模板都是合法的HTML,可以被标准浏览器或HTML解释器识别。

在底层,Vue将模板编译成虚拟DOM渲染函数。结合系统响应方面,当场景发生变化时,Vue巧妙的用最少的重新渲染组件最少操作DOM次数提升运行效率。

如果你熟悉虚拟DOM以及喜欢原生JavaScript,你也可以直使用JSX支持编写渲染函数来替代模板。

插值

文字

文字是使用最多的基础表单绑定数据,使用"Mustache"语法(双花括号):
<span>Message: {{ msg }}</span>
双花括号标签会被相关实例中的msg```变量值所替换。当实例中msg发生变化时,模板中的内容也会同步更新。也可以使用v-once指令对插值做一次性绑定,当data中的msg发生变化时,模板不会更新。但是需要注意,这也会影响到同一节点下的其他绑定。<span v-once>Message: {{ msg }}</span>```

原生HTML

双花括号插值只能显示静态文本,不能解释HTML。如果想输出真正的HTML,你可以使用v-html指令:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue demo3</title>
    <script src="https://unpkg.com/vue@next"></script>
   </head>
   <body>
        <div id="app">
            <p>静态文本插值:{{ rawHTML }}</p>
            <p>使用v-html指令:<span v-html="rawHTML"></span></p>
        </div>
   </body>
   <script type="text/javascript">
    const app = {
        data() {
            return {
                rawHTML : '<span style="color: red">这段文字应该展示成红色.</span>'
            }
        },
    }
    Vue.createApp(app).mount("#app")
   </script>
</html>

运行结果如下图:


image.png

span标签的内容将会被rawHTML值替换掉,静态文本插值--数据绑定被忽略。注意,你不能通过v-html来对合成局部模板,因为Vue不是基于字符串的模板引擎。对于一些需要重复使用的需要组合的界面UI,可以使用组件来代替。

提示
站点中动态渲染任意HTML是非常危险的,因为很容易导致XSS攻击。只渲染受信任的内容,永远不要相信用户输入。

属性

Mustaches语法不能用于HTML属性,应用使用v-bind指令代替:

<div v-bind:id="dynamicId"></div>

如果被绑定的值是nullundefined,这个属性将不会被渲染到该标签。

布尔值因为只要存在就可以被认为是true``,v-bind```的工作方式有一点不同:

<button v-bind:disabled="isButtonDisabled">btn</button>

只要isButtonDisabled有值disabled属性就会被包含进来,甚至是一个空字符串也会被解释成disabled=""。对于其他错误的值,该属于将被忽略掉。

使用JavaScript表达式

到目前为止,我们还是只在模板中绑定简单的属性键,实际上Vue.js可以绑定所有JavaScript表达式。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-'+id"></div>

这些表达式都会在当前活动实例的数据域中以JavaScript方式进行执行。有一个约束是一个绑定只能包含一个简单的表达式,所以下面的表达式不会被执行:

<!-- 这是一个赋值语句,不是一个表达式 -->
{{ var a = 1 }}
<!-- 流程控制也不会被执行,可以使用三元表达式来替代 -->
{{ if(ok) { return message }

指令

指令是有v-前缀的特殊属性。指令值一般是一个简单的JavaScript表达式(v-forv-on除外,后面再讨论)。指令的作用是当值发生改变时需要响应式的影响到界面的DOM上,我们来复习一下在介绍章节中的一个小示例:

<p v-if="seen">看不见我?看的见我?</p>

这里v-if指令的作用是,通过控制seen真或假,来插入/删除p标签。

指令-参数

一些指令可以通过在指令名的后加冒号来携带一个“参数”,例如v-bind指令可以响应式的更新HTML属性。

<a v-bind:href="url">...</a>

这里href就是参数,它告诉v-bind指令通过url变量来绑定href标签属性。
还有一个就是v-on指令,用来监听DOM的事件:

<a v-on:click="doSomething">点我</a>

这里的参数用来监听事件。我们在后面会讨论事件。(doSomething可以在methods中定义一个方法就可以了)

指令-动态参数

同时指令也支持用方括号来包裹一个JavaScript动态的表达式指令参数:

<!--
注意有一些动态参数的约束,将会在下面的《动态表达式参数约束》中解释
-->
<a v-bind:[attributeName]="url">...</a>

这里attributeName会通过JavaScript表达式动态指定,表达式结果将会作为指令的最终参数。例如你的组件实例有一个数据属性attributeName,而它的值是href,上面这条绑定就等价于v-bind:href
相似的,你可以通过动态属性绑定一个事件名:

<a v-on:[eventName]="doSomething">....</a>

在这个例子中,如果eventName值是focus,则v-on:[eventName]等价于v-on:focus

指令-修饰符

修饰符是在指令加一个点号后缀,表明这个指令将以特殊的方式进行绑定。举个例子,prevent修饰符是告诉指令当事件被触发时,将会调用event.preventDefault()方法。

<form v-on:submit.prevent="onSubmit">...</form>

如果你想研究v-on、```v-model``的修饰符功能,后面会有这方面的例子。

缩写

v-前缀,可视化的表明是模板中一个特殊的Vue属性。这在你想用Vue.js标识一些动态行为时很有用处,但对一些频繁用到的指令来说就比较繁琐了。同时,当Vue管理所有模板时,构建SPA(单页面应用),v-前缀的需求就没有那么重要了。因此Vue为经常用到的两个指令v-bindv-on提供了缩写:
v-bind 缩写

<!-- 完整写法 -->
<a v-bind:href="url">...</a>
<!--缩写-->
<a :href="url">...</a>
<!-- 动态参数缩写 -->
<a :[key]="url">...</a>

v-on 缩写

<!-- 完整写法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数缩写 -->
<a @[event]="doSomething">...</a>

这看起来跟普通HTML有一点区别,但:@是合法的字符,属性名和所有Vue支持的浏览器上都能被正确解释。另外,他们不会出现在最终渲染标记中。缩写是一个可选项,但随着学习的深入你会喜欢上缩写的。

后面章节中示例中,我们会使用缩写,这是Vue开发人员通用使用方式。

警告

动态参数值约束
动态参数值期望是一个字符串,null例外。null比较特殊,会移除绑定。所有非字符串值将会触发一个告警。
动态参数表达式约束
因为某些字符,动态参数表达式有一些语法上的约束,比如空格和引号,是不能作为HTML属性名的。下面的例子是不合法的:

<!-- 这是触发编译器警告 -->
<a v-bind:['foo' + bar]="value">...</a>

我们推荐用计算属性来替代复杂表达式,计算属性是Vue非常重要的部分,马上就会学习到。
当使用内联DOM模板(在HTML中直接写模板)时,应当避免在关键字上使用大写字母,浏览器会将大写字母纠正为小写:

<!--
    内联模板会转换为:v-bind:[someattr]。
    除非在你的实例中有“someattr”属性,否则代码不会运行通过。
-->
<a v-bind:[someAttr]="value">...</a>

JavaScript表达式
模板表达式是沙箱,且只允许访问白名单中的全局变量,如MathDate。你不应该在模板表达式中尝试访问用户自定义的全局变量。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容