前端基础之组件
组件：实现应用中局部功能代码和资源的集合
非单文件组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
<!-- 3.编写组件标签 -->
<school></school>
<hr>
<student></student>
</div>
<script type="text/javascript">
//1.创建school组件
const school= Vue.extend({
template:`
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{addr}}</h2>
<button @click="showName">点我提示学校名称</button>
</div>
`,
//不需要创建el配置项
data(){
return{
schoolName:'尚硅谷',
addr:'北京',
}
},
methods: {
showName(){
alert(this.schoolName)
}
}
})
//1.创建student组件
const student= Vue.extend({
template:`
<div>
<h2>学生名称:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
//不需要创建el配置项
data(){
return{
studentName:'张三',
age:18
}
}
})
//1.创建hello组件
const hello=Vue.extend({
template:`
<div>
<h1>你好</h1>
</div>
`,
data(){
return{
name:'tim'
}
}
})
//2.注册全局组件
Vue.component('hello',hello)
//创建vm
const vm= new Vue({
el:'#root',
data:{
msg:'你好'
},
//2.组件注册（局部注册）
components: {
school,
student
}
})
</script>
</body>
</html>
组件的结构我们在template中使用。并且使用 ` ` 将其包裹
可以使用name配置项指定组件在开发者工具中呈现的名字
组件标准化写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<app></app>
</div>
<script type="text/javascript">
//定义student组件
const student=Vue.extend({
template:`
<div>
<h2>学生年龄:{{age}}</h2>
<h2>学生名称:{{name}}</h2>
</div>
`,data(){
return{
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<student></student>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
//注册子组件，局部
components: {
student
}
})
//注册hello组件
const hello= Vue.extend({
template:`
<div>
<h1>{{msg}}</h1>
</div>
`,
data(){
return{
msg:'hello'
}
}
})
//创建app组件
const app= Vue.extend({
template:`
<div>
<school></school>
<hello></hello>
</div>
`,
components:{
school,
hello
}
})
//注册组件
new Vue({
el:'#root',
components: {app}
})
</script>
</body>
</html>
我们在组件的创建的时候，需要将父组件定义在子组件的后面，并且，需要一个统一的app组件来作为所有组件的父组件，然后只将其注册到vm中即可
VueComponent构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<school></school>
</div>
<script type="text/javascript">
//定义school组件
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
methods: {
showName(){
console.log(this.name,this)
}
}
})
console.log('@',school)
new Vue({
el:'#root',
components: {
school
}
})
</script>
</body>
</html>
我们定义的组件本质上就是一个名为VueComponent的构造函数，我们在进行<school></school>的时候，vue会自动帮我们执行new VueComponent()
每次调用vue.extend(),放回的都是一个新的VueComponent，
在组件中，启动的this指向的是VueComponent，而在new Vue({})中的则是Vue
VueComponent与Vue联系
VueComponent.prototype.__proto===Vue.prototype ，VC能够同构隐式管理链能多去查找一步
VC也能去访问Vue原型上的属性、方法
也就是说，在Vue中添加的属性，VC通过隐式关系链就能访问到VM中的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
<script type="text/javascript">
Vue.prototype.x=99
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<button @click="showx">点我展示x</button>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
methods: {
showx(){
console.log(this.x)
}
}
})
console.log('@',school)
const vm= new Vue({
el:'#root',
data:{
msg:'hello'
},
components: {
school
}
})
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
单文件组件
项目结构为
Student.vue与School.vue是我们创建的组件，App.vue是用于管理和引入这两个组件的，vm是在main.js中创建并且用于引入App.vue，index.html是文件的总入口和总div的创建
School.vue
<template>
<!-- 组件的结构 -->
<div class="demo">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ addr }}</h2>
<button @click="showName">点我提示学校名称</button>
</div>
</template>
<script>
// 组件交互的代码
export default { //对外暴露
name:'School',//与vue文件命名一致
data() {
return {
name: '尚硅谷',
addr: '北京',
}
},
methods: {
showName() {
alert(this.name)
}
}
}
</script>
<style>
/* 组件的样式 */
.demo {
background: orange;
}
</style>
Student.vue
<template>
<div >
<h2>学生名称:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name: '李四',
age:18
}
}
}
</script>
App.vue
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from './School.vue'
import School from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
<style>
</style>
main.js
import App from './App.vue'
new VUe({
el:'#root',
template:`<App></App>`,
components: {
App
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单文件文件的语法</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root"></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script> <!-- 入口文件 -->
</body>
</html>