表单基本操作
获取单选框中的值
通过v-model
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
data: {
// 默认会让当前的 value 值为 2 的单选框选中
gender: 2,
}
获取复选框中的值
通过v-model
和获取单选框中的值一样
复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
获取下拉框和文本框中的值
通过v-model
表单修饰符
number 转换为数值
注意点：
当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
.trim 自动过滤用户输入的首尾空白字符
只能去掉首尾的 不能去除中间的空格
.lazy 将input事件切换成change事件
.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change事件上
在失去焦点 或者 按下回车键时才更新
自定义指令
内置指令不能满足我们特殊的需求
Vue允许我们自定义指令
Vue.directive 注册全局指令
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。 其中 el为dom元素
inserted: function (el) {
// 聚焦元素
el.focus();
}
});
Vue.directive 注册全局指令 带参数
Vue.directive('color', {
bind: function(el, binding){
el.style.backgroundColor = binding.value.color;
}
});
自定义指令局部指令
局部指令，需要定义在 directives 的选项 用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准
计算属性 computed
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
侦听器 watch
使用watch来响应数据的变化
一般用于异步或者开销较大的操作
watch 中的属性 一定是data 中 已经存在的数据
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
过滤器
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和v-bind表达式。
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
支持级联操作
过滤器不改变真正的 data ，而只是改变渲染的结果，并返回过滤后的版本
全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
过滤器中传递参数
{{ message | filterA('arg1', 'arg2') }}
filterA 被定义为接收三个参数的过滤器函数。
其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数
生命周期
事物从出生到死亡的过程
Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
动态数组响应式数据
Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
a是要更改的数据 、 b是数据的第几项、 c是更改后的数据