前端入门之VUE--vue组件化编程

2025/3/17 21:06:44 来源：https://blog.csdn.net/weixin_74085818/article/details/144411187 浏览: 次关键词：前端入门之VUE--vue组件化编程

前言

VUE是前端用的最多的框架；
这篇文章是本人大一上学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

- - 2、Vue组件化编程
  - - 2.1、组件
    - 2.2、基本使用
    - - 2.2.1、VueComponent

2、Vue组件化编程

2.1、组件

在这里插入图片描述

组件：用来实现局部功能的代码和资源的集合

2.2、基本使用

三大步骤：
1. 定义组件（常见组件）
2. 注册组件
3. 使用组件（写组件标签）

<div id="root">//3.写组件标签<school></school><student></student>
</div>
<script>//1.创建school组件const school = Vue.extend({//不要写eltemplate: `<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2>	</div>`,data(){return {schoolName: '尚硅谷',address: '北京昌平'}}})，//1.创建student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {studentName: 'cy',age: 20}
}})//创建vmnew Vue({el: '#root',//2.注册组件（局部注册）components: {school,student}})
</script>

关于组件名：

一个单词组成
- 第一种写法（首字母小写）
- 第二种写法（首字母大写）
多个单词组成：
- 第一种写法：如：my-school
- 第二种写法：如：MySchool（需要Vue脚手架支持）

注意：组件名尽可能避免HTML已经有的元素名称

关于组件标签：
- 第一种写法：
- 第二种写法：

<body><div id="root"></div>
</body><script type="text/javascript">Vue.config.productionTip = false//定义student组件const student = Vue.extend({template:`<div><h2>学生名称：{{name}}</h2>	<h2>学生年龄：{{age}}</h2>	</div>`,data(){return {name:'JOJO',age:20}}})//定义school组件const school = Vue.extend({template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	<student></student></div>`,components:{student},data(){return {name:'尚硅谷',address:'北京'}}})//定义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}})//创建vmnew Vue({template:`<app></app>`,el:'#root',components:{app}})</script>
</html>

2.2.1、VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
2. new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed`中的函数它们的this均是Vue实例对象