參考: http://vue2.mmxiaowu.com/article/584a3957fc007e72b0f576d9html
1.經過components方式註冊
2.經過router方式註冊(二者能夠並行存在).
3.若是是render+router方式, 那麼router只能寫在render的組件template裏.vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <app01></app01> <router-link to="/app001">/app001</router-link> <router-link to="/app002">/app002</router-link> <router-view></router-view> </div> <template id="app01"> <div> <p>app01</p> </div> </template> <template id="app001"> <div>app001</div> </template> <template id="app002"> <div>app002</div> </template> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> let app01 = { name:'app01', template: "#app01", }; let app001 = { name:'app001', template: "#app001", }; let app002 = { name:'app002', template: "#app002", }; let routes = [ {path: '/app001', component: app001}, {path: '/app002', component: app002}, ]; let router = new VueRouter({routes}); let vm = new Vue({ el: "#app", components: { app01 }, router }) </script> </body> </html>
做爲誰的子, 取決於router-link和router-view寫在誰下了.
node
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <app01></app01> </div> <template id="app01"> <div> <p>app01</p> <router-link to="/app001">/app001</router-link> <router-link to="/app002">/app002</router-link> <router-view></router-view> </div> </template> <template id="app001"> <div>app001</div> </template> <template id="app002"> <div>app002</div> </template> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> let app01 = { template: "#app01", }; let app001 = { template: "#app001", }; let app002 = { template: "#app002", }; let routes = [ {path: '/app001', component: app001}, {path: '/app002', component: app002}, ]; let router = new VueRouter({routes}); let vm = new Vue({ el: "#app", components: { app01 }, router }) </script> </body> </html>
上面這個連接裏說了: render+router
webpack
方法1:
render: c => c(app01)做用:web
0,註冊組件
1.生成標籤
2.自動插入標籤
特色: 會覆蓋div.app下的內容vue-router
方法2:
render: c => c('app01')做用:vue-cli
1.生成標籤
2.自動插入標籤app
特色: 會覆蓋div.app下內容3d
document的的建立標籤方法
code
方法3: template
template: '
1,生成標籤
2,插入標籤
特色: 會覆蓋app下內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>test</h1> </div> <template id="app01"> <div> <p>app01</p> </div> </template> <script src="node_modules/vue/dist/vue.js"></script> <script> let app01 = { name: 'app01', template: "#app01", }; let vm = new Vue({ el: "#app", template: '<app01/>', components: { app01 } }) </script> </body> </html>
小結:
render: c => c('app01') | template: '
|
---|---|
1.生成標籤 | 1.生成標籤 |
2.插入標籤 | 2.插入標籤 |
覆蓋app下的內容 | 覆蓋app下的內容 |
配合runtime用 | 配合vue.js用 |
局部組件 | 全局組件 |
---|---|
1.建立 | 1,建立 |
2.註冊 | - |
3.使用 | 3,使用 |
第二欄是 template: '<app01/>'
new Vue({ el: '#app', render: creatElment => creatElment(App), });
new Vue({ el: '#app', render: c => c('App'), components: { App } });
注意: 這種狀況下, App 組件並非根組件
<div id="app"> <App></App> </div>
import Vue from '../node_modules/vue/dist/vue.js' import App from "./App.vue"; new Vue({ el: '#app', components: { App } });
import Vue from '../node_modules/vue/dist/vue.js' import App from './App.vue' new Vue({ el: '#app', template: '<App/>', components: { App } });
vue-cli默認使用的是../node_modules/vue/dist/vue.js,而非runtime.
import Vue from '../node_modules/vue/dist/vue.js' import App from './App.vue' import login from './components/login.vue'; import register from './components/register.vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); let routes = [ {path: '/login', component: login}, {path: '/register', component: register}, ]; let router = new VueRouter({routes}); new Vue({ el: '#app', template: '<App/>', components: {App}, router });
./components/login.vue
<template> <div>login</div> </template> <script> export default { name: "login" } </script> <style scoped> </style>
./components/register.vue
<template> <div>register</div> </template> <script> export default { name: "register" } </script> <style scoped> </style>
./components/account.vue
<template> <div> <router-link to="/account/login">/account/login</router-link> <router-link to="/account/register">/account/register</router-link> <router-view></router-view> </div> </template> <script> export default { name: "account" } </script> <style scoped> </style>
App.vue
<template> <div id="app"> <router-link to="/account">/account</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'app', } </script> <style> </style>
./components/login.vue
<template> <div>login</div> </template> <script> export default { name: "login" } </script> <style scoped> </style>
./components/register.vue
<template> <div>register</div> </template> <script> export default { name: "register" } </script> <style scoped> </style>
./components/account.vue
<template> <div> <p>account</p> <login></login> <register></register> </div> </template> <script> import login from './login.vue'; import register from './register.vue'; export default { name: "account", components: { login, register } } </script> <style scoped> </style>
App.vue
<template> <div id="app"> <account></account> </div> </template> <script> import account from './components/account.vue' export default { name: 'app', components: { account } } </script> <style> </style>