Vue官网学习(模板语法:一、{{}}双大括号语法)
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。这是官网对模板的介绍,今天就来学习一
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
这是官网对模板的介绍,今天就来学习一下Vue的模板语法:
1、文本“Mustache”语法 (双大括号)
<span>Message: {{ msg }}</span>
msg是Vue示例中data属性里面的一个属性名称,如果此属性值改变,那么上面的值也会改变。
写个简单的demo来演示一遍:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双大括号语法</title>
</head>
<body>
<div id="app">
<div>Message :{{msg}}</div>
<button @click="changeMsg">改变值</button>
</div>
</body>
<script src="../static/js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: "我是双大括号语法"
},
methods: {
changeMsg(){
this.msg = "我是改变后的值"
}
}
})
</script>
</html>
@click:给元素添加点击时间,
el:把dom对象托管给Vue来管理,这个必须加,不然Vue无法识别。
data:Vue中存放数据的
methods: 存放方法的,比如上面的@click="changeMsg"可以理解为点击按钮之后调用methods下面的changeMsg方法。这里changeMsg方法使用的ES6的语法
点击改变值按钮之后:
这种响应是编程和以前的编程式便捷了很多.
2、v-once(一次性地插值)
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时,绑定的数据对象上 msg property 发生了改变,插值处的内容都会更新,进行从新渲染。
v-once修饰的模板只渲染一次,后面对应的属性值改变,他不会重新渲染改变。
<div v-once>Message :{{msg}}</div>
如果上面的例子加上v-once修饰之后,我们的点击修改值的方法,方法能够生效,Vue实例中的值也会改变,但是它不会重新渲染。
更多推荐
所有评论(0)