vue.js研究小结

遇到的坑：

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

}

})