#|vu2 尚硅谷组件化编程 vue|vue.js|javascript|前端|vue

2.1 模块与组件、模块化与组件化
2.1.1. 模块

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
为什么: js 文件很多很复杂
作用:复用js,简化js的编写,提高js运行效率
2.1.2. 组件
理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率
2.1.3. 模块化
当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
2.1.4. 组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。
2.2. 非单文件组件
模板编写没有提示
没有构建过程, 无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用
2.3. 单文件组件
2.3.1. 一个.vue 文件的组成(3 个部分) 1. 模板页面

组件官网教程链接
https://cn.vuejs.org/guide/essentials/component-basics.html

文章图片

文章图片

非单文件组建基本使用

基本使用 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> {{msg}}>> type="text/javascript"> Vue.config.productionTip = false//第一步：创建school组件 const school = Vue.extend({ template:`学校名称：{{schoolName}} 学校地址：{{address}} `, // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。 data(){ return { schoolName:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.schoolName) } }, })//第一步：创建student组件 const student = Vue.extend({ template:`学生姓名：{{studentName}} 学生年龄：{{age}}`, data(){ return { studentName:'张三', age:18 } } })//第一步：创建hello组件 const hello = Vue.extend({ template:`你好啊！{{name}}`, data(){ return { name:'Tom' } } })//第二步：全局注册组件 Vue.component('hello',hello)//创建vm new Vue({ el:'#root', data:{ msg:'你好啊！' }, //第二步：注册组件（局部注册） components:{ school, student } })new Vue({ el:'#root2', })

组件命名规范

几个注意点 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> {{msg}} > type="text/javascript"> Vue.config.productionTip = false//定义组件 const s = Vue.extend({ name:'atguigu', template:`学校名称：{{name}} 学校地址：{{address}} `, data(){ return { name:'尚硅谷', address:'北京' } } })new Vue({ el:'#root', data:{ msg:'欢迎学习Vue!' }, components:{ school:s } })

嵌套组件

文章图片

组件的嵌套 - 锐客网type="text/javascript" src="https://www.it610.com/js/vue.js"> type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//定义student组件 const student = Vue.extend({ name:'student', template:`学生姓名：{{name}} 学生年龄：{{age}} `, data(){ return { name:'尚硅谷', age:18 } } })//定义school组件 const school = Vue.extend({ name:'school', template:`学校名称：{{name}} 学校地址：{{address}} `, data(){ return { name:'尚硅谷', address:'北京' } }, //注册组件（局部） components:{ student } })//定义hello组件 const hello = Vue.extend({ template:`{{msg}}`, data(){ return { msg:'欢迎来到尚硅谷学习！' } } })//定义app组件 const app = Vue.extend({ template:``, components:{ school, hello } })//创建vm new Vue({ template:'', el:'#root', //注册组件（局部） components:{app} })

关于VueComponent：

VueComponent - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> > type="text/javascript"> Vue.config.productionTip = false//定义school组件 const school = Vue.extend({ name:'school', template:`学校名称：{{name}} 学校地址：{{address}} `, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, })const test = Vue.extend({ template:`atguigu` })//定义hello组件 const hello = Vue.extend({ template:`{{msg}} `, data(){ return { msg:'你好啊！' } }, components:{test} })// console.log('@',school) // console.log('#',hello)//创建vm const vm = new Vue({ el:'#root', components:{school,hello} })

vm 和cv的关系

VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。

new Vue实例时 vm比vc多传el参数
vc的data必须是一个函数

文章图片

一个重要的内置关系 - 锐客网type="text/javascript" src="https://www.it610.com/js/vue.js"> > type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.prototype.x = 99//定义school组件 const school = Vue.extend({ name:'school', template:`学校名称：{{name}} 学校地址：{{address}} `, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showX(){ console.log(this.x) } }, })//创建一个vm const vm = new Vue({ el:'#root', data:{ msg:'你好' }, components:{school} })//定义一个构造函数 /* function Demo(){ this.a = 1 this.b = 2 } //创建一个Demo的实例对象 const d = new Demo()console.log(Demo.prototype) //显示原型属性console.log(d.__proto__) //隐式原型属性console.log(Demo.prototype === d.__proto__)//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99 Demo.prototype.x = 99console.log('@',d) */

单文件组件 vscode 需要安装插件才会识别 xxx.vue 文件

文章图片

单文件主要三部分内容安装了vetur 插件后，输入 "

文章图片

js模块的暴露和引用

文章图片

文章图片

声明组件的简写方式

文章图片

html中引入js

文章图片

文章图片

单文件结构

文章图片

Schoole.vue

> export default { name:'School', data(){ return { name:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.name) } }, } > .demo{ background-color: orange; }

Student.vue

> export default { name:'Student', data(){ return { name:'张三', age:18 } } }

App.vue

> //引入组件 import School from './School.vue' import Student from './Student.vue' export default { name:'App', components:{ School, Student } }

main.js

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

【#|vu2 尚硅谷组件化编程】index.html

练习一下单文件组件的语法 - 锐客网 type="text/javascript" src="https://www.it610.com/js/vue.js"> type="text/javascript" src="https://www.it610.com/article/main.js">