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>
nextTick方法的实现原理
简介
vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。
为什么要用nextTick
请看如下一段代码
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.get()
},
methods: {
get: function () {
this.$http.get('/api/article').then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素,我想把第一个li颜色变为红色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
我在获取到数据后赋值给数据模型中list属性,然后我想引用ul元素找到第一个li把它的颜色变为红色,但是事实上,这个要报错了,我们知道,在执行这句话时,ul下面并没有li,也就是说刚刚进行的赋值操作,当前并没有引起视图层的更新。因此,在这样的情况下,vue给我们提供了$nextTick方法,如果我们想对未来更新后的视图进行操作,我们只需要把要执行的函数传递给this.$nextTick方法,vue就会给我们做这个工作。
源码解读
这个函数很简单,vue2.2.6版本 450行开始。
首先,这个函数是采用了一个单利模式还是什么创建的一个闭包函数
var callbacks = []; // 缓存函数的数组
var pending = false; // 是否正在执行
var timerFunc; // 保存着要执行的函数
首先定义了一些变量供之后使用,下面是一个函数
function nextTickHandler () {
pending = false;
// 拷贝出函数数组副本
var copies = callbacks.slice(0);
// 把函数数组清空
callbacks.length = 0;
// 依次执行函数
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}
这个函数就是$nextTick内实际调用的函数。
接下来,是vue分了三种情况来延迟调用以上这个函数,因为$nextTick目的就是把传进来的函数延迟到dom更新后再使用,所以这里依次优雅降序的使用js的方法来做到这一点。
1. promise.then延迟调用
if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
var logError = function (err) { console.error(err); };
timerFunc = function () {
p.then(nextTickHandler).catch(logError);
if (isIOS) { setTimeout(noop); }
};
}
如果浏览器支持Promise,那么就用Promise.then的方式来延迟函数调用,Promise.then方法可以将函数延迟到当前函数调用栈最末端,也就是函数调用栈最后调用该函数。从而做到延迟。
2. MutationObserver 监听变化
else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
var counter = 1;
var observer = new MutationObserver(nextTickHandler);
var textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true
});
timerFunc = function () {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
}
MutationObserver是h5新加的一个功能,其功能是监听dom节点的变动,在所有dom变动完成后,执行回调函数。
具体有一下几点变动的监听
- childList:子元素的变动
- attributes:属性的变动
- characterData:节点内容或节点文本的变动
- subtree:所有下属节点(包括子节点和子节点的子节点)的变动
可以看出,以上代码是创建了一个文本节点,来改变文本节点的内容来触发的变动,因为我们在数据模型更新后,将会引起dom节点重新渲染,所以,我们加了这样一个变动监听,用一个文本节点的变动触发监听,等所有dom渲染完后,执行函数,达到我们延迟的效果。
3.setTimeout延迟器
else {
timerFunc = function () {
setTimeout(nextTickHandler, 0);
};
}
利用setTimeout的延迟原理,setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始,也就是当前函数执行完毕后再执行该函数,因此完成了延迟功能。
闭包函数
return function queueNextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) { cb.call(ctx); }
if (_resolve) { _resolve(ctx); }
});
// 如果没有函数队列在执行才执行
if (!pending) {
pending = true;
timerFunc();
}
// promise化
if (!cb && typeof Promise !== 'undefined') {
console.log('进来了')
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}
这个return的函数就是我们实际使用的闭包函数,每一次添加函数,都会想callbacks这个函数数组入栈。然后监听当前是否正在执行,如果没有,执行函数。这个很好理解。下面一个if是promise化。
this.$nextTick(function () {
})
// promise化
this.$nextTick().then(function () {
}.bind(this))
以上代码中第二种写法我们不常见把,直接调用$nextTick函数然后用promise格式去书写代码,不过这个then里面需要手动绑定this,vue内部没有给做处理。
结尾
这就是一个this.$nextTick的实现,其中利用了优雅降序的巧妙手法,使代码尽可能优化。而且还提供了promise的写法,虽然我们不经常用,但是有总比没有好。
Vue.js 组件之间传递数据
前言
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。
组件
组件与组件之间,还存在着不同的关系。父子关系与兄弟关系(不是父子的都暂称为兄弟吧)。
父子组件
父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。
// 注册一个子组件
Vue.component('child', {
data: function(){
text: '我是father的子组件!'
}
template: '<span>{{ text }}</span>'
})
// 注册一个父组件
Vue.component('father', {
template: '<div><child></child></div>' // 在模板中使用了child组件
})
直接使用 father 组件的时候:
<div id="app">
<father></father>
</div>
页面中就会渲染出 :我是father的子组件!
father 组件在模板中使用了 child 组件,所以它就是父组件,child 组件被使用,所以 child 组件就是子组件。
兄弟组件
两个组件互不引用,则为兄弟组件。
Vue.component('brother1', {
template: '<div>我是大哥</div>'
})
Vue.component('brother2', {
template: '<div>我是小弟</div>'
})
使用组件的时候:
<div id="app">
<brother1></brother1>
<brother2></brother2>
</div>
页面中就会渲染出 :
我是大哥
我是小弟
Prop
子组件想要使用父组件的数据,我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。
如何传递数据
在父组件 father.vue 中引用子组件 child.vue,把 name 的值传给 child 组件。
<template>
<div class="app">
// message 定义在子组件的 props 中
<child :message="name"></child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data() {
return {
name: 'linxin'
}
}
}
</script>
在子组件 child.vue 中的 props 选项中声明它期待获得的数据
<template>
<span>Hello {{message}}</span>
</template>
<script>
export default {
// 在 props 中声明获取父组件的数据通过 message 传过来
props: ['message']
}
</script>
那么页面中就会渲染出:Hello linxin
单向数据流
当父组件的 name 发生改变,子组件也会自动地更新视图。但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:
方法一:把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop
export default {
data(){
newMessage: null
},
props: ['message'],
created(){
this.newMessage = this.message;
}
}
方法二:在计算属性中对 prop 进行处理
export default {
props: ['message'],
computed{
newMessage(){
return this.newMessage + ' 哈哈哈';
}
}
}
自定义事件
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。修改子组件的 prop 值,是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢?
那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件,当子组件里 $emit(eventName) 触发该自定义事件的时候,父组件执行相应的操作。
比如在父组件中控制一个弹框子组件的显示,在子组件中按下关闭之后,告诉父组件去隐藏它,然后父组件就执行操作隐藏弹框。
<template>
<div class="app">
// hide 为自定义事件,名字可以自己随便起,不能有大写字母,可以使用短横线
// @hide 监听子组件触发 hide 事件,则会执行 hideDialog 方法
<dialog :is-show="show" @hide="hideDialog"></dialog>
<button @click="showDialog">显示弹框</button>
</div>
</template>
<script>
import dialog from './dialog.vue';
export default {
components: { dialog },
data() {
return {
show: false
}
},
methods: {
showDialog() {
this.show = true;
},
hideDialog() {
this.show = false;
}
}
}
</script>
在子组件 dialog.vue 中:
<template>
<div class="dialog" v-show="isShow">
<p>这里是弹框子组件</p>
<button @click="toHide">关闭弹框</button>
</div>
</template>
<script>
export default {
// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-show
props: ['isShow'],
methods: {
toHide(){
// $emit 方法触发父组件的监听事件
this.$emit('hide');
}
}
}
</script>
这样就实现了父子组件之间的相互通讯。
Vuex
上面的例子都是建立在父子关系的组件上,但是对于其他层级的关系,实现起来就比较繁琐了。那么这时候 Vuex 就能更好的帮你在各个组件间实时通讯了。关于 Vuex,可查看我的另一篇文章:Vuex 模块化实现待办事项的状态管理
转载https://www.talkingcoder.com/article/6440722378598318113