总结常用的总结常用的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