插值操作:
-
mustache:语法:
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--> <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{counter * 2}}</h2>
-
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: '你好啊', } }) </script>
但是在控制台改变message的值带v-once的标签则不会改变:
-
v-html指令:将字符串中的html代码解析为html展示
<div id="app"> <h2>{{url}}</h2> <h2 v-html="url"></h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message: '你好啊', url: '<a href="http://www.baidu.com">百度一下</a>' } }) </script>
-
v-text: 作用和Mustache比较相似:都是用于将数据显示在界面中
- v-pre:用于跳过这个元素和它子元素的编译过程,用于显示原本的Mustache语法。
- v-cloak:
在某些情况下,我们浏览器可能会直接显然出未编译的 Mustache 标签。cloak : 斗篷
动态绑定属性:
- v-bind的基本使用:
- v-bind动态绑定class(对象语法):
- v-bind动态绑定class(数组语法): 对象语法与数组语法的区别: 一个可以根据动态来调整绑定的class样式,而数组则是绑定数组中有的所有样式;
- v-bind动态绑定style(对象语法):
- v-bind动态绑定style(数组语法):