总结常用的总结常用的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
增加一个
减少一个
事件修饰符事件修饰符
资源评论
