vue 組件和路由 cdn引入方式的寫法。。。。

組件component的寫法有全局寫法和局部寫法，全局寫法在所有vue實例中都可用，局部寫在一個vue實例里面

全局寫法：

<root></root>

Vue.component('root',{template:'<div>全局全局</div>'})

這樣我們就把就定義了一歌全局組件,root,直接使用<root>標簽調用，就把組件中的template模板內容渲染到<root></root>標簽里了！

局部寫法：

<root></root>
var vm=new Vue({
el:'實例名',
components:{
root:{template:'<div>局部局部</div>'}
}
})

　

有時候我們不想用腳手架，用cdn引入方式路由怎么寫呢？

首先引入JS

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
然后html頁面

<div id="app">
<!-- 路由入口 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
</div>

然后js頁面

const app = new Vue({
el:"#app",
router:new VueRouter({
routes:[
{path:'/foo',component:{template:"<div>foo</div>"}},
{path:'/bar',component:{template:"<div>bar</div>"}}
]
})
})

在vue實例中定義router屬性，屬性的值是new VueRouter(), new VueRouter({})的參數是對象，里面有個routers屬性，routers屬性是一個數組，數組中的每一個都是對象，對象中有path屬性指定路徑，component和路徑綁定的組件，組件中有template模板屬性！
————————————————
版權聲明：本文為CSDN博主「FOR=10000」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43099985/article/details/86135580