山东做网站建设的好公司排名,影视网站怎么建设,打开一张图片后点击跳转到网站怎么做,门户网站推荐非单文本组件(用的少)
在vue中#xff0c;组件是有两种编写格式的#xff0c;第一种格式叫非单文本组件#xff0c;第二种格式叫单文本组件
非单文本组件#xff1a;一个文件中含有多个组件#xff0c;也叫多文本组件#xff0c;比如demo.html里面包含js,css…
单文本…非单文本组件(用的少)
在vue中组件是有两种编写格式的第一种格式叫非单文本组件第二种格式叫单文本组件
非单文本组件一个文件中含有多个组件也叫多文本组件比如demo.html里面包含js,css…
单文本组件使用较多一个文件中只有1个组件一个文件只有一个组件是一一对应的,比如demo.vue
注意 非单文本组件在开发中用的比较少一般用单文本组件比较多但是它可以让我们学到很多东西还是值得学习的
1 编写例子
编写代码实现一个小例子 看下效果虽然没有报错但是总觉得不太好如果能够给上面的信息单独写一个叫school的组件给下面的写一个叫student组件感觉会好很多 下面就通过vue去创建组件
2 创建组件(extend)
在vue中创建组件的api叫extend(扩展) 注意没有s不是extends!
它是一个函数需要调用并且调用的时候要传入一个配置对象在配置对象里面可以配置很多东西。这些东西都是用来控制组件相关内容的和vm写法几乎一样的 // 创建组件
const schoolVue.extend({})这里我直接把vm中的对象属性复制使用但是报错了 报错提示这些属性只能在new vue的时候使用 组件定义时不需要指定el配置项因为最终所以的组件都要被一个vm管理由vm决定服务于哪个容器 注释掉el再次查看页面发现少了一个错误信息但是还有一个错误说的是不要把data直接写成一个对象而是要写成一个函数函数里面写data想返回的对象 使用组件时data必须写成函数式并且要写成普通函数 这时候查看页面没有任何报错信息了 对应的把管理学生的组件也创建出来 这样组件就创建完成了
3 使用组件
创建组件只需要使用extend即可但是想使用组件需要分为三步
1 创建组件(extend)
第一步已经完成接下来进行第二步
2 注册组件(components)
因为不同的组件数据在对应的组件里面那么vm中的data就不需要了
这时候需要用到一个全新的配置项components
注册组件,里面是一组一组的key,value组合 key就是组件名在这里面key才是决定性的组件名称创建组件的时候的名称只是一个中转如果key和创建时候名称一样那么可以只写key
组件中需要有自己的元素所以要配置template模板。最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下这样可以随意换行一般需要一个根容器(div)把元素进行包裹 到了这里才是一个有意义的组件了有自己的模板和数据项然后就可以被vm使用了
3 使用组件
使用组件编写组件标签 查看页面正常显示说明组件正常使用了 到这样组件的定义以及注册使用就完成了注意上面用的是局部注册
4 新增其他属性
如果想在组件模板中新增其他属性直接在对应的组建中添加即可
比如我想在学校组件中新增一个按钮点击的时候提示学校名称像vm一样直接编写即可 5 全局组件
全局组件用的并不多想对来说局部组件用的更多但是还是有必要学下
上面注册的组件都是局部的如果我再创建一个vm里面没有任何组件使用组件标签 直接报错没有注册的组件 这时候就要用到全局组件了component注意不是components! // 注册全局组件Vue.component(student,student)页面正常了 代码如下
!DOCTYPE html
htmlheadmeta charsetUTF-8title初始vue/title!-- 引入vue.js --script typetext/javascript src../js/vue.js/script
/head
bodydiv idroot!-- 第三 步使用组件编写组件标签 --school/schoolhrstudent/student/divdiv idroot2student/student/div
/body script typetext/javascript// 第一步创建school组件const schoolVue.extend({// 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下这样可以随意换行// 一般需要一个根容器(div)把元素进行包裹template:divh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2 button clickshowInfo点我告诉你学校名称/button /div,// 组件定义时不需要指定el配置项因为最终所以的组件都要被一个vm管理由vm决定服务于哪个容器// el:#root,// 使用组件时data必须写成函数式并且要写成普通函数data(){return{schoolName:清华大学,address:北京}},methods: {showInfo(){alert(this.schoolName)}},})// 第一步创建student组件const studentVue.extend({// 模板配置项 最好使用模板字符串的引号 (Tab上面那个键在英文输入法下按两下这样可以随意换行// 一般需要一个根容器(div)把元素进行包裹template:divh2学生姓名{{studentName}}/h2h2学生年龄{{age}}/h2/div,// 组件定义时不需要指定el配置项因为最终所以的组件都要被一个vm管理由vm决定服务于哪个容器// el:#root,// 使用组件时data必须写成函数式并且要写成普通函数data(){return{studentName:张三,age:18}},})// 注册全局组件Vue.component(student,student)// 创建vmconst vm new Vue({el:#root,//第二步注册组件局部注册,里面是一组一组的key,value组合 key就是组件名在这里面key才是决定性的组件名称// 创建组件的时候的名称只是一个中转如果key和创建时候名称一样那么可以只写keycomponents:{school,student}})const vm2 new Vue({el:#root2,})/script/html
