Vue组件化编程 vue学习53~60 _组件

2 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 非单文件组件基本使用
Vue中使用组件的三大步骤：
定义组件
使用Vue.()创建，其中和new Vue()时传入的那个几乎一样，但也有点区别；
区别如下：
讲解一下面试小问题：data必须写成函数：
这是 js 底层设计的原因：举个例子
对象形式

文章插图

let data = http://www.kingceram.com/post/{a: 99,b: 100}let x = data;let y = data;// x 和 y 引用的都是同一个对象，修改 x 的值， y 的值也会改变x.a = 66;console.loh(x); // a:66 b:100console.log(y); // a:66 b:100

函数形式

function data() {return {a: 99,b: 100}}let x = data();let y = data();console.log(x === y); // false// 我的理解是函数每调用一次就创建一个新的对象返回给他们

备注：使用可以配置组件结构。
创建一个组件案例：Vue.() 创建

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'}}})

注册组件
局部注册

>//创建vmnew Vue({el: '#root',data: {msg:'你好?。?#39;},//第二步：注册组件（局部注册）components: {school: school,student: student// ES6简写形式// school,// student}})

全局注册
>//第二步：全局注册组件Vue.component('hello', hello)
写组件标签
{{msg}}>>
几个注意点：
关于组件名：
一个单词组成：
多个单词组成：
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
eg:
【Vue组件化编程vue学习53~60】

const s = Vue.extend({name: 'atguigu',template: `学校名称：{{name}}学校地址：{{address}}`,data() {return {name: 'yaya',address:'北京'}}})