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