标签组件下的文章 - 蘇阿細

登录

标签搜索

蘇阿細

累计撰写 389 篇文章
累计收到 4 条评论

搜索到 1 篇与的结果

2022-05-26
组件概念：局部功能或代码的集合1.使用组件的三个步骤（1）定义（创建组件）（2）注册组件（3）使用组件（写组件标签）2. 如何定义一个组件使用Vue.extend(options)创建，其中options 和 new Vue(options)传入的options几乎一致，区别如下：（1）组件中不写el，因为最终所有的组件都要经过一个vm管理，由vm中的 el决定服务于哪个容器；（2）data必须写成函数，避免组件被复用时数据存在引用关系；注：使用template可以配置组件结构3. 如何注册组件（1）局部注册：new Vue()时传入components选项；（2）全局注册：Vue.component('组件名', 组件位置)4. 编写组件标签<demo></demo><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root">  <hello></hello> <hr> <school></school> <hr> <student></student> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //1.创建组件 //school组件 const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">学校信息</button> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } }, methods: { showName() { alert(this.schoolName) } } }) //student组件 const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: '孙笑川', age: 33 } } }) //hello组件 const hello = Vue.extend({ template: ` <div> <h2>你好</h2> </div> ` }) //2.全局注册组件 Vue.component('hello', hello) //创建Vue实例 new Vue({ el: '#root', //2.注册组件（局部注册） components: { school,student } }) </script> </body> </html>5. 几个注意事项（1）组件名：一个单词组成：首字母小写 demo首字母大写 Demo多个单词组成kebab-case：my-demoCamelCase（大驼峰）：MyDemo（需在vue-cli脚手架环境中）注：组件名尽可能回避html关键字；可以使用name配置项指定组件的名称（2）组件标签第一种写法：第二种写法：<demo/>==注：第二种写法如果不在脚手架环境中，会导致后续组件无法渲染==（3）简写形式const demo = Vue.extend(options) 可简写为：const demo = options<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>几个注意的点</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>{{msg}}</h2> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) //创建Vue实例 new Vue({ el: '#root', data: { msg: '几个注意的点' }, components: { school } }) </script> </body> </html>6. VueComponent（1）demo组件本质是一个名为VueComponent的构造函数，由Vue.extend生成；（2）只需写<demo> 或 <demo></demo>，Vue解析时会帮我们创建demo组件的实例对象；（3）每次调用Vue.extend，返回的都是一个全新的VueComponent（4）关于this指向组件配置中：data，methods，watch，computed等函数中，它们的this指向均是VueComponentnew Vue(options)配置中：data，methods，watch，computed等函数中，它们的this指向均是Vue实例对象（5）VueComponent简称组件实例对象（vc）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的嵌套</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <app></app> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //student组件 const student = Vue.extend({ template: ` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data() { return { studentName: '孙笑川', age: 33 } } }) //school组件 const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } }, components: { student } }) //hello组件 const hello = Vue.extend({ template: ` <div> <h2>你好</h2> </div> ` }) const app = Vue.extend({ template: ` <div> <hello></hello> <school></school> </div> `, components: { school,hello } }) //创建Vue实例 new Vue({ el: '#root', //注册组件 components: { app } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VueComponent</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) console.log(school) //创建Vue实例 new Vue({ el: '#root', components: { school } }) </script> </body> </html>7. 一个重要的内置关系VueComponent.prototype.__proto__ === Vue.prototype为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一个重要的内置关系</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body>  <div id="root"> <school></school> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false Vue.prototype.x = 99; const school = Vue.extend({ template: ` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> </div> `, data() { return { schoolName: '家里蹲', address: '北京' } } }) console.log(school.prototype.__proto__.x) /* //定义一个构造函数 function Demo() { this.a = 1; this.b = 2; } //创建一个demo的实例对象 const c = new Demo(); //显示原型属性 console.log(Demo.prototype); //隐式原型属性 console.log(c.__proto__); console.log(Demo.prototype === c.__proto__); //通过显示原型属性操作原型对象，追加一个属性 Demo.prototype.x = 99; */ </script> </body> </html>
- 2022年05月26日
- 35 阅读
- 0 评论
- 0 点赞

蘇阿細

389 文章数

4 评论量

标签

舔狗日记