[Vue] : Vue指令

Vue指令之 `v-cloak`

v-cloak是解决解决插值表达式的闪烁问题。

给插值表达式的元素加上v-cloak

<p v-cloak>{{ msg }}</p>

为v-cloak定义样式

[v-cloak] {
    display: none;
}

Vue指令之`v-text`

用法：

<h4 v-text="msg"></h4>

v-text和插值表达式的相同与区别

v-text和插值表达式类似，但没有闪烁问题
v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空

<!-- 输出时，插值表达式前后的字符会保留 -->
<p v-cloak>++++{{msg }}----</p>
<!-- 输出时，msg会替换掉其他符号 -->
<h4 v-text="msg">-------</h4>

Vue指令之`v-html`

如果需要将msg以html的形式输出，需要使用v-html，v-html也会覆盖掉元素中原本的内容

例如：msg: '<h3>这是一个h3标签</h3>'

<p v-html="msg"></p>

Vue指令之`v-bind`

v-bind是用于绑定属性的指令，当使用v-bind:title以后，会将"title"当做一个变量来使用，引号中的字符当做js代码来处理，因此还支持表达式运算。

<input type="button" value="按钮" v-bind:title="mytitle">
<input type="button" value="按钮" v-bind:title="mytitle + ‘123’">
<input type="button" value="按钮" :title="mytitle + ‘123’">
...
data: {
    mytitle:'这是自定义的title'
}

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

Vue指令之`v-on`

Vue 中提供了v-on事件绑定机制，v-on:可以缩写为@

  <div id="app">
    <input type="button" value="按钮" v-on:click="show">
    <input type="button" value="按钮" @click="show">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        show: function () {
          alert('hello')
        }
      }
    })
  </script>

绑定函数是，如果加()可以为函数传参，如果无需传参可以省略()

指令`v-on`练习 - 跑马灯

注意事项：

扫描二维码关注公众号，回复： 6585560 查看本文章

函数start内部调用setInterval会有this指向问题，使用箭头函数改变this指向，是setInterval内部的this指向Vue实例
应当使用一个全局的intervalID，保证stop函数能够访问到
防止启动按钮连续点击，启动多个定时器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <h4>{{msg}}</h4>
    <input type="button" value="启动" @click="start">
    <input type="button" value="停止" @click="stop">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '这是一个跑马灯',
        intervalID: null
      },
      methods: {
        start: function () {
          if (this.intervalID != null) return
          
          this.intervalID = setInterval(() => {
            // 在vm实例中访问data中的数据，必须是this.的方式
            var head = this.msg.substring(0, 1)
            var end = this.msg.substring(1)
            this.msg = end + head
          }, 400)
        },
        stop() {
          clearInterval(this.intervalID)
          this.intervalID = null
        }
      }
    })
  </script>
</body>

</html>

Vue指令之事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只有当事件在该元素本身（比如不是子元素）触发时触发回调，只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为
.once 事件只触发一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/vue-2.4.0.js"></script>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="inner" @click="div1Handler">
      <!-- 使用.stop阻止冒泡 -->
      <input type="button" value="按钮" @click.stop="btnHandler">
    </div>
    <!-- 使用.prevent阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
    <!-- 使用.capture实现捕获触发的机制，点击按钮，先输出div的点击事件，在输出btn的事件 -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="按钮" @click="btnHandler">
    </div>
    <hr>
    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
    <div class="inner" @click.self="div1Handler">
      <input type="button" value="按钮" @click="btnHandler">
    </div>

    <!-- 使用.once 只触发一次，第一次阻止默认行为，以后不再阻止 -->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        btnHandler() {
          console.log('btn点击事件')
        },
        div1Handler() {
          console.log('div1点击事件')
        },
        linkClick() {
          console.log('a链接的点击事件')
        }
      }
    })
  </script>
</body>

</html>

Vue指令之`v-model`和`双向数据绑定`

使用v-model指令，可以实现表单元素和 Model 中数据的双向数据绑定。v-bind只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定。

注意：v-model只能运用在表单元素中: input(radio, text, address, email....) select checkbox textarea

<body>
  <div id="app">
    <H4>{{msg}}</H4>
    <input type="text" style="width:100%;" v-model="msg">
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'v-model双向数据绑定实例'
      }
    })
  </script>
</body>

Vue指令练习 - 简易计算器案例

HTML 代码结构

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" @click="calc">
    <input type="text" :value="result">
</div>

Vue实例代码：

var vm = new Vue({
    el: '#app',
    data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt:'+'
    },
    methods:{
        calc(){
            switch (this.opt) {
                case '+':
                    this.result = parseInt(this.n1) + parseInt(this.n2)
                    break;
                case '-':
                    this.result = parseInt(this.n1) - parseInt(this.n2)
                    break;
                case '*':
                    this.result = parseInt(this.n1) * parseInt(this.n2)
                    break;
                case '/':
                    this.result = parseInt(this.n1) / parseInt(this.n2)
                    break;
            }
        }
    }
})

在Vue中使用样式

使用class样式

数组，注意：这里的 class 需要使用v-bind做数据绑定

<h1 :class="['red', 'thin']">这是一个H1</h1>

数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个H1</h1>

数组中嵌套对象，对象来代替三元表达式，提高代码的可读性

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个H1</h1>

直接使用对象，由于对象的属性可带引号，也可不带引号，所以这里我没写引号。属性的值是一个标识符

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个H1</h1>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象，对象的键如果是'-'连起来的，必须加单引号

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个H1</h1>

将样式对象，定义到 data 中，并直接引用到 :style 中

2.1 在data上定义样式：

data: {
    h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

2.2 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个H1</h1>

在 :style 中通过数组，引用多个 data 上的样式对象

3.1 在data上定义样式，注意：fontStyle也可以写成'font-style'

data: {
    h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
    h1StyleObj2: { fontStyle: 'italic' }
}

3.2 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个H1</h1>

Vue指令之`v-for`和`key`属性

迭代普通数组

1.1 data中定义数组

data: {
    list: [1, 2, 3, 4, 5, 6]
}

1.2 循环普通数组

<p v-for="(item, i) in list">索引值：{{i}}, 每一项：{{item}}</p>

迭代对象中的属性

2.1 在data中定义对象数组

data: {
    list: [
        { id: 1, name: 'zs1' },
        { id: 2, name: 'zs2' },
        { id: 3, name: 'zs3' },
        { id: 4, name: 'zs4' }
    ]
}

2.2 循环对象数组

<p v-for="(user, i) in list">索引值：{{i}}, id：{{user.id}}, name: {{user.name}}</p>

遍历对象

3.1 data中定义对象

data: {
    user: {
        id: 1,
        name: '张三',
        gender: '男'
    }
}

3.2 遍历对象

<p v-for="(val, key, i) in user">{{key}} -- {{val}} -- 索引: {{i}}</p>

迭代数字，注意，这里的i是从1开始

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的，key用来标识当前循环这一项的唯一身份

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。

Key必须是string或number类型
key 在使用的时候，必须使用v-bind属性绑定的形式，指定key的值

在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型:key值

Vue指令之`v-if`和`v-show`

<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

v-if 的特点：每次都会重新删除或创建元素
v-show 的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式

一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。

Vue指令之 v-cloak

Vue指令之v-text

Vue指令之v-html

Vue指令之v-bind

Vue指令之v-on

指令v-on练习 - 跑马灯