1、Mustache语法基本使用
<h1>{{message}}</h1> <!--不仅可以写变量，也可以写简单的表达式--> <h1>{{firstName + ' ' + lastName}}</h1> <h1>{{firstName}} {{lastName}}</h1> <h1>{{weight * 2}}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', firstName: 'qi', lastName: 'lili', weight: 20 } }) </script>
2、v-once
- 定义的表达式或者组件只会渲染一次，首次渲染后，不再随着数据的改变而再次渲染
<div id="app" > <h2>{{message}}</h2> <h2 v-once>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' } }) </script>
如上图，当改变message的值后，不会再次进行渲染
3、v-html
- 当我们想要被渲染的东西以html的形式展示时，就用到了这个指令
<div id="app"> <h1 v-html="url"></h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', url:'<a href="https://www.baidu.com">百度一下</a>' } }) </script>
4、v-test
- 这个指令也是渲染数据的，不加{{}}，与直接写在标签体内{{变量名}}不同的是，它会直接替换标签中间的内容，而{{变量名}}的形式可以追加
<div id="app"> <h2>{{message}},齐菁菁</h2> <h2 v-text="message">,齐菁菁</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' } }) </script>
5、v-pre
- 当你想输出不被解析的纯文本时
<div id="app"> <h2>{{message}}</h2> <h2 v-pre>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' } }) </script>
6、v-cloak
- 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
<style> [v-cloak]{ display: none; } </style> <div id="app" v-cloak>{{message}}</div> <script src="../js/vue.js"></script> <script> /*延迟1s*/ setTimeout(function (){ const app = new Vue({ el: '#app', data: { message: 'hello' } }) },1000) </script>
