java-microservice-01-vue-05-template

最新推荐文章于 2024-07-19 22:21:16 发布

zhoux_top

最新推荐文章于 2024-07-19 22:21:16 发布

阅读量451

点赞数

分类专栏： java 文章标签： vue.js java javascript

本文链接：https://blog.csdn.net/HenryChow_2015/article/details/122583798

版权

java 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>

预览结果如下：