发表于： 2023-05-22 19:42:59
0 139
今天的vue知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基本使用</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
Vue中使用组件的三大步骤:
1、定义组件(创建组件)
2、注册组件
3、使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别:
区别如下:
1.el不要写,+为什么? 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么? 避免组件被复用时，数据存在引用关系。备注:使用template可以配置组件结构。
二、如何注册组件?
1.局部注册: 靠new Vue的时候传入components选项
2.全局注册: 靠Vue.component(组件名 ,组件)
三、编写组件标签:
<school></school>
-->
<div id="root">
<hello></hello>
<hr>
<h1>{{msg}}</h1>
<hr>
<!-- 第三步，编写组件标签 -->
<school></school>
<hr>
<!-- 第三步，编写组件标签 -->
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script>
Vue.config.productionTip = false;
//第一步，创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我跳出学校名</button>
</div>
`,
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
}
},
})
const hello = Vue.extend({
template: `
<div>
<h2>你好啊{{name}}</h2>
</div>
`,
data() {
return {
name: 'Tom'
}
}
})
Vue.component('hello', hello)
const vm = new Vue({
el: '#root',
data: {
msg: '你好啊'
},
//第二步，注册组件（局部注册）
components: {
school,
student
}
})
new Vue({
el: '#root2',
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>几个注意点</title>
<script type="text/javascript" src="../vue_basic/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>
<script>
Vue.config.productionTip = false;
//定义组件
const s = Vue.extend({
name:'school',
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'修真院',
address:'成都'
}
}
})
const vm = new Vue({
el: '#root',
data: {
msg:'欢迎学习Vue'
},
components:{
school:s
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件的嵌套</title>
<script type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<div id="root">
<app></app>
</div>
<script>
Vue.config.productionTip = false;
//定义school组件
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: '欢迎学习Vue!'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
const vm = new Vue({
el: '#root',
//注册组件(局部)
components: {
app
}
});
</script>
</body>
</html>
返回列表
评论