Vue学习笔记之02-Mustache语法以及一些指令

Mustache语法

• 又称大胡子语法 就是用两个大括号来包裹变量 从而挂钩Vue去解析里面的代码
• 比如

    <h2>{{message}}</h2>
    <!-- Mustache语法中不仅仅可以直接写变量, 还可以写一些简单的表达式 -->
    <h2>{{firstName + lastName}}</h2>
    <h2>{{firstName}} + ' ' + {{lastName}}</h2>
    <h2>{{first}} {{lastName}}</h2>
    <h2>{{counter * 2}}</h2>

v-once指令 (不是很常用)

• 在某些情况下, 有一些元素我们不想它响应式地根据数据的改变而改变的时候, 给这个元素加上v-once指令后, 它就只会渲染一次, 之后就不会再渲染

<div id="app">
    <h2>{{message}}</h2> // 这个元素会动态响应渲染
    <h2 v-once>{{message}}</h2> // 这个元素不会动态响应渲染
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好"
      }
    })
  </script>

v-html指令

• 有时候服务器端传过来的数据并不是一个字符串 而是一个html标签, 这个时候就可以用v-html指令来渲染这个标签
• v-html指令不用Mustache语法, 这是为了安全的考虑 而且这个指令一般用于信任的数据

<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url"></h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        url: "<a href='http://www.baidu.com'>百度一下</a>"
      }
    })
  </script>

v-test指令

• 因为会覆盖原来标签里面得内容,而且不能进行字符串的拼接, 所有很少使用

<div id="app">
    <h2>{{message}}</h2>
    <!-- 跟Mustache语法差不多, 但是Mustache语法用得多, 因为v-text使用不灵活, 会覆盖原来标签里面得东西 -->
    <h2 v-test="message"></h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好"
      }
    })
  </script>

v-pre指令

• 把标签里面的东西原封不动的显示在页面, 带有这个指令的标签不进行Vue的处理

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
    <!-- 这个标签里面的东西就不会进入Vue渲染了 -->
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好"
      }
    })
  </script>

v-cloak指令

• 在某些情况下, 浏览器可能会直接显示出未经过Vue渲染的代码
• v-cloak指令会在vue渲染之前存在, 而在vue渲染之后自动删除
• 利用这个特性, 可以将代码通过CSS的属性选择器先把代码隐藏起来, 在vue渲染之后删除了这个指令, 代码自动就显示出来了, 增强用户体验, 但是以后vue的代码会有更好的方法解决这个问题,所以这个指令也不常用

v-bind指令

• 想要动态绑定标签的属性值, 不能直接用mustache语法, 而要用v-bind指令前缀
• v-bind指令的语法糖是 :

<div id="app">
    <!-- 想要动态绑定标签的属性, 不可以直接用mustache语法, 而要用v-bind前缀 -->
    <img v-bind:src="imgUrl" alt="">
    <!-- 语法糖写法 -->
    <img :src="imgUrl" alt="">
    <!-- a标签也一样 -->
    <a v-bind:href="aHerf">百度一下</a>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        imgUrl: "https://cn.vuejs.org/images/logo.png",
        aHerf: "https://www.baidu.com"
      }
    })
  </script>

v-bind指令的对象语法 (用得较多)

• v-bind还可以动态地绑定class, 达到动态绑定样式的效果
• 动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},key是一个类名,value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加
• 动态绑定的class, 和静态的class可以共存的, 动态绑定的class不会覆盖静态的class

<div id="app">
    <!-- v-bind还可以动态地绑定class, 达到动态绑定样式的效果 -->
    <!-- 动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加 -->
    <h2 :class="{active : isActive, line : isLine}">你好呀</h2>
    <!-- 动态绑定的class, 和静态的class可以共存的, 动态绑定的class不会覆盖静态的class -->
    <h2 class="title" :class="{active : isActive, line : isLine}">你好呀</h2>
    <button @click="btnClick()">按钮</button>
    <!-- 如果class的内容过于复杂的话, 可以将class的内容放入methods中 -->
    <h2 :class="getClasses()">你好呀</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        isActive: true,
        isLine: true
      },
      methods: {
        btnClick: function () {
          this.isActive = !this.isActive;
        },
        getClasses : function () { // 调用这个方法的时候返回一个对象
          return {active : this.isActive, line : this.isLine} // 方法中调用变量记得要加this
        }
      }
    })
  </script>

v-bind绑定class的数组写法 (不常用)

• 特点跟对象写法差不多

<div id="app">
    <!-- 数组写法 跟对象写法差不多 -->
    <h2 :class="[active , line]">你好呀</h2>
    <!-- 注意数组中的元素加引号和不加引号的区别, 加引号表示一个字符串, 不加引号表示一个变量 -->
    <h2 :class="['active', 'line']"></h2>
    <!-- 跟对象一样如果class过于复杂也可以, 写到methods里面 -->
    <h2 :class="getClasses()"></h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        active: "aaa",
        line: "bbb"
      },
      methods: {
        getClasses: function () {
          return [this.active, this.line] // 方法中调用变量记得加this
        }
      }
    })
  </script>

用v-bind动态绑定style (对象写法, 常用)

• 与动态绑定class写法差不多, 传入一个对象{key(属性名) : value(属性值)}
• 动态绑定的与静态编写的不会覆盖

<div id="app">
    <!-- 跟动态绑定class差不多, 传入一个对象 {key(属性名) : value(属性值)} -->
    <h2 :style="{fontSize:'100px'}">你好呀</h2>
    <!-- 传入参数的时候, 要注意引号的添加, 不加引号代表一个变量, 加了引号代表一个字符串, 绑定多个style用逗号隔开即可 -->
    <h2 :style="{fontSize: finalSize, background : finalColor}">你好呀</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        finalSize: "100px", // 如果这里写的100 ,那么在标签内引入的时候记得要利用字符串拼接加上单位"px"
        finalColor: "red"
      }
    })
  </script>

用v-bind动态绑定style (数组写法, 我感觉这个写法很蠢, 不常用)

• 在数组中传入一个一个的对象, 对象是键值对写法, 与对象写法一致

<div id="app">
    <!-- 数组写法, 数组中传入一个对象,可以传入多个对象,逗号隔开, 对象写的是{key(属性名) : value(属性值)} -->
    <h2 :style=[baseStyle]>你好啊</h2>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        baseStyle: {
          backgroundColor: "red"
        }
      }
    })
  </script>