目录
1 什么是Vue组件?
组件
组件是什么:组件就是自定义标签,他是vue中核心功能之一,是把页面当中的可以重复使用的内容进行封装,方便调用
全局组件
作用域:在所有实例中都可以使用
语法:Vue.component:{"组件名不能喝现有的html标签重名",{
template:"<div></div>"
}
注意
- 在HTML 模板中使用组件时,首字母大写的形式只能在 template 配置项中的 HTML 代码中使用,或者在后面要讲的单文件组件的 HTML 中使用。
- 如果在像 index.html 这种纯html 文件中使用组件时,必须使用小写单词+短横线的形式。
- 定义名字的时候尽量使用两个或以上的单词,以免跟原生的 HTML标签名冲突。
2 创建一个Vue组件
html:
<div id="app">
<div>
<word-count></word-count>
<word-count></word-count>
<word-count></word-count>
</div>
</div>
js:
const app = Vue.createApp({});
app.component("WordCount", {
//组件名称 组件的配置项
//创建一个组件
data() {
return {
content: "",
};
},
computed: {
count() {
return this.content.length;
},
},
template: `
<div>
<input v-model="content" />
<p>你共输入了 {
{ count }} 个字符</p>
</div>
`,
});
const vm = app.mount("#app");
3 全局注册组件
html:
<div id="app">
<div>
<word-count-app />
</div>
</div>
js:
const app = Vue.createApp({});
app.component("WordCount", {
data() {
return {
content: "",
};
},
computed: {
count() {
return this.content.length;
},
},
template: `
<div>
<input v-model="content" />
<p>你共输入了 {
{ count }} 个字符</p>
</div>
`,
});
app.component("WordCountApp", {
template: `<div>
<h1>字符统计应用</h1>
<WordCount />
</div>`,
});
const vm = app.mount("#app");
4 局部注册组件
- 作用域只有当前vue对象
- 使用import 导入能缩小打包体积,只打包引入的文件
html:
<title>局部注册组件</title>
</head>
<body>
<div id="app">
<div>
<component-a></component-a>
<component-c></component-c>
</div>
</div>
<script src="index.js" type="module"></script>
<!-- type="module" 才能生效 -->
</body>
ComponentA.js
export default {
template: `<p>我是组件 A</p>`,
};
ComponentC.js
import ComponentB from "./ComponentB.js";
export default {
template: `<p>我是组件 C</p><ComponentB />`,
components: { ComponentB },
};
js:
// 示例:局部注册组件
import ComponentA from "./components/ComponentA.js";
import ComponentC from "./components/ComponentC.js";
const app = Vue.createApp({
components: {
ComponentA, // 等价于 ComponentA: ComponentA
ComponentC,
},
});
const vm = app.mount("#app");
在真实开发过程中 不太试用上述 全局 局部 组件的创建引入方式 ,一般采用Vue 脚手架来进行引入
5 脚手架:Vue 应用开发的利器
为什么使用脚手架?
1 大型项目具有大量组件 使用普通的vue 组件 会使组件与代码分离 ,不利于管理
2 使用<script>标签引入 VUE太过繁琐
3 使用 template 来写代码 要把html代码写成字符串的形式 ,没有代码高亮 ,难度高,不方便
4 使用 import 外部CSS JS 会有命名冲突等问题, 而且样式与组件代码分离不利于维护
可以使用 .vue文件 多个组件 HTML代码 css样式 写在一个文件中而且以html代码形式
再用@vue/compiler-sfc 这个工具进行编译
但Vue 脚手架对工具进行了封装
脚手架是一组封装好的工具箱,用于快速的生成一个项目,预置了常用的插件和依赖,能够快速上手开发。
- 脚手架的好处
- 工程化的开发项目
- 支持Vue 单一文件组件结构
- 提供开发服务器,支持热重载
- 支持插件
node.js + npm