总结常用的Vue.js指令资源-CSDN文库

49 浏览量 2021-01-08 09:30:28 上传评论收藏 197KB PDF 举报

资源推荐

资源详情

资源评论

总结常用的总结常用的Vue.js指令指令

总结常用的总结常用的Vue.js指令指令

本文承接：

写给后端工程师看的Vue.js入门

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个单个 JavaScript 表达式表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式

地作用于地作用于 DOM

文章目录文章目录总结常用的Vue.js指令插值表达式计算属性Watch

插值表达式插值表达式

花括号花括号

{{表达式}}

该表达式支持JS语法，可以调用js内置函数（必须有返回值）内置函数（必须有返回值）

表达式必须有返回结果必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;

可以直接获取直接获取Vue实例中定义的数据或函数实例中定义的数据或函数（上面的演示就是这种情况）

插值闪烁问题插值闪烁问题

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁

v-text和和v-html

使用v-text和v-html指令来替代替代{{}}

v-text：将数据输出到元素内部，如果输出的数据有如果输出的数据有HTML代码，会作为普通文本输出代码，会作为普通文本输出

v-html：将数据输出到元素内部，如果输出的数据有如果输出的数据有HTML代码，会被渲染代码，会被渲染

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染数据影响了视图渲染，但是反过来就不行。v-model是双向绑定，视图（是双向绑定，视图（View）和模型（）和模型（Model）之间会互相影响）之间会互相影响(如上

演示)

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

[表单输入项表单输入项]

input

select

textarea

checkbox

radio

Vue自定义组件

components

例子例子

var vm = new Vue({

el:"#app",

data:{

language: [] }

})

多个多个CheckBox对应一个对应一个model时，时，model的类型是一个数组，单个的类型是一个数组，单个checkbox值默认是值默认是boolean类型类型

效果效果

v-on

v-on指令用于给页面元素绑定事件给页面元素绑定事件

v-on:事件名="js片段或函数名"

这个如果你学过js，那么应该是相当熟悉了，如同onclick

增加一个

减少一个

事件修饰符事件修饰符

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38733597

粉丝: 8
资源: 909

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip