赞
踩
①模块
(1)理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
(2)为什么: js 文件很多很复杂
(3)作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
②模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
①组件
理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
为什么: 一个界面的功能很复杂
②组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。
组件化和传统的区别图解:
![
基本使用实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>{{msg}}</h1> <hr> <!-- 第三步:编写组件标签 --> <school></school> <hr> <!-- 第三步:编写组件标签 --> <student></student> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //第一步:创建school组件 const school = Vue.extend({ //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。 template:` <div class="demo"> <h2>学校名称:{{schoolName}}</h2> <h2>学校地址:{{address}}</h2> </div> `, data(){ return { schoolName:'尚硅谷', address:'北京昌平' } } }) //第一步:创建student组件 const student = Vue.extend({ template:` <div> <h2>学生姓名:{{studentName}}</h2> <h2>学生年龄:{{age}}</h2> </div> `, data(){ return { studentName:'JOJO', age:20 } } }) //创建vm new Vue({ el:'#root', data:{ msg:'你好,JOJO!' }, //第二步:注册组件(局部注册) components:{ school, student } }) </script> </html>
(1)定义组件(创建组件)
(2)注册组件
(3)使用组件(写组件标签)
细说三大步骤:
如何定义一个组件:使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
如何注册组件
编写组件标签:< school>< /school>
关于组件名
备注:
关于组件标签:
创建组件的一个简写方式:
实例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>组件的嵌套</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <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 } }) //创建vm new Vue({ template:` <app></app> `, el:'#root', components:{ app } }) </script> </html>
school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
我们只需要写或,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!
关于this指向:
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象),Vue的实例对象,以后简称vm.
只有在本笔记中VueComponent的实例对象才简称为vc
一个重要的内置关系:VueComponent.prototype.__proto__
=== Vue.prototype
要想清楚了解这个内置关系就要先了解JavaScript高级部分的原型链相关的知识,下面先简单复习一下原型链的知识:
了解原型链后再分析Vue与VueComponent的关系
上图中的黄色的线本应该指向Object的原型对象的,Vue中将其改为指向Vue的原型对象。就有了VueComponent.prototype.__proto__
=== Vue.prototype
为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
了解了上面的非单文件组件后,单文件组件就容易理解了。单组件让每一个组件都自成一个文件,后缀为.vue,里面包含三部分:、、,分别在这三个标签里写结构、样式、逻辑。
这些多个组件文件需要组合起来这就涉及到js模块化的知识了,下面简单复习一下:
模块功能主要由两个命令(暴露和引入)构成:export和import
暴露数据语法汇总:
统一暴露
分别暴露:
默认暴露(default)(vue中常用)
通用的导入方式
解构赋值形式
简便形式(只针对默认暴露)
简单复习一下后,将上节的非单文件组件例子写成单文件组件,当然这就要写多个文件,如下:
首先是School组件和Student组件:
<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>
<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 Student from './Student.vue' export default { name:'App', components:{ School, Student } } </script>
接着写main.js,里面创建vue实例
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>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。