-
Notifications
You must be signed in to change notification settings - Fork 189
62.Vue.js Little Tips #67
Description
Vue.js Little Tips
v-model
在输入框中双向绑定一个数据虽然可以这样写
<input :value="data" @input="data = $event.target.value">
但更应该这样写
<input v-model="data">
这一点没什么可说的,但由此我们应该知道是,在使用一个属性前,一定要提前定义,例子如下
https://ccforward.github.io/demos/vue-tips/v-model.html
没有提前定义 name 属性,所以 input 标签中改变 person.name 属性不会响应到 js 对象上
Name: <input v-model="person.name"> Phone: <input v-model="person.phone"> <pre>{{person}}</pre>
new Vue({ el: '#app', data: { person: { phone: '110' } } })
不能提前定义属性,就只能用 $set 和 $delete 来动态处理属性了
删除数组索引
在数组中删除一项的标准做法是用 Array.splice(index, 1)
del (index) { this.arr.splice(index ,1); }
在 Vue.js 2.2.0+ 的版本里可以直接用 Vue.delete
del (index) { this.$delete(this.arr, index); }
demo:
https://ccforward.github.io/demos/vue-tips/delete.html
选中 input 框中文字
这个比较简单,调用 select 方法即可
<input @focus="$event.target.select()">
组件中调用就需要加上 native 属性了
<component @focus.native="$event.target.select()"></component>
demo:
https://ccforward.github.io/demos/vue-tips/select.html
私有属性
如下代码
data: { name: 'name', _name: 'name' }, mounted() { console.log(this.name, this._name); }
结果输出为 "name" undefined
这是因为 以 _ 或者 $ 开头的属性只能 Vue 自身使用
用 debounce 延迟计算 watch 属性
debounce 去抖 尤其适合在输入这种高频的操作中实时计算属性值
data: { text: '', inputing: false }, watch: { text: _.debounce(function () { this.inputing = false }, 1000) }
顺手写个简单的 v-debounce 指令, 如下:
const debounce = (fn, delay) { let timer = null return function () { clearTimeout(timer) timer = setTimeout(_ => { fn.apply(this, arguments) }, delay) } } directive.debounce = debounce function directive (el, binding) { if (binding.value !== binding.oldValue) { // change debounce only if interval has changed el.oninput = directive.debounce(_ => { el.dispatchEvent(new Event('change')) }, parseInt(binding.value) || 500) } } module.exports = directive
Vue.js 中使用 v-debounce:
<input v-debounce="delay" v-model="text" /> <p> {{text}} </p>
import debounce from './debounce.js' export default { data () { return { text: 'some words', delay: 500 } }, directives: {debounce} }
绑定 console.log
在 html 标签中无法使用 console.log 调试,但是只需要在 Vue 的原型链上增加 $log 函数即可
Vue.prototype.$log = console.log.bind(console); new Vue({el: '#app'})
html 中就可以直接 console
<input @keydown="$log" @keyup="$log" placeholder="input something">
在demo中打开控制台查看 demo
简写v-bind
data: { placeholder: 'this is text', required: true, value: '123', input: { placeholder: 'this is text', required: true, value: '123' } }
<input :placeholder="placeholder" :required="required" :value="value">
如果 input 标签属性的属性很多,则可以直接绑定整个对象,如下:
<input v-bind="input">
慎用 eval
偶尔用下 eval 体验体验 evil
用 eval 来做简单的数学计算
data: { input: '2**10 + 10*(1+1)' }, computed: { exp () { var type = /[^\d*\/+\(\)-]/g var pow = /(\d+)\*\*(\d+)/g return this.input.replace(type, ' ').replace(pow, 'Math.pow(1,ドル 2ドル)') }, result () { try { return eval(this.exp) } catch (e) { return e.message } } }
<div id="app"> <input v-model="input"> <p>{{exp}} = {{result}}</p> </div>