一起学Vue之模板语法
2024-09-01 21:41:33
概述
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
普通文本
数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
<span>{{msg}}</span>
通过使用 v-once 指令，执行一次性插值，当数据改变时，内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
输出Html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<!-- 普通文本 -->
<p>Using mustaches: {{ rawHtml }}</p>
<!-- html解析 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
<button v-bind:disabled="isButtonDisabled">Button</button>
注意：如果 isButtonDisabled 的值是 null、undefined 或 false， 则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。 只有为true ,才被渲染。
使用 JavaScript 表达式
不仅能绑定简单的属性键值，还提供了完全的 JavaScript 表达式支持。
如下所示：
HTML{{ number + 1 }}
<br />
{{ ok ? 'YES' : 'NO' }}
<br />
{{ message.split('').reverse().join('') }}
<br />
<div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
注意： 每个绑定都只能包含单个表达式，语句不会生效。
指令
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
<p v-if="seen">现在你看到我了</p>
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
<a v-bind:href="url" target="_blank">点击链接Baidu</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。 另一个例子是 v-on 指令，它用于监听 DOM 事件：
<button v-on:click="doSomething">点击弹出框</button>
动态参数
你可以使用动态参数为一个动态的事件名绑定处理函数：在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
<a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
<br />
<a v-on:[eventname]="doSomething"> ... </a>
注意，参数表达式的写法存在一些约束：
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。 除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>
指令缩写
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
<!-- v-bind 缩写 -->
<!-- 完整语法 -->
<a v-bind:href="url" target="_blank">完整写法</a>
<!-- 缩写 -->
<a :href="url" target="_blank">缩写法</a>
<!-- v-on 缩写 -->
<!-- 完整语法 -->
<button v-on:click="doSomething">完整写法</button>
<!-- 缩写 -->
<button @click="doSomething">缩写法</button>
关于本例子中的完整代码，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一起学Vue</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
<body>
<div id="app">
<!--
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
-->
<h2>普通文本</h2>
<!--
数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括号) 的文本插值，无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新
-->
<span>{{msg}}</span>
<br />
<!--
通过使用 v-once 指令，执行一次性插值，当数据改变时，内容不会更新。
-->
<span v-once>这个将不会改变: {{ msg }}</span>
<h2>输出Html</h2>
<!--
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。
请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
-->
<!-- 普表文本 -->
<p>Using mustaches: {{ rawHtml }}</p>
<!-- html解析 -->
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<h2>特性</h2>
<!--
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
-->
<div v-bind:id="dynamicId">我的ID是{{dynamicId}}</div>
<!--
如果 isButtonDisabled 的值是 null、undefined 或 false，
则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。
只有为true ,才被渲染
-->
<button v-bind:disabled="isButtonDisabled">Button</button>
<h2>使用 JavaScript 表达式</h2>
<!--
每个绑定都只能包含单个表达式，语句不会生效。
我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
-->
HTML{{ number + 1 }}
<br />
{{ ok ? 'YES' : 'NO' }}
<br />
{{ message.split('').reverse().join('') }}
<br />
<div v-bind:id="'list-' + id">我的id是 list-{{id}}</div>
<!-- 这是语句，不是表达式 -->
<!-- {{ var a = 1 }} --> <!-- 流控制也不会生效，请使用三元表达式 -->
<!-- {{ if (ok) { return message } }} -->
<h2>指令</h2>
<!--
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
-->
<p v-if="seen">现在你看到我了</p>
<h2>参数</h2>
<!--
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：
-->
<a v-bind:href="url" target="_blank">点击链接Baidu</a>
<!--
在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
-->
<br />
<button v-on:click="doSomething">点击弹出框</button>
<h2>动态参数</h2>
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributename]="url" target="_blank"> 点击我进入 </a>
<!--
你可以使用动态参数为一个动态的事件名绑定处理函数：
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
-->
<br />
<a v-on:[eventname]="doSomething"> ... </a>
<!--
在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，
因为浏览器会把 attribute 名全部强制转为小写：
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。 -->
<h2>修饰符</h2>
<!--
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
-->
<a v-bind:href="url" target="_blank" v-on:click.prevent="doSomething">点击链接Baidu</a>
<h2>缩写</h2>
<!--
Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
-->
<!--
v-bind 缩写
-->
<!-- 完整语法 -->
<a v-bind:href="url" target="_blank">完整写法</a>
<br />
<!-- 缩写 -->
<a :href="url" target="_blank">缩写法</a>
<br />
<!--
v-on 缩写
-->
<!-- 完整语法 -->
<button v-on:click="doSomething">完整写法</button>
<br />
<!-- 缩写 -->
<button @click="doSomething">缩写法</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
msg:'hello world!!!',
rawHtml:'<span style="color:red;"> 这应该是红色</span>',
dynamicId:'div001',
isButtonDisabled:true,
number:4,
ok:true,
message:'welcome to vue!!!',
id:'01',
seen:true,
url:'http://www.baidu.com',
attributename:'href',
eventname:'click'
},
methods:{
doSomething:function(){
alert('hello world!!!');
}
}
});
</script>
</body>
</html>
备注
学而时习之，不亦悦乎！
最新文章
- Qt下的udp编程
- 使用docker exec 就可以进入container，例如：docker exec -it <container_id> /bin/bash
- CI重定向：php（codeigniter）中如何重定向
- C# 修改电脑DNS和IP方法
- Sublime Text 3 常用插件以及安装方法
- [SQL]SUTFF内置函数的用法 (删除指定长度的字符并在指定的起始点插入另一组字符)
- xfire找不到services.xml
- Linux —— Shell编程之变量赋值和引用
- Baidu Sitemap Generator插件使用图解教程
- DataTable去除重复行
- 面向对象---final关键字
- weblogic 双机集群搭建
- 学问Chat UI(3)
- efcore migration
- 高级组件——选项卡面板JTabbedPane
- 使用 Quartz.NET 实现作业串行执行
- JAVA虚拟机关闭钩子(Shutdown Hook)
- sprint2（第六天）
- bzoj 4237: 稻草人 -- CDQ分治
- console.log篇
热门文章
- (五)OpenStack---M版---双节点搭建---Nova安装和配置
- Stream系列（七）distinct方法使用
- Selenium+Java（二）Selenium打开IE浏览器
- 豆瓣 URLError: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:719)>
- VS Code实现markdown画流程图
- Python使用百度地图API根据地名获取相应经纬度
- mac 终端高亮显示~
- Calling the Web Service dynamically (.NET 动态访问Web Service)
- 阿里巴巴 Service Mesh 落地的架构与挑战
- ubuntu 下 shell 搜索命令