Vue学习笔记day01：插值的操作、动态绑定属性

插值操作：

1. mustache：语法：

   <!--mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
     <h2>{
        
        {firstName + lastName}}</h2>
     <h2>{
        
        {firstName + ' ' + lastName}}</h2>
     <h2>{
        
        {firstName}}  {
        
        {lastName}}</h2>
     <h2>{
        
        {counter * 2}}</h2>

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: '你好啊',
       }
     })
   </script>

   但是在控制台改变message的值带v-once的标签则不会改变：

3. 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>

   

4. v-text： 作用和Mustache比较相似：都是用于将数据显示在界面中
5. v-pre：用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
6. v-cloak：
   在某些情况下，我们浏览器可能会直接显然出未编译的 Mustache 标签。
   cloak : 斗篷

 

 

动态绑定属性：

1. v-bind的基本使用：                              
2. v-bind动态绑定class(对象语法)：
3. v-bind动态绑定class(数组语法)：                                                        对象语法与数组语法的区别： 一个可以根据动态来调整绑定的class样式，而数组则是绑定数组中有的所有样式；
4. v-bind动态绑定style（对象语法）：
5. v-bind动态绑定style（数组语法）：