本文详细介绍了Vue.js的组件系统，包括全局组件、局部组件及其注意事项，深入讲解了组件定义的不同方式，以及如何获取动态元素。同时，讨论了Vue的路由、生命周期、计算属性和导出导入机制。此外，还涵盖了CommonJS模块、CSS样式引入、热更新配置以及使用vue-cli快速搭建项目的方法。
vue-day2加强
1.全局组件
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
<!--
组件的认识：组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
一句话总结组件： 组件就是自定义标签，它内部存储了很多html代码
a.html b.html c.html
1000 2000 3000
这三个界面其中有公共的html代码是500行，组件就是把这500行代码抽成一个标签，然后让其它页面
去使用该标签就可以了
组件的分类：
1.全局组件（在所有vue实例中(在它所挂载元素下面有效)有效）
创建全局组件的语法格式：
Vue.component("组件名",{
template:"html元素"
})
2.局部组件（在自己vue实例中(在它所挂载元素下面有效)有效）
-->
<script type="text/javascript">
/*注册全局代码*/
Vue.component("mycomponent",{
template:"<h1>我是全局主键</h1>"
}),
new Vue({
el:"#app"
})
</script>
2.局部组件
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--局部组件，只会在相对应的局部被使用-->
<div id="app">
<mycomponents></mycomponents>
<outcomponent></outcomponent>
</div>
<div id="app1">
<mycomponents></mycomponents>
</div>
</body>
<script type="text/javascript">
/*这个必须要用参数来接收*/
let outcomponent = Vue.component("outcomponent",{
template:"<h1>我是外部组件<h1>"
})
new Vue({
el:"#app",
components:{
mycomponents:{
template:
"<d1>我是局部组件</di>"
},
/*引用已经创建好的组件*/
incomponents : outcomponent
}
})
/*局部的就不能作用在这个里面*/
new Vue({
el:"#app1",
})
</script>
3.组件应该注意的事项
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<!--组件的使用注意事项:1.如果使用的是名字使用的是驼峰命名，那么在引入的时候要用横杠隔开<my-component></my-component>
最好的方式就是命名都是使用小写，不要使用驼峰命名
2.组件使用的时候只有一个根，否则的话后面的根是不会显示的，多根存在只会显示一个根
-->
<script type="text/javascript">
Vue.component("myComponent",{
/*template:"<h1>组件应该注意事项</h1><h2>这个是不会显示的</h2>",*/
template:"<div><h1>这个能显示</h1><h2>这个也能显示</h2></div>"
})
new Vue({
el:"#app"
})
</script>
4.定义组件的方式二
<title>Title</title>
<!--注意：当你导入vue的核心库之后，该页面就有一个内置对象叫做Vue-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
最低0.47元/天 解锁文章
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
