Vue 模板语法

Vue.js使用基于HTML的模板语法,允许开发者声明式地将DOM绑定至地层Vue实例的数据.

所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析.

插值

文本

使用"Mustache"语法,使用双大括号----->{{}}

原始HTML

双大括号会将数据解释为普通文本,而非HTML代码.如果想输出真正的HTML,可以使用 v-html 指令:

 

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>原始 HTML</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- 这是原始也是 -->
        <p>这是原始文字的样式:<span style="color: red;">原始文字,红色字体</span></p>
        <div id="app">
            <p>这是数据通过 Mustache 语法渲染rawHtml表示的值,表现出来的样式:{{rawHtml}}</p>
            <p>这里的rawHtml表示的值,使用v-html 指令进行渲染的样式:<span v-html="rawHtml"></span></p>
            <p>----调皮一下---</p>
            <p><span v-html>{{rawHtml}}</span></p>
            <!-- 
            意犹未尽:
                v-html指令指向的变量的值,是最终需要渲染的HTML内容.
                以下形式是不能作为 html文本 解析的:
                <span v-html>{{rawHtml}}</span>
         -->
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    rawHtml: '<span style="color: red;">原始文字,红色字体</span>'
                },
            })
        </script>
    </body>
</html>
复制代码

 

 属性（Attribute）

如果HTML元素的属性是动态的，该怎么弄？

Mustache 语法不能作用在HTML attribute上，遇到这种情况应该使用 v-bind 指令：

<!-- id是动态的-->
<div v-bind:id='dynamicId' ></div>

当然，HTML的元素的属性有很多，同样可以在其他元素上，实现动态的绑定处理。

                              1、HTML 全局属性

属性描述
accesskey 设置访问元素的键盘快捷键。
class 规定元素的类名（classname）
contenteditable
 规定是否可编辑元素的内容。
contextmenu
 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-*
 用于存储页面的自定义数据
dir 设置元素中内容的文本方向。
draggable
 指定某个元素是否可以拖动
dropzone
 指定是否将数据复制，移动，或链接，或删除
hidden
 hidden 属性规定对元素进行隐藏。
id 规定元素的唯一 id
lang 设置元素中内容的语言代码。
spellcheck
 检测元素是否拼写错误
style 规定元素的行内样式（inline style）
tabindex 设置元素的 Tab 键控制次序。
title 规定元素的额外信息（可在工具提示中显示）
translate
 指定是否一个元素的值在页面载入时是否需要翻译

2、元素属性

如 img元素，常用的是src属性，v-bind:src  动态绑定图片url地址。

属性值描述
align top
bottom
middle
left
right		 HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
alt text 规定图像的替代文本。
border pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin
 anonymous
use-credentials		 设置图像的跨域属性
height pixels 规定图像的高度。
hspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap ismap 将图像规定为服务器端图像映射。
longdesc URL HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src URL 规定显示图像的 URL。
usemap #mapname 将图像定义为客户器端图像映射。
vspace pixels HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width pixels 规定图像的宽度。

使用JavaScript表达式

Vue的中Mustache 语法的{{}} （双大括号）支持JavaScript 表达式 ，注意是表达式， 不是语句！

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

 指令

指令是带有 v-  前缀额特殊 attribute.

指令attribute 的值预期是 单个 JavaScript 表达式.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地做用于DOM.

说白了,指令是 带有 v- 的 属性(attribute), 指令的值应该是一个JavaScript 表达式,不能是 语句. 作用是当 表达式的值发生改变时, 响应式对 含有 v- 属性 的元素做出 反应.

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

 

参数

 一些指令能够接收一个‘参数’，在指令名称之后以冒号表示。

例如：v-bind 指令可以用于响应式地更新HTML attribute：

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

这里的href 是参数，告知 v-bind指令 将该元素的的 href 属性（attribute）与 JavaScript 表达式 ‘url’的值 进行绑定关联。

v-bind 的参数可以选择哪些呢？ 参考上面的举例。

 

又例如：

 v-on 指令，它用于监听 DOM 事件

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

v-on 指令的参数 是 click，而与click 绑定的 JavaScript表达式，代表 一个事件函数的 名称！

 

 

缩写

#v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

#v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

 

总结一下就是：

v-bind === ：

v-on === @

 

posted @   疯人院code  阅读(134)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
· 零经验选手，Compose 一天开发一款小游戏！
点击右上角即可分享
微信分享提示