Vue指令

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。参考文档

v-html/v-text

v-text
- v-text和差值表达式的区别
  - v-text 标签的指令更新整个标签中的内容
  - 差值表达式，可以更新标签中局部的内容
v-html
- 可以渲染内容中的HTML标签
- 尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击)

v-bind

可以绑定标签上的任何属性。

动态绑定图片的路径

<img v-bind:src="src" />
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            src: '1.jpg'
        }
    });
</script>

绑定a标签上的id

<a v-bind:href="'del.php?id=' + id">删除</a>
<script>
  var vm = new Vue({
        el: '#app',
        data: {
            id: 11
        }
    });
</script>

绑定class

对象语法和数组语法

对象语法

如果isActive为true，则返回的结果为 <div class="active"></div>

<div v-bind:class="{active: isActive}">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true  
        }
    });
</script>

数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>

绑定style

对象语法和数组语法

对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

<div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
    hei
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            redColor: 'red',
            font18: 18
        }
    });
</script>

数组语法

<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>

简化语法

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为，简化语法更常用 -->
<div :class="{active: isActive}">
</div>

v-model

表单元素的绑定

双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据

绑定文本框

当文本框的值发生边框后，div中的内容也会发生变化

<input type="text" v-model="name">
<div>{{ name }}</div>
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            name: ''
        }
    });
</script>

绑定多行文本框
```
<textarea v-model="name"></textarea>
<div>{{ name }}</div>
```
注意：多行文本框中不能使用{{ name }}的方式绑定

绑定复选框

绑定一个复选框

<input type="checkbox" v-model="checked">
<div>{{ checked }}</div>

绑定多个复选框

此种方式需要input标签提供value属性

吃饭：<input type="checkbox" value="eat" v-model="checklist"><br>
睡觉：<input type="checkbox" value="sleep" v-model="checklist"><br>
打豆豆：<input type="checkbox" value="ddd" v-model="checklist"><br>
{{ checklist }}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            checklist: []
        }
    });
</script>

绑定单选框

男<input type="radio" name="sex" value="男" v-model="sex">
女<input type="radio" name="sex" value="女" v-model="sex">
{{sex}}
<script>
    var vm = new Vue({
       el: '#app',
        data: {
            sex: ''
        }
    });
</script>

绑定下拉框

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

v-on

绑定事件
事件修饰符：
- .prevent
- .once

简化语法

<a href="#" @click.prevent="handleDelete">删除<a>

v-show

v-if

v-for

v-cloak

v-once

一次性绑定

Vue的选项对象

当创建一个 Vue 实例时，你可以传入一个选项对象。你可以在 API 文档中浏览完整的选项列表。

el 选项

参考文档：https://cn.vuejs.org/v2/api/#el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

注意：
- 不能作用到 <html> 或者 <body> 上
- 也可以通过 实例.$mount() 手动挂载
data 选项

参考文档：https://cn.vuejs.org/v2/api/#data
- Vue 实例的数据对象，能够响应式数据变化(双向绑定)
- 可以通过 vm.$data 访问原始数据对象
- Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
- 视图中绑定的数据必须显式的初始化到 data 中
methods 选项

参考文档：https://cn.vuejs.org/v2/api/#methods

methods 将被混入到 Vue 实例中。可以直接通过 vm 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意： 不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
```
var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2
```

案例：表格操作

展示列表数据
删除数据
添加数据

总结：

Vue 最大程度上减少了页面上的 DOM 操作
让开发人员更专注于业务操作
通过简洁的指令结合页面结构与逻辑数据
代码结构更合理
维护成本更低
数据驱动
VueJS 解放了传统 JavaScript 中频繁的 DOM 操作

DevTools

https://github.com/vuejs/vue-devtools

其它知识点

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

需求：对表格案例中的日期进行格式化。

<td>{{ item.date | fmrTime('YYYY-MM-DD HH:mm:ss') }}</td>
<script>
Vue.filter('fmrTime', function (time, formatStr) {
    // 使用moment.js对日期进行格式化
    return moment(time).format(formatStr);
});
</script>

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。

计算属性当依赖的data中的数据发生变化的时候执行
计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。

参考文档

通过获取时间，演示计算属性和methods中方法的区别(缓存数据的差异)。

计算属性和方法的区别

方法每次调用都会执行
计算属性只有当依赖的数据方法变化才会执行

需求：表格案例中实现搜索功能

<tr v-for="(item, index) in newList" :key="index">
....
<tr v-if="newList.length === 0">
<script>
    var vm = new Vue({
        el: ....
        computed: {
            newList() {
              return this.list.filter((item) => {
                return item.name.startsWith(this.searchKey);
              });
            }
          }
    })
</script>

ref

在Vue.js中操作DOM。

需求：表格案例中让文本框默认获得焦。

给要获取焦点的元素增加ref属性
在mounted中通过$refs获取DOM元素

<input type="text" ref="username" v-model="name">

<script>
    var vm = new Vue({
       el: '#app',
       // mounted当页面加载完毕执行
       mounted: function () {
           this.$refs.username.focus();
       },
       data.....,
    });
</script>

注意：Vue.js中不推荐直接操作DOM，除非必须否则不建议这么使用。

自定义指令

除了核心功能默认的指令，例如：v-model 和 v-show，Vue 也允许注册自定义指令。

需求：表格案例中让文本框默认获得焦。给文本框增加自定义指令 v-focus

<input type="text" v-focus v-model="name">
<script>
// 全局自定义指令
Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    }
});
</script>