vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别

组件

实现局部功能的代码和资源的集合

非单文件组件

1.定义组件（创建组件）

2.注册组件

3.使用组件（写组件标签）

定义

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的有点区别

el不写。最终所有的组件要经过vm的管理，有vm中的el决定哪个容器
data必须写成函数。避免组件复用时，数据存在引用关系
使用template配置组件结构

注册

局部注册：new Vue时传入components选项

全局注册：使用Vue.component('组件名','组件')

编写组件标签

<school></school>

<body>
<div id="root"><!--    使用组件--><employee></employee><hr><department></department>
</div>
</body>
<script>//定义组件const employee = Vue.extend({template: `<div><h2>{{ name }}</h2><h2>{{ age }}</h2><button @click="showName">点击提示姓名</button></div>`,data() {return {name: '胡梓卓',age: 18}},methods: {showName() {alert(this.name);}}});const department = Vue.extend({template: `<div><h2>{{ name }}</h2><h2>{{ numberOfPeople }}</h2><button @click="showName">点击提示部门名称</button></div>`,data() {return {name: '智能制造部',numberOfPeople: 203}},methods: {showName() {alert(this.name);}}});new Vue({el: '#root',//注册组件components: {employee: employee,department: department},data: {},method: {},computed: {},watch: {},filters: {},directives: {}});
</script>

注意点⚠️

组件名

一个单词组成：

（首字母小写）：school

（首字母大写）：School

多个单词组成：

（kebab-case）：my-school

（CamelCase）：MySchool

注意：

（1）组件名不要写成html中已有的元素名称

（2）可以使用name配置向指定组件在开发者工具中呈现的名字(第三方组件库)

组件标签

<school></school>
<school/>

不能使用脚手架时，<school/>会导致后续组件不能渲染

声明组件简写

const school = Vue.extend({options}) => const school = {options}

组件嵌套

<!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>Document</title><script src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="root"><app></app>
</div>
</body>
<script>const student = Vue.extend({name: 'student',data() {return {name: '涂鏊飞',age: 22}},template: `<div><h2>{{ name }}</h2><h2>{{ age }}</h2></div>`,components: {}});const hello = Vue.extend({name: 'hello',template: `<h1>介绍</h1>`});const school = Vue.extend({name: 'school',data() {return {name: '湖北工程学院',adress: '湖北孝感'}},template: `<div><div><h2>{{ name }}</h2><h2>{{ adress }}</h2></div><student></student></div>`,//注册子组件，模板包含student，外部要包含一个根节点components: {student}});const app = Vue.extend({name: 'app',template: `<div><hello></hello><school></school></div>`,//管理school和hellocomponents: {school, hello}});new Vue({el: '#root',components: {app},data: {},method: {},computed: {},watch: {},filters: {},directives: {}});
</script>
</html>

VueComponent构造函数

school組件本质是一个VueComponent的构造函数
Vue解析时，会帮我们创建school的组件实例对象，即执行new VueComponent(options)
每次调用Vue.extend，返回的是全新的VueComponent组件实例对象
关于this指向

(1)组件配置中：data,methods,watch,comptued指向【VueComponent组件实例对象】，简称vc
(2)new Vue(options)配置中：data,methods,watch,comptued指向【Vue实例对象】

vue实例与组件实例

组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

内置关系

原型链

function Demo() {this.a = 1999;this.b = 2000;}const d = new Demo();console.log(d.__proto__);console.log(Demo.prototype === d.__proto__);Demo.prototype.c = 2022;console.log(d.c);

 VueComponent.prototype.__proto__ === Vue.prototype

const app = Vue.extend({});
console.log(app.prototype.__proto__ === Vue.prototype) //true

让组件实例对象可以访问到vue原型上的属性和方法

单文件组件

⚠️main.js导入import App from './App.vue'需要在脚手架环境运行！！！

Uncaught SyntaxError: Cannot use import statement outside a module

School.vue

<template><div><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2></div>
</template><script>
export default {name: "School",data() {return {name: '湖北工程学院',address: '湖北省孝感市'}}
}
</script><style scoped>
h2 {color: #0dff1d;
}
</style>

Student.vue

<template><div><h2>学生姓名：{{ name }}</h2><h2>学生年龄：{{ age }}</h2></div>
</template><script>
export default {name: "Student",data() {return {name: '涂鏊飞',age: '22'}}
}
</script><style scoped>
h2 {color: #1c036c;font-weight: 700;
}
</style>

App.vue

<template><div><school></school><student></student></div>
</template><script>
import School from './School'
import Student from './Student'export default {name: "App",components: {Student, School}
}
</script>

main.js

import App from './App.vue'new Vue({el: '#root',components: {App},template: `<app></app>`
})

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单文件组件</title>
</head>
<body>
<div id="root">
</div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script src="./main.js"></script>
</html>

vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别相关推荐

Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
java组件化的优势_组件化编程开发如何判断组件的优劣性
随着互联网的不断发展,越来越多的程序员都在学习不同的编程开发方式,而组件化编程开发就是其中的一个常用开发方法.今天我们就一起来了解一下,组件化开发中关于组件的优劣性应该如何判断. 认识组件随着近些年 ...
【Vue教程】Vue.js推文
为什么前端工程师的需求这么大我国手机用户超过13亿,活跃智能机用户超过23亿部,全国网民人数约7.51亿.这么多人,每天都有几十分钟或者几个小时,要使用手机上网.全体中国人一年消费的网页和 App ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
android module中获取 app_Android组件化架构 - 4. 动态创建
Android 组件化中使用动态创建的作用是解耦: 1. 反射机制反射有两个作用:1.反编译:.class->.java;2.通过反射机制访问java对象中的属性,方法,构造器等: 实现反射, ...
Vue组件化编程开发
目录一.模块二.组件 (快捷键< + v + 回车生成单组件模板) 三.非单文件组件四.单文件组件: 首先理解模块和组件的基本概念: 一.模块 1.理解:向外提供特定功能的js程序,一般 ...
阿瑶的Vue学习笔记（2）Vue 组件化编程
2.非单文件组件 2.1 模块与组件.模块化与组件化 2.1.1模块理解:向外提供特定功能的js程序,一般就是一个js文件为什么:js文件很多很复杂作用:复用js,简化js的编写,提高js运行效 ...
前端模块与组件、模块化与组件化编程
文章目录前言 1.前端模块化 2.前端组件化一.模块与组件的理解,存在的意义以及作用 1.模块 2.组件---实现应用中局部功能代码和资源的集合 2.1 单文件组件与非单文件组件二.模块化与组件 ...

vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别

组件

非单文件组件

定义

注册

编写组件标签

注意点⚠️

组件名

组件标签

声明组件简写

组件嵌套

VueComponent构造函数

vue实例与组件实例

内置关系

原型链

单文件组件

School.vue

Student.vue

App.vue

main.js

index.html

vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别相关推荐

最新文章

热门文章

vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别

组件

非单文件组件

定义

注册

编写组件标签

注意点⚠️

组件名

组件标签

声明组件简写

组件嵌套

VueComponent构造函数

vue实例与组件实例

内置关系

原型链

单文件组件

School.vue

Student.vue

App.vue

main.js

index.html

vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别相关推荐

最新文章

热门文章

vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别

vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别相关推荐