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

hqman 发布于2019-08-21 17:15 / 2334人阅读

摘要：首先把改成的形式这是一段测试文字绑定最后的显示效果如下，如果要看具体的形式，可以在谷歌人员开发工具中自行查看指令的组成部分经过上面的介绍，应该对指令有一个大概的认识，下面就来对指令的每一项进行说明。

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

1.Vue中的data函数 1-1 使用data函数

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

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

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

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

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

1-2 认识双向绑定

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

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

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

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

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

2.认识Vue指令 2-1 插入文本

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

使用“Mustache”语法 (双大括号)

使用 v-text 指令

第一种方式：

{{msg}}

第二种方式：

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

2-2 在Vue中插入表达式

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

{{ msg + "123" }}
{{ msg ? "Yes" : "No" }}
{{ msg.split("").reverse().join("") }}

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

2-3 插入原始的HTML

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

首先把msg改成HTML的形式：

    data() {
      return {
        msg: "这是一段测试文字"
      }
    }

绑定HTML：

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

2-4 指令的组成部分

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

常规指令

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

指令的参数

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

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

指令修饰符

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

...

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

2-5 指令的缩写

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

v-bind 缩写成 :

v-on 缩写成 @

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

v-bind 的缩写：


...

...

v-on 的缩写：


...

...

3.参考内容

模板语法

混合云超融合服务器大数据时代读书笔记读书笔记编程思想读书笔记 vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89316.html

005-读书笔记-Vue官网自定义指令

摘要：自定义指令的使用在组件中定义一个自定义指令，作用将当前节点中字体颜色设置为红色。参考内容自定义指令 1.自定义指令的使用在组件中定义一个自定义指令，作用：将当前DOM节点中字体颜色设置为红色。在自定义指令中简化了钩子函数，下面的钩子函数相当于 bind 和 unbind 的缩写： export default { name: app, directives: ...

teren 2019-08-22 11:13 评论0 收藏0
007-读书笔记-Vue官网插件

摘要：插件的定义与使用插件的定义需要注意的点定义一个对外公开的方法方法有两个参数第一个参数的构造器，第二个参数是一个可选的对象必须，插件对外公开的方法构造器可选参数，是一个对象添加全局方法或属性添加全局方法或属性添加全局资源指令过滤器过渡等添 1.插件的定义与使用 1-1 插件的定义需要注意的点：定义一个对外公开的install方法 install方法有两个参数：第一个参数Vue的构造...

468122151 2019-08-22 11:13 评论0 收藏0
006-读书笔记-Vue官网混合

摘要：混合中的钩子函数同名钩子函数都会执行如果组件中存在钩子函数，混合中也存在相同的钩子函数，那么两个钩子函数都会执行。最终的执行结果多个混合的钩子函数多个混合的钩子函数，会根据混合使用的顺序来执行。 1.认识混合混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式混合的作用：抽取多个组件的共同部分，增强组件的可复用性混合的实质：混合对象类似一个Vue实例，可以包含V...

kk_miles 2019-08-22 11:13 评论0 收藏0
008-读书笔记-Vue官网过滤器

摘要：如果要修改上面代码中的过滤器，根据传入的参数来分割字母，可以使用下面的方式修改。参数传递情况作为的参数的结果作为的参数的结果作为的参数参考内容过滤器 1.认识过滤器过滤器的作用：用于文本格式化，仅仅作为格式化操作，不做复杂的业务处理过滤器的使用方式：通过管道符号(|)来使用过滤器的使用位置：mustache插值和v-bind表达式 2.过滤器的简单使用 2-1 使用过滤器 ...

JaysonWang 2019-08-21 17:21 评论0 收藏0
004-读书笔记-Vue官网 Class与Style的绑定

摘要：绑定绑定，使用，简写的形式是。绑定比较灵活，可以使用表达式字符串对象或数组。绑定字符串绑定字符串的时候只能绑定一个，不能绑定多个。 1.绑定Class 绑定Class，使用 v-bind:class，简写的形式是 :class。绑定Class比较灵活，可以使用表达式、字符串、对象或数组。 1-1 搭建结构首先，新建一些 class 样式： .colorRed { colo...

hufeng 2019-08-21 17:16 评论0 收藏0