Java教程

java-microservice-01-vue-05-template

本文主要是介绍java-microservice-01-vue-05-template，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>
预览结果如下：
解析：
  1. 双大括号语法：
    2. 随绑定的数据源响应式插值，例子中，msg由1->2，页面上也响应式发生变化。
  2. v-once指令：
    3. 只执行一次响应式插值，例子中，msg由1->2，页面不会再响应变化。
  3. v-html指令：
    4. 可以插值为HTML对象，而不是默认的字符串。
  4. v-bind绑定属性：
    5. 冒号后面接属性名。
  5. 双大括号中使用js表达式：
    6. 注意只允许单个表达式。
  6. v-if条件指令：
    7. 根据参数真假判断是否要显示当前节点。
  7. v-on事件：
    8. 例子中为点击事件，内层点击事件后跟上.stop来终止当前事件传递到外层。
这篇关于java-microservice-01-vue-05-template的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航