表单输入绑定
前边已经讲了 v-bind
用于绑定 HTML 属性的值,v-on
用于绑定事件;Vue 针对表单元素,提供了 v-model
的语法糖,在表单 <input>
、<textarea>
及 <select>
元素上创建双向数据绑定。之前也已经见过了:
<input v-model="message">
v-model
和 :vlaue
有什么区别呢?
:value
也可以绑定表单元素的值,但是如果我们通过表单元素,比如输入框,修改了对应的值,Vue 将不能监听到,因此不能实现表单的双向绑定;v-model
只是一个语法糖,本质上相当于,对表单元素增加了一个监听器,监听其 value
值的变化。
<input v-bind:value="something" v-on:input="something=$event.target.value">
-
.lazy
v-model
默认监听输入框 input 事件,即输入就会同步;可以添加.lazy
修改符,修改为监听 change 事件<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
-
.number
自动转换为数字类型 -
.trim
自动过滤首尾空白字符
过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
过滤器实质不改变原始数据,只是对数据进行加工处理后返回过滤后的数据再进行调用处理
<div id="app">
<h2>过滤器的使用-添加前缀</h2>
<p>{{352.11 | toRMB}}</p>
<p>{{657 | toRMB}}</p>
<p>{{657.22 | toFixed }}</p>
</div>
<script>
// 全局过滤器
Vue.filter('toRMB', value => {
return '¥'+value
})
// vm 实例
const vm = new Vue({
el : '#app', // element
data : { // model
},
// 局部过滤器
filters: {
toFixed(money) {
return money.toFixed(1)
}
},
methods: {
}
})
</script>
另外,过滤器还能够接受其他的参数,不过管道符 | 前边的元素会被作为第一个参数提交。
自定义指令
前边介绍了 Vue 的常用指令:v-bind
, v-on
, v-if
, v-show
, v-for
等,除了这些默认的指令之外,Vue 允许我们自定义指令,基本语法:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
上边的 inserted 是 Vue 指令的钩子函数,表示绑定的元素插入到 DOM 中才起作用,还有其他的钩子函数,请参考官方文档。
例子,定义一个绑定的值转换为大写的指令:
<div id="app">
<p v-upper-text="message"></p>
</div>
<script>
Vue.directive('upper-text', {
bind: function (el, binding) {
el.innerHTML = binding.value.toUpperCase()
}
})
// vm 实例
const vm = new Vue({
el : '#app', // element
data : { // model
message: 'hello world'
},
methods: {
}
})
</script>