继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【Vue 极速指南】高级篇

一俢
关注TA
已关注
手记 82
粉丝 12
获赞 135

看这篇之前可以回顾一下《【Vue 极速指南】基础篇》。在这篇文章,你将快速学习到:

  • 组件

  • 自定义指令

  • 过滤器

  • 混入

  • 路由

  • 插件

组件

  • 全局组件

    • 注册组件:Vue.component('custom-component',{})

    • 使用组件:<custom-component></custom-component>

  • 本地组件

    • 定义组件: var child = { template: ''}

    • 注册组件: components: { 'child-component': child }

    • 使用组件:<child-component></child-component>

  • 组件属性

    • components: { props: ['message'] }

    • <custom-component message="hello"></custom-component>

    • <custom-component :message="msg"></custom-component>

  • data 必须是一个 Function

  • 方法和 Vue 实例一样

  • 父子组件之间的通讯

  • 动态组件

    • <component v-bind:is="currentView"></component>

  • 异步组件

    • 使用 webpack 的 code-splitting

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Hello Component</title>
    <script src="vue.js"></script></head><body>
    <div id="app">
        {{ message }}        <my-component message="haha"></my-component>
        <child-component></child-component>
        <aa></aa>
    </div>
    <script>
        var ext = Vue.extend({
            data:function () {                return {
                    msg: 'abc'
                }
            },
            template: '<div>Hello Component {{msg}}</div>'
        });
         Vue.component("aa", ext);
        Vue.component('my-component', {
            template: '<div>Hello Component {{message}} {{name}}</div>',
            props: ['message'],
            data: function(){                return {
                    name: 'abc'
                }
            }
        });        var Child = {
            template: '<div>Child Component</div>'
        };        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            components: {                'child-component': Child
            }
        });    </script></body></html>

自定义指令

  • 注册指令: Vue.directive('custom-directive')

  • 使用指令:v-custom-directive

  • 指令的钩子方法

    • bind

    • inserted

    • undate

    • componentUpdated

    • unbind

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Directive</title>
    <script src="vue.js"></script></head><body>
    <div id="app">
        <span v-custom-directive="message">{{ message | reverse }}</span>
    </div>
    <script>
        Vue.directive('custom-directive', {            bind: function(el, binding, vnode) {                console.log('bind');                console.log(el);                console.log(binding);
            },            update: function(value) {                console.log(value);
            },            unbind: function() {},            inserted: function(el) {

            }
        });
        Vue.filter('reverse', function (value) {            return value.split('').reverse().join('')
        });        var app = new Vue({            el: '#app',            data: {                message: 'Hello Directive!'
            }
        });    </script></body></html>

过滤器

  • 注册过滤器:Vue.filter('customFilters')

  • 使用过滤器:{{ data | customFilters }}

混入

TODO

路由

  • 如何使用:

    • 创建 <router-view></router-view> 模版

    • 创建子组件

    • 定义路由

    • 创建 VueRouter 实例

    • 将路由放入 Vue 实例

  • 动态匹配

  • Navigation

    • router.push('')

    • router.push({ path: '', query: { key: 'value'}})

    • router.go(1)

  • Navigation 钩子函数

    • beforeRouteEnter

    • beforeRouteLeave

    • beforeEnter

    • afterEach

    • beforeEach

    • afterEach

    • 全局

    • 路由

    • 组件

其它插件

  • vue-resource

  • vue-async-data

  • vue-validator

  • vue-animated-list

〖坚持的一俢〗




打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP