java-microservice-01-vue-05-template
模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>
<div id="d1">
<!-- 不论数据发生多少次改变，只替换一次 -->
<div v-once>{{msg}}</div>
<!-- 随数据变化替换 -->
<div>{{msg}}</div>
<div>{{rawHtml}}</div>
<!-- 替换为html，而不是字符串 -->
<div v-html="rawHtml"></div>
<!-- 绑定html属性，此例绑定class属性 -->
<div v-bind:class="color">{{msg}}</div>
<!-- 模板中使用js表达式 -->
<div>{{1==2?"yes":"no"}}</div>
<div v-if="show">显示一行文字</div>
<div v-on:click="click1()">
<!-- 用stop修饰后，点击事件将不再传递到外层 -->
<div v-on:click.stop="click2()">点击</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#d1",
data: {
msg: "1",
rawHtml: "<span style='color: red'>This should be red.</span>",
color: "blue",
show: false
},
methods: {
click1: function() {
console.log("click1")
},
click2: function() {
console.log("click2")
}
}
})
vm.$data.msg = "2";
</script>
<style type="text/css">
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</body>
</html>
预览结果如下：
解析：
- 双大括号语法： 随绑定的数据源响应式插值，例子中，msg由1->2，页面上也响应式发生变化。
- v-once指令： 只执行一次响应式插值，例子中，msg由1->2，页面不会再响应变化。
- v-html指令： 可以插值为HTML对象，而不是默认的字符串。
- v-bind绑定属性： 冒号后面接属性名。
- 双大括号中使用js表达式： 注意只允许单个表达式。
- v-if条件指令： 根据参数真假判断是否要显示当前节点。
- v-on事件： 例子中为点击事件，内层点击事件后跟上.stop来终止当前事件传递到外层。