文章目录
1.非单文件组件
1.1 基本使用
Vue中使用组件的三大步骤：
1.1.1 定义组件(创建组件)
const name = Vue.extend({
}
)
注意事项：
(1)里面可以写template(vm里也可以写)，但是注意里面必须有一个根节点，也就是必须先写一个div。
(2)组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
(3)data必须写成函数,也就是如下，因为避免组件被复用时，数据存在引用关系。
data() {
return {
}
},
(4)里面照样可以跟vm一样写函数方法，外面也可以调用
const name = Vue.extend({
template: `
<div class="demo">
<h2>秦燕燕身高：{{height}}</h2>
<h2>秦燕燕体重：{{weight}}</h2>
<button @click="showHeight">点我提示秦燕燕身高</button>
</div>
`,
// el:'#root', 不可写
data() {
return {
height: '160',
weight: '55'
}
},
methods: {
showHeight() {
alert(this.height)
}
},
})
1.1.2 注册组件
new Vue({
el: '#root',
//注册组件（局部注册）
components: {
name1:name//此处简写是name，为了对照我写的是复杂的形式
}
})
//全局注册组件
Vue.component('name1', name)//
1.1.3 使用组件(写组件标签)
<name1></name1>
1.2 几个注意点
1.关于组件名:
一个单词组成：
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字(就是如果在创建组件时，指定了name：qinyan,那么即使在vm的components里写了name:name,那么name也不管用，必须写或)
const s = ({
name: 'qinyan',
})
2.关于组件标签:
第一种写法：
<school></school>
第二种写法：
<school/>
备注：不使用脚手架时，会导致后续组件不能渲染,也就是只能渲染一次，后面的不会显示。
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = (options)
1.3 组件的嵌套
//定义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:'s'
}
},
//注册组件（局部），student必须在school的前面
components:{
student
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
//注册组件（局部），school必须在app的前面
components:{
school,
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件（局部）
components:{app}
})
1.4 VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写或，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。
1.5 一个重要的内置关系
2.单文件组件
从这里开始就要写vue文件了
School.vue
<template>
<div class="demo">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'大连交通',
address:'大连沙河口'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
注意事项：3种写暴露的方法
1.导出：export const school=vue.extend({})，导入import {school} form …
2.导出：export {school},导入import {school} form …
3.导出：export default const school=vue.extend({})，导入import school form …
因为这里vue.extend()可以省略，而且定义变量也可以省略，所以就写成了export default {}，导入import school form …
App.vue
<template>
<div>
<School></School>
</div>
</template>
<script>
//引入组件
import School from './School.vue'//.vuek
export default {
name:'App',
//注册组件
components:{
School
}
}
</script>
main.js
import App from './App.vue'//但是这里会报错
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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>
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
