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 底层设计的原因:举个例子
对象形式

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

文章插图
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:'北京'}}})