Vue 2 | Part 3 常用指令合集

walterrwu 发布于2019-08-20 13:43 / 2604人阅读

摘要：修改的值可以看到元素中增加了，原来的文字也被隐藏了当然也可以赋值为其它东西，但是最后都会转换为布尔值来决定目标元素是否显示。

本期跟大家分享的，是Vue里面除了v-bind和v-on之外的指令。因为都挺简单的，所以就一次性解决了。

v-text

直接把文字绑定到html。之前我们一直使用大胡子语法往html里面绑定数据，如果数据是纯字符串的话，也可以使用v-text。

当然也可以绑定其它类型的数据，它们会以字符串的输出。

v-html

相当于jq的html方法，把数据中的html字符串嵌入到目标元素里面。

注意v-text和v-html两者，往html里插入数据以后新数据和使用指令的元素

之间的层级关系。

v-if/v-else-if/v-else

我会把这三兄弟描述为：在html中进行状态控制的快捷指令。

下面用一个简单的例子来演示。假设我们的数据中status可能会返回loading、ready、fail三者之一，在页面需要根据这个字段来显示不同的东西：


    
        loading
    
    
        ready
    
    
        fail

在console中直接改变status值，可以看到效果：

同时要留意，使用这三兄弟的时候，vue只会生成判定为true的那个节点：

v-show

根据布尔值决定目标元素的css display值。


    {{ info }}

修改showHeader的值

> app.showHeader = false

可以看到元素中增加了css style，原来的文字也被隐藏了：

当然showHeader也可以赋值为其它东西，但是最后都会转换为布尔值来决定目标元素是否显示。

v-show和v-if的区别

打开chrome devtools来查看两者渲染出来的dom。可以看到v-show只改变元素的css，但是v-if会决定是否生成这个dom节点（可查看上方截图）。

v-once

只根据数据渲染一次。往后数据改变时，目标元素不再重新渲染。

我们用v-text和v-once进行对比：


    v-once: {{ once }}
    mustache: {{ once }}

保存代码并刷新浏览器后，两句话是一样的：

对数据中的once值进行修改后，使用v-once的元素不更新：

这期就到这里，敬请期待下一期：v-bind绑定属性和class。

写在最后

源码地址：https://github.com/levblanc/v...

视频攻略：小的不才，为求一赞，自制本期视频攻略在此。

GPU云服务器云服务器 Part-2 Vuejs常用指令 linux常用指令常用linux指令

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

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

Vue 2 | 基础API系列文章合集

摘要：在大家的鞭策和鼓励下，这个基础的系列终于完成了。关于更新的频率，因为是我自己一个人在做，文案视频都准备好了才发的话，最快也只能一周一更。最后这几期可以密集地更新，完全是因为公司放假了。不过月份的更新速度真的不能保证，抱歉。在大家的鞭策和鼓励下，这个基础API的系列终于完成了。所幸是没有真的更到一百期才完结（笑）。最初是因为觉得录视频好玩，才挖的这个坑。也想过中途放弃，关掉专栏，但由于...

instein 2019-08-20 14:00 评论0 收藏0
Vue 2 | PART 2 双向绑定和vue-devtools

摘要：双向数据绑定这将是全宇宙最简单的双向数据绑定示例。这是一个专门针对表单的指令。也就是说，上面谈到的这几处地方，它们指向的数据源是同一个。所以，当其中一处对数据源进行了修改，其它地方也会马上得到体现。双向数据绑定这将是全宇宙最简单的双向数据绑定示例。上一期我们已经成功地通过Vue给html绑定了数据，也在console里面看到了数据是可以实时进行更改的。想要实现在网页上根据用户的输...

Richard_Gao 2019-08-20 13:35 评论0 收藏0
vue 2.x项目 vue-qriously 生成二维码并下载、cliploard复制粘贴

摘要：近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。先想着新模块中是否有生成二维码的插件，看了下。项目中封装了一个指令。一份用来显示的。顺带说一下，复制粘贴复制粘贴老模块中是用的仓库。近日，重构项目某一老模块时，有一个功能是生成二维码并下载，还可以复制链接。列表每项都有二维码、下载二维码和复制链接和列表上方总的二维码。老模块是用的qrocode中文文档，qrco...

littlelightss 2019-08-22 17:16 评论0 收藏0
Vue 2 | Part 5 列表渲染和事件监听

之前在vue里面绑定数据，都只是单个地绑定。这期我们来看一下怎样渲染列表，然后通过事件监听方法往列表里面增加item。列表渲染废话不多说，直接上代码： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 评论0 收藏0
Vue 2 | Part 8 组件通信

摘要：实例和组件之间的通信先来看一下我们最后要完成的效果吧。在组件的内部监听到用户的事件后，执行自身的方法，把信号发布出去。所以可以直接把实例作为一个，在组件之间进行通信。比方说，我们希望点击按钮以后，另外一个组件可以接收到这个信号。当组件监听到用户的行为，需要触发一些界面交互的时候，实例与组件之间、组件相互之间就需要进行通信了。Vue里面有两个api可以帮助我们轻松地完成这件事，它们是$...

MartinDai 2019-08-20 13:58 评论0 收藏0