看这篇之前可以回顾一下《【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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
〖坚持的一俢〗
共同学习，写下你的评论
评论加载中...
作者其他优质文章
