一,插值操作
-
这种语法叫做
Mustache
语法
中文叫做胡子的意思,两个 {{}} 长的比较像胡子,所以这样命名了
<body> <div id="app"> <p>{{ message }}</p> <!-- 直接在模板里面写 --> <p>{{ message + ' ' + message }}</p> <!-- 进行字符串的 + 操作 --> <p>{{ (num+10) * 2 }}</p> <!-- 数字相乘 --> <p>{{ message }} {{ message }}</p> <!-- 两个插值 --> </div> <script src="VueJs/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', num: 0 } }) </script> </body>
-
涉及插值操作的指令
-
v-once
我们知道,在Vue里面,所有的数据都是响应式的,我们不想让某些数据发生改变,就需要用到这个指令
添加该属性的DOM元素,该DOM元素内的**{{}}里面的值不会发生改变**
<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', } }) </script>
-
v-html
有时候服务器给我们返回的不是数据二十一串html的字符串,我们想把他转换成DOM元素放到页面中
<div id="app"> <h2>{{ message1 }}</h2> <!-- 显示错误 --> <h2 v-html="message2"></h2> <!-- 显示成功 --> </div> <script> var app = new Vue({ el: '#app', data: { message1: '<a href="https://www.baidu.com">百度</a>', message2: '<a href="https://www.baidu.com">百度</a>', } }) </script>
-
v-text
把文本数据覆盖到DOM元素中,如果原先要填充的DOM元素中有另外的文本也会被覆盖
-
v-pre
不对 {{}} 里面的值进行解析,数据原封不动展现出来
<div id="app"> <h2>{{ message }}</h2> <h2 v-pre>{{ message }}</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: '你好呀', } }) </script>
-
v-cloak
有些情况下,浏览器可能还没有解析出我们编写的 ViewModel ,页面会直接显示处未渲染的 {{ data }}
使用该指令可以解决问题
<style> [v-cloak] { display: none; } </style> <div id="app"> <h2 v-cloak>{{ message }}</h2> <!-- 等到数据渲染之后,v-vloak这个属性会消失 --> </div> <script> setTimeout(function() { var app = new Vue({ el: '#app', data: { message: 'Hello Vue' }, }) }, 1000) </script>
-