dw做网站怎么发布,网站无后台可以上框架,整套网站建设,网站建设内部风险分析Vue中使用组件的三个步骤#xff1a;
一、定义组件(或者叫创建组件)
使用Vue.extend(options)创建#xff0c;其中options和new Vue(options)时传入的那个options几乎一样#xff0c;但也有点区别#xff1b; 区别如下#xff1a;
1.el不要写#xff0c;为什么#x…Vue中使用组件的三个步骤
一、定义组件(或者叫创建组件)
使用Vue.extend(options)创建其中options和new Vue(options)时传入的那个options几乎一样但也有点区别 区别如下
1.el不要写为什么 ——— 最终所有的组件都要经过一个vm的管理由vm中的el决定服务哪个容器。 2.data必须写成函数为什么 ———— 避免组件被复用时数据存在引用关系。
备注使用template可以配置组件结构。
二、注册组件
1.局部注册靠new Vue的时候传入components选项
2.全局注册靠Vue.component(组件名,组件) 三、使用组件(写组件标签)
学习示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title数据绑定/titlescript typetext/javascript src../js/vue.js/script
/head
body!-- 准备好一个容器 --div idrooth2{{msg}}/h2hr!-- 第三步编写组件标签 --school/schoolhr!-- 第三步编写组件标签 --student/student/div
/body
script typetext/javascriptVue.config.productionTip false// 第一步创建学校组件const school Vue.extend({template:divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2/div,data(){return {schoolName:太平洋,address:北京}}})// 第一步创建学生组件const student Vue.extend({template:divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,data(){return {studentName:法外狂徒,age:41}}})new Vue({el:#root,data:{msg:你好啊},components:{// 第二步注册组件(局部注册)school:school,student:student,}})/script
/html
