遇到的坑:
1.问题:数组的更新及Object对象的属性更新后,vue视图没有及时更新
解决方案:先清空数组或对象再赋值新值 | 更新数组某一项可使用arrayObj.$set(index, newValue)方法
2.vue内置事件执行顺序
init -> created ->
beforeCompile -> compiled -> attached -> ready
初始化 创建完成 编译前 编译完成 绑定事件 加载完成
detached 解绑事件
beforeDestroy 销毁前
destroyed 销毁完成
3.将数据及模板编译后填充到对应的元素内
var aVue = new Vue({ data: { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' }, template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' });
aVue.$mount(‘#editor-box');
4.修改vm的值后,视图更新的回调
var vm = new Vue({
el: '#example',
data: {
msg: '123'
}
})
vm.msg = 'new message'// change data
vm.$el.textContent === 'new message'// false
Vue.nextTick(function () {
vm.$el.textContent === 'new message'// true
})
var vm =
new Vue({
data: {
msg:
'hi'
},
computed: {
example:
function () {
return
Date.now() +
this.msg
}
}
})
5.属性合并
全局组件属性定义,其他所有组件都会继承到其中的定义
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
局部属性定义及合并
var mixin = {
created: function () {
console.log('mixin hook called')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('component hook called')
}
})
// -> "mixin hook called"
// -> "component hook called"
6.过滤器
// 默认传入当前值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
// 动态参数
Vue.filter('reverse', function (value, otherArg) {
console.log(otherArg); // true
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse true"></span>
// 针对v-model的过滤器(双向数据绑定的值)
Vue.filter('currencyDisplay', {
// model -> view
// formats the value when updating the input element.
read: function(val) {
return'$'+val.toFixed(2)
},
// view -> model
// formats the value when writing to the data.
write: function(val, oldVal) {
var number = +val.replace(/[^\d.]/g, '')
returnisNaN(number) ? 0 : parseFloat(number.toFixed(2))
}
})
<input type="text" v-model="money | currencyDisplay"> | |
<p>Model value: {{money}}</p> |
7.自定义指令
# 示例1
<div id="demo" v-demo:hello.a.b="msg"></div>
|
Vue.directive('demo', {
bind: function () {
console.log('demo bound!')
},
update: function (value) {
this.el.innerHTML =
'name - ' + this.name + '<br>' +
'expression - ' + this.expression + '<br>' +
'argument - ' + this.arg + '<br>' +
'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
'value - ' + value
},
unbind: function(){
console.log(‘demo unbind...');
}
})
var demo = new Vue({
el: '#demo',
data: {
msg: 'hello!'
}
})
|
#示例2
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (value) {
console.log(value.color) // "white"
console.log(value.text) // "hello!"
})
8.组件
#异步组件
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
Vue.component(
'async-webpack-example',
function (resolve) {
// this special require syntax will instruct webpack to
// automatically split your built code into bundles which
// are automatically loaded over ajax requests.
require([
'./my-async-component'], resolve)
})
|
# 注册及使用
<div id="example">
<my-component></my-component>
</div>
// define
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
el: '#example'
})
#组件继承
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> will only be available in Parent's template
'my-component': Child
}
})
#组件动态参数传递
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
<!—
<child :my-message="parentMsg">
</child>
->
</div>
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
// 属性绑定不同写法的差异
<!-- this passes down a plain string “1” 1为字符串类型 -->
<comp some-prop="1"></comp>
<!-- this passes down an actual number 1为数字类型 -->
<comp :some-prop="1"></comp>
#
v-on for Custom Events 给子组件绑定自定义事件
<child v-on:child-msg="handleIt">
</child>
#子组件引用
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile
#single slot
For example, suppose we have a
multi-insertion
component with the following template:
<div>
<slot name="one"></slot>
<slot></slot>
<slot name="two"></slot>
</div>
|
Parent markup:
<multi-insertion>
<p slot="one">One</p>
<p slot="two">Two</p>
<p>Default A</p>
</multi-insertion>
|
The rendered result will be:
<div>
<p slot="one">One</p>
<p>Default A</p>
<p slot="two">Two</p>
</div>
|
<my-component
:foo="baz"
:bar="qux"
@event-a="doThis"
@event-b="doThat">
<!-- content -->
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>
9.组件场景切换动画
<div v-if="show" transition="expand">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
})
/* always present */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter, .expand-leave {
height: 0;
padding: 010px;
opacity: 0;
}
Vue.transition('bounce', {
// Vue will now only care about `animationend` events
// for this transition
type: ‘animation',
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
// 场景切换
动画 -
事件监听
Vue.transition('expand', {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
},
leaveCancelled: function (el) {
// handle cancellation
}
})