002-读书笔记-Vue官网 认识数据与指令

这篇笔记主要用来说明 Vue 中数据的定义和指令的一些特性，后续会做更深入的说明。

1.Vue中的data函数

1-1 使用data函数

由于使用的是单文件组件，因此 Vue 组件中的数据应该是包含在 data 函数中的。

<script>
  export default {
    name: 'app',
    data() { } // data函数中用来保存Vue实例中的数据
  }

</script>

如果想正常绑定数据，那么在方法中就要返回一个对象：

    data() {
      return { // 通过return返回一个对象
        msg: '这是一段测试文字'
      }
    }

如果要把数据绑定到 DOM 中，可以使用 Vue 提供的数据双向绑定：

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

这个时候，显示的效果如下：

1-2 认识双向绑定

Vue 中的数据是双向绑定的，也就是说在 Vue 对象中修改数据，在 DOM 中会实时体现出来。下面来实际操作一下：

首先，打开谷歌人员开发工具，打开 Vue 选项卡，选中 <APP>，会发现在 APP> 后面会出现 == $vm0：

其次在控制台中输入下面的信息：

$vm0.$data.msg = '这是修改之后的内容'

观察 DOM，会发现显示的内容已经修改了：

2.认识Vue指令

2-1 插入文本

在 Vue 中插入文本，可以使用两种方式：

1. 使用“Mustache”语法 (双大括号)
2. 使用 v-text 指令

第一种方式：

<p>{{msg}}</p>

第二种方式：

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

上面两种插入文本实现的效果完全相同。但在实际开发中，使用的是第一种方式，因为这种方式更简单。

2-2 在Vue中插入表达式

Vue 中不仅支持简单的属性键值，而且支持 JavaScript 表达式。

<div>{{ msg + '123' }}</div>
<div>{{ msg ? 'Yes' : 'No' }}</div>
<div>{{ msg.split('').reverse().join('') }}</div>

但是需要注意的是，Vue 不支持绑定语句。区分表达式和语句的区别，请参照JavaScript中:表达式和语句的区别。

2-3 插入原始的HTML

插入原始的 HTML，这个时候只能使用 v-html 指令来进行操作。

首先把msg改成HTML的形式：

    data() {
      return {
        msg: '<span style="color:red">这是一段测试文字</span>'
      }
    }

绑定HTML：

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

最后的显示效果如下，如果要看具体的 DOM 形式，可以在谷歌人员开发工具中自行查看：

2-4 指令的组成部分

经过上面的介绍，应该对指令有一个大概的认识，下面就来对指令的每一项进行说明。理解指令的每一项，对自定义指令有一定的帮助。

常规指令

常规指令是比较常见的，如上面使用的 v-text：

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

指令的参数

指令也可以通过自己的参数来进行传值，使指令具有更多的可能性：

<a v-bind:href="url"></a>

其中 v-bind 是一个指令，href 是一个参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

指令修饰符

指令的修饰符是对指令参数的进一步限定：

<form v-on:submit.prevent="onSubmit">...</form>

上面的代码中，绑定了 submit 事件，通过修饰符 .prevent 告诉指令，如果触发了 submit 事件，那么就调用 onSubmit 方法。

2-5 指令的缩写

对于常用的指令，Vue 给出了其缩写形式，这样的指令只有两个：

1. v-bind 缩写成 :
2. v-on 缩写成 @

下面挪用官方的案例说明：

v-bind 的缩写：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on 的缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

3.参考内容

• 模板语法