一、非单文件组件
1.1、单文件组件的使用
1.1.1、局部注册
1、第一步：创建school组件
2、第二步：注册组件（局部注册）
3、第三步：使用组件（编写组件标签）
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>{{msg}}</h1><hr><!-- 第三步：编写组件标签 --><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false//第一步：创建school组件const school = Vue.extend({template:`<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button> </div>`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。data(){//注意：这里的data要写成函数式return {schoolName:'Vue学堂',address:'大牛岭'}},methods: {showName(){alert(this.schoolName)}},})//创建vmnew Vue({el:'#root',data:{msg:'你好啊！'},//第二步：注册组件（局部注册）components:{school}})</script>
</html>
1.1.2、全局注册
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器--><div id="root"><!-- 第三步：编写组件标签 --><hello></hello><h1>{{msg}}</h1></div><hr><div id="root2"><!-- 第三步：编写组件标签 --><hello></hello></div>
</body><script type="text/javascript">Vue.config.productionTip = false//第一步：创建hello组件const hello = Vue.extend({template: `<div> <h2>你好啊！{{name}}</h2></div>`,data() {//注意：这里的data要写成函数式return {name: 'Tom'}}})//第二步：全局注册组件Vue.component('hello', hello)//创建vmnew Vue({el: '#root',data: {msg: '你好啊！'}})new Vue({el: '#root2',})
</script></html>
1.2、几个注意点
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>几个注意点</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 几个注意点：1.关于组件名:一个单词组成：第一种写法(首字母小写)：school第二种写法(首字母大写)：School多个单词组成：第一种写法(kebab-case命名)：my-school第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)备注：(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。(2).可以使用name配置项指定组件在开发者工具中呈现的名字。2.关于组件标签:第一种写法：<school></school>第二种写法：<school/>备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。3.一个简写方式：const school = Vue.extend(options) 可简写为：const school = options--><!-- 准备好一个容器--><div id="root"><h1>{{msg}}</h1><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false//定义组件const s = Vue.extend({name:'atguigu',template:`<div><h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div>`,data(){return {name:'DGUT',address:'北京'}}})new Vue({el:'#root',data:{msg:'欢迎学习Vue!'},components:{school:s}})</script>
</html>
1.3、VueComponent的构造函数
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>VueComponent</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 关于VueComponent：1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！4.关于this指向：(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。--><!-- 准备好一个容器--><div id="root"><school></school><hello></hello></div></body><script type="text/javascript">Vue.config.productionTip = false//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button></div>`,data(){return {name:'尚硅谷',address:'北京'}},methods: {showName(){console.log('showName',this)}},})const test = Vue.extend({template:`<span>atguigu</span>`})//定义hello组件const hello = Vue.extend({template:`<div><h2>{{msg}}</h2><test></test> </div>`,data(){return {msg:'你好啊！'}},components:{test}})// console.log('@',school)// console.log('#',hello)//创建vmconst vm = new Vue({el:'#root',components:{school,hello}})</script>
</html>
二、单文件组件
2.1、前置知识
分别暴露
统一暴露
默认暴露
2.2、组件
