vue 组件和路由 cdn引入方式的写法

最新推荐文章于 2024-07-10 17:19:51 发布

盏茶作酒

最新推荐文章于 2024-07-10 17:19:51 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_43099985/article/details/86135580

版权

本文介绍了Vue组件的全局与局部注册方法，详细阐述了全局组件如何在所有Vue实例中使用，以及局部组件在特定Vue实例内的应用。此外，还探讨了在不使用脚手架的情况下，通过CDN引入Vue和Vue Router的方式，展示了如何配置路由，包括路由入口、出口的设置以及路由匹配组件的定义。示例代码清晰地演示了如何创建和绑定路径到组件的模板内容。

摘要由CSDN通过智能技术生成

组件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

<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模板属性！