vue2入门---＞非单文件组件(html直接使用组件)

1.非单文件组件

1.1 介绍

1.使用步骤
2. 几个注意点

1.2 组件创建(定义)

1.2.1 创建介绍

1. 通过Vue.extend({})进行创建定义，可以省略为{}

2.里面的内容几乎与vue示例里面的一样，正常写即可

3.列子

const student = Vue.extend({
   template:`
      
         学生姓名：{{studentName}}
         学生年龄：{{age}}
      
   `,
   data(){
      return {
         studentName:'张三',
         age:18
      }
   }
})

4.简写例子

 {
   template:`
      
         学生姓名：{{studentName}}
         学生年龄：{{age}}
      
   `,
   data(){
      return {
         studentName:'张三',
         age:18
      }
   }
}

5. export default

暴露，导入的时候 from xx import xxx

不暴露的话，无法导入

1.2.2 代码示例


//第一步：创建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(){
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})
 
		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}h2>
					<h2>学生年龄：{{age}}h2>
				div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}h2>
				div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})

1.3 注册

1.3.1 介绍

1.示例
Vue.component('hello',hello)

//创建vm
new Vue({
   el:'#root',
   data:{
      msg:'你好啊！'
   },
   //第二步：注册组件（局部注册）
   components:{
      school,
      student
   }
})
2.组件的名称由components的key决定，如果key value一致，可以省略，写个key即可

1.3.2 代码示例


//第二步：全局注册组件
		Vue.component('hello',hello)
 
		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}
		})

1.4 使用


"root">
			
			<student>student>

1.5. 完整实例


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>
			<hr>
			<h1>{{msg}}h1>
			<hr>
			
			<school>school>
			<hr>
			
			<student>student>
		div>
 
		<div id="root2">
			<hello>hello>
		div>
	body>
 
	<script type="text/javascript">
		Vue.config.productionTip = false
 
		//第一步：创建school组件
		const school = Vue.extend({
			template:`
				
					学校名称：{{schoolName}}
					学校地址：{{address}}

			// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。

data(){

return {

schoolName:'尚硅谷',

address:'北京昌平'

}

},

methods: {

showName(){

					alert(this.schoolName)

}

},

})

//第一步：创建student组件

		const student = Vue.extend({

			template:`

学生姓名：{{studentName}}

学生年龄：{{age}}

2. 组件的嵌套

2.1 代码示例

html> <html> <head> <meta charset="UTF-8" /> <title>组件的嵌套title> <script type="text/javascript" src="../js/vue.js">script> head> <body> <div id="root"> div> body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //定义student组件 const student = Vue.extend({ name:'student', template:` <div> <h2>学生姓名：{{name}}h2> <h2>学生年龄：{{age}}h2> div> `, data(){ return { name:'尚硅谷', age:18 } } }) //定义school组件 const school = Vue.extend({ name:'school', template:` <div> <h2>学校名称：{{name}}h2> <h2>学校地址：{{address}}h2> <student>student> div> `, data(){ return { name:'尚硅谷', address:'北京' } }, //注册组件（局部） components:{ student } }) //定义hello组件 const hello = Vue.extend({ template:`<h1>{{msg}}h1>`, data(){ return { msg:'欢迎来到尚硅谷学习！' } } }) //定义app组件 const app = Vue.extend({ template:` <div> <hello>hello> <school>school> div> `, components:{ school, hello } }) //创建vm new Vue({ template:'<app>app>', el:'#root', //注册组件（局部） components:{app} }) script> html>

3. 关于VueComponent

3.1 介绍

3.2 代码示例

html> <html> <head> <meta charset="UTF-8" /> <title>VueComponenttitle> <script type="text/javascript" src="../js/vue.js">script> head> <body> <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:` 学校名称：{{name}} 学校地址：{{address}} `, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, }) const test = Vue.extend({ template:`atguigu` }) //定义hello组件 const hello = Vue.extend({ template:` {{msg}} `, data(){ return { msg:'你好啊！' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} }) script> html>

原文地址：https://blog.csdn.net/qq_52385631/article/details/126681569