Vue学习笔记
一、什么是组件、为什么使用组件?
把整个页面划分为一个个小的模块,这些模块共同完成整个页面的功能,这些小模块就是组件。图片左侧是组件示意图,这个页面由多个组件构成,有的组件内部还包含多个组件。例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。右侧是组件的组织形式,组件树。使用组件开发工程,可以帮助我们管理,组件的可复用性提高了开发效率。
二、组件基础
1.注册并使用组件
共有三个步骤:
1、创建组件构造器Vue.extend
2、注册组件Vue.component
3、在vue实例作用域内使用组件
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件化的基本使用</title>
<script src="../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--3、使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<button-counter></button-counter>
</div>
<script>
/**
*组件化使用步骤(原生版本)
*1、创建组件构造器对象
*2、注册组件
*3、在vue实例作用域内使用组件
*/
// 1、构造器
const componentConstructor = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是内容,组件一</p>
<p>我是组件二</p>
</div>
`,
});
// 2、注册组件
Vue.component("my-cpn", componentConstructor);
const app = new Vue({
el: "#app",
data: {
},
});
</script>
</body>
</html>
2.全局组件和局部组件
组件注册的地方不同,可分为全局组件和局部组件。局部组件在Vue对象内部的components属性下注册。
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>全局组件和局部组件</title>
<script src="../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--3、使用组件-->
<my-cpn></my-cpn>
<my-cpn>