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

posted @ 2021-04-12 18:01  albert飞的博客  阅读(1285)  评论(0编辑  收藏  举报