Vue笔记2-模板语法

01 插值操作

1.1 mustache语法

mustache 胡子 {{}}

插值操作也称mustache语法，也叫作双大括号语法

mustache的双大括号里可以写简单变量或表达式，

当然，算术表达式也可以由Vue option中的计算属性来声明

1.2 插值指令

v-once

vue属于响应式框架，所以一旦通过插值的数据发生改变，页面上的内容也就随之改变，

如果我们只希望后台的数据变化，而不改变前台显示的内容，可以使用v-once（单次渲染不刷新）

<div v-once>{{message}}</div>

v-html

某些网络请求时的超链接路径数据可能因为格式不统一的原因，有的是带标签的，还有纯链接，

使用v-html可以对被a标签包裹的链接进行解析（感觉不实用）

<div v-html="url"></div>

url='<a href="www.ElectricDuck.com"></a>'

v-text

功能和mustache语法类似还没mustache语法灵活（所以说可以不用）

<p v-text="message"></p>

v-pre

类似于预定义格式文本标签<pre>，

能忽视mustache语法的双大括号原封不动的显示出内容

<pre>
         Hello World
       Hello      World
      Hello        World
      Hello        World
      Hello        World
      Hello        World
        Hello     World
         Hello World
 </pre>
 <p v-pre>
    {{message}}
 </p>

v-cloak

cloak 斗篷，披风，遮盖

如果vue实例创建的代码写在html标签创建dom元素之下，

由于html从上至下解析代码的特点，刚开始在网页创建dom元素会直接把mustache语法的内容原封不动的解析出来。

如果这时网络或者浏览器出了啥问题，比如vue实例创建渲染的过程卡顿了，用户就会一脸费解的看着一屏幕的{{....}}

为了给一开始的mustache语法遮羞，就出现了v-cloak，相当于vue的内衣

在vue解析之前，被v-cloak标记的dom元素会有一个属性即v-cloak，

在vue解析之后，这个v-cloak就没了，

所以就能利用这一点对vue解析前的页面做些遮盖定制啥的（鸡肋）

02 v-bind动态绑定

2.1 介绍

v-bind动态绑定属性指令

语法：[v-bind]:绑定属性名="值"

2.2 对象绑定属性

使用v-bind绑定class对象语法如下：

<div :class="{ classA:true , classB:isClassB }">
    {{message}}
</div>

data:{
    isClassB:true,
}

也可以将类属性值使用方法调用动态获取

<div v-bind:class="getClass()"></div>

data:{
    isClassA:true,
},
methods:{
    getClassA:function(){
        return {classA:this.isClassA};
    }
}

2.3 数组绑定属性

v-bind绑定数组语法如下所示

第一行：数组元素为常量类名，这种方式和直接添加class类无区别

第二行：数组元素为变量名，对应变化的类名

第三行：数组元素为从vue实例中请求来的数组

<div v-bind:class="['classA','classB']"></div>
<div :class="[classA,classB]"></div>
<div :class="getClass()"></div>

data:{
    classA:"styleA",
    classB:"styleB",
},
methods:{
    getClass:function(){
        return [this.classA,"classB"]
    }
}

2.4 动态绑定练习

 练习要求：ul中有几个li，点击哪一个，哪一个就变化，再点一下再变回来

方法一：js event查询方法

这种方法的特点是不需要创造额外的变量对监控元素进行识别，

直接对触发click的元素进行类查询，然后根据查询结果进行处理，

<div id="app">
    <ul>
        <li v-for="item in messageList" @click="liClick()" :class="'active':false">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            messageList:['messageA', 'messageB', 'messageC'],
        },
        methods:{
            liClick:function(){
                event.target.className.match("active")?
                event.target.className=event.target.className.replace(/active/g,''):
                event.target.className+=" active";
            }
        }
    })
</script>

方法二、index下标判断法

在data中引入了index记录active的下标，

但是实现的功能和方法一完全不同，只有一个元素能够active，并且再点击active元素时无法完成切换

<div id="app">
    <ul>
      <li v-for="(item, index) in messageList" @click="liClick(index)" :class="{'active':index==indexBefore}">{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            messageList:['messageA', 'messageB', 'messageC'],
            indexBefore:0,
        },
        methods:{
            liClick:function(index){
                this.indexBefore = index;
            }
        }
    })
</script>

2.5 动态绑定style

<div id='app'>
    <!-- 
      绑定对象语法：
        :style="{属性名:属性值,...}"
        属性名：驼峰标识法
        属性值：字符串（引号包裹）
      绑定数组语法：
        :style="[{属性名:属性值,...},{属性名:属性值,..},...]"
     -->
    <h1 :style="getStyleClass()">{{message}}</h1>
    <h2 :style="getStyleArry()">{{message}}</h2>
  </div>
  <script src="../../vueJs/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'Hello World',
        finalSize:30,
        finalColor:'red',
        //绑定数组中的类元素
        fontStyle:{fontSize:"50px", color:"blue"},
        backgroundStyle:{backgroundColor:"yellow"},
      },
      methods:{
        getStyleClass:function(){
          return {fontSize:this.finalSize+"px", color:this.finalColor}; //style类
        },
        getStyleArry:function(){
          return [this.fontStyle, this.backgroundStyle];  //style数组
        }
      }
    });
  </script>