vue.js学习之用户界面组件开发教程

本文主要给大家介绍了关于vue.js之用户界面组件开发的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

1.新建组件：

脚本src=' http :/public/JavaScript/vue。js '/script style # app1 {底色：红色} # app2 {底色：蓝色}/style body div id=' app1 ' box-one/box-one box-one box-one box-one box-two/box-two/div id=' app2 ' box-one/box-one box-one box-one box-two/box-two script var app 1=new Vue({ El : ' # app1 '，组件： { ' box-two ' 33333330var app 2=new Vue({ El : ' # app 2 ' })；/脚本

Vue。组件方法用于注册全局组件，新Vue({组件3360 } })用于注册某个实例内使用的组件，所以二号包厢在#app2中失效；由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的Boxster/Boxster；在实例以外无法使用任何组件；2.浏览器渲染网页标签的限制：

脚本src=' http :/public/JavaScript/vue。js '/脚本风格.红色{背景色：红色}。blue { background-color : blue }/stylebodydiv id=' app1 ' table class=' red ' box-one/box-one/table select class=' red ' box-two/box-two/select table class=' blue ' tr is=' box-one '/tr/table select class=' blue ' option is=' box-two '/option/select/divscriptvue。组件(' box-one '，{ template 3: ' TRT box-one/TD/tr ' })；Vue.component('box-two '，{ template : ' option option/option ' })；var app 1=new Vue({ El : ' # app 1 ' })；/脚本

由于受到浏览器渲染标签的限制，例如桌子标签子元素只能是tbody或选择标签子元素只能是选项，类似的其他更多的标签，所以某视频剪辑软件引入了存在属性；如果使用的是组件文件。某视频剪辑软件后缀的文件开发，则因为是字符串方式渲染的，所以不受限制；3.组件中的数据数据集：

脚本src=' http :/public/JavaScript/vue。js '/scriptbodydiv id=' app 1 ' done-button/done-button/divscriptvue。组件(' done-button '，{ template : ' button { { text } }/button '，data : function(){ return { text : ' ok ' })；var app 1=new Vue({ El : ' # app 1 ' })；/脚本

不同于新Vue({})中的实例数据集，组件中的数据数据集必须是一个函数，再使用函数返回一个对象集，否则会报错；4.实例给组件传值：

脚本src=' http :/public/JavaScript/vue。js '/scriptbodydiv id=' app1 ' done-button text=' submit ' textOne=' submit 1 ' text-two=' submit 2 '/done-button/divscriptvue。组件(' done-button '，{ template : ' button : data-text=' text ' : data-text-one=' text one ' 3: data-text-two=' text two ' var app 1=new Vue({ El : ' # app 1 ' })；/脚本

小道具定义的字符串数组中的值，可以像数据数据集一样在组件内自由调用；小道具定义的字符串数组中的值，会作为组件标签中的标签属性名，给实例赋值；受浏览器渲染标签属性的影响，标签属性的命名如果使用驼峰式，则使用时某视频剪辑软件会自动生成对应的短横线隔开式属性名，如事例中的文本-二；5.组件标签属性使用动态数据：

脚本src=' http :/public/JavaScript/vue。js '/脚本风格.appNumber { background-color : red }/style body div id=' app1 ' done-button : number=' appNumber '/done-button button class=' appNumber ' @ click=' appNumber ' { { appNumber } }/button/divscriptvue。组件(' done-button '，{ template : ' button @ click=' number ' { number } }/button，prop s :[' number ']})；new Vue({ el: '#app1 '，data : { app number : { 0 } })；/脚本

当实例中的appNumber改变时，组件中的数字也会相应改变；当组件中的数字改变时，实例中的appNumber不会改变；实例中appNumber的值覆盖组件中Number的值；但是如果appNumber的值是数组或者对象，因为是引用类型，双方会互相影响；6.自定义组件属性值的规则：

脚本src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app1 ' done-button Number 1=' a ' Number 2=' 1 ' : Number 3=' 1 '/done-button/divscriptvue.component(' done-button '，{ template : ' button : num 1=' Number 1 ' : num 2=' Number 2 ' : num 3=' Number 3 ' { Numbernew Vue({ El : ' # app 1 ' })；/脚本

Props允许你接受一个对象作为参数，每个参数作为一个元素属性，类型是属性值所期望的类型；如果不满足条件，会在vue开发版下的控制台中打印错误信息，但该功能仍能正常传递该值；在这种情况下，number2实际上传递了String类型的“1”，只有：number3的赋值可以传递numeric类型的1；可选：{//属性类型：字符串、数字、布尔值、函数、对象、数组、空-任何类型。//可以使用多个数组来选择type: null。//是否必须赋值：true，false要求： false。//默认值：Default: ' '，可以是一般的任意值，也可以是带返回值的函数。//自定义判断函数：参数值为调用时传入的值。//返回true或false通知vue机制是否报告错误验证器3360函数(值){return true}} 7。向组件中的实例发送通知：

script src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app 1 ' done-button v-: child='父亲'/done-button/Divscriptvue。partner ('done-button '，{ template : ' button v-on : click=' add()' add/button '，methods : { add 3360 function(){ this。$ emit ('child '，11)；} }});new Vue({ el: '#app1 '，methods: {父： function(number){ console . log('父' number)；} }});/脚本

组件不能直接绑定到组件外部的数据集，只能发送事件通知。这个。组件中使用$emit('child '，11)告诉实例调用子事件的时间到了，下面的参数将成为child的调用参数传递；初始化组件时，实例定义了on:child='父亲'的属性，以监视在通知子事件时应该执行什么处理。子的调用参数可以通过父的形式参数直接访问；8.组件之间的通信：

script src=' http :/public/JavaScript/Vue . js '/scriptbodydiv id=' app1 ' done-button/done-button cancel-button/cancel-button/divscriptvar bus=new Vue()；Vue.com(' done-button '，{ template : ' button v-on : click=' send()' send/button '，方法： {send : function () {bus。$ emit ('done-emit '，11)；} }});Vue.component('cancel-button '，{ template: 'p{{text}}/p '，data : function(){ return { text : ' 00 ' } }，mount ed : function(){ var _ this=this；公共汽车。$on('done-emit '，function(number){ _ this . text=number；});}});new Vue({ el: '#app1 '，methods : { call : function(value){ console . log '(父级： ' value)；} }});/脚本

您可以定义一个全局实例总线，使用总线。$emit在不同的组件中发送通知，并使用总线。$on听取通知。9.组件内容节点的分布：

script src=' http :/public/JavaScript/Vue . js '/scriptbodydiv id=' app1 ' box/box box H4 box 1/H4/box box { { box 2 text } }/box/scriptvue.com(' box '，{ template 3360 ' PS lot)new Vue({ El : ' # app1 '，data : { box 2 text : ' box 2 ' })；/脚本

Vue默认在组件中定义一个槽标签，用于在组件使用时获取内容节点；槽标记的内容是组件的默认内容节点；内容节点也可以使用动态数据；10.在多个插槽标签之间使用：

脚本src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app1 ' box PPP/p p slot=' H4 ' H4/p H4 slot=' H4 ' H4/H4 p slot=' H5 ' H5/p H5 slot=' H5 ' H5/H5/box/div/divscriptvue.component(' box '，{ template: [ 'div id='box '，' div class='join(“”)})；new Vue({ El : ' # app 1 ' })；/脚本

在组件的内容节点中，没有声明名称属性的槽标签被没有声明槽属性的标签占用。声明名称属性的槽标记被组件的内容节点中与其相等的槽属性的标记占据；如果多个标签应用相同的槽属性，也是有效的；11.slot标签向内容节点返回数据：

script src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app1 ' box模板作用域=' props ' span { { props . text } }/span/template/box/divscriptvue.component(' box '，{ template : ' div id=' box ' slot v-for=' I in items ' : text=' I '/slot/div '，data : function(){ return { items 333366new Vue({ El : ' # app 1 ' })；/脚本

首先，数据在组件中提供，但是数据的布局是由调用组件的实例决定的；在组件的内容节点中，模板标签必须用来包含要渲染的子元素，并且必须定义scope='props '属性，而模板标签是props对象的范围上下文；Propes自动包含slot标签中的属性，比如case中的text属性，所以可以使用props.text直接访问text属性的值；当然也可以和槽名='表头'结合使用，模板槽='表头'就够了；模板标签是为vue预留的，其实只是一个占位符；12.动态开关元件：

脚本src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app1 '组件： is=' view '/组件button @ click=' view=' inline box ' ' change/button/div/divscriptvue.component(' box '，{ template : ' div id=' box ' box/div '，})；Vue.component('inlinebox '，{ template : ' div id=' inline box ' inline box/div ' })；new Vue({ el: '#app1 '，data : { view : ' box ' })；/脚本

组件标签是为vue预留的，其实只是一个占位符；Is属性可以指定组件标签名称或绑定动态变量。13.访问实例中的子元素对象：

script src=' http :/public/JavaScript/vue . js '/scriptbodydiv id=' app1 ' box ref=' box 1 '/box/div/divscriptvue.component(' box '，{ template : ' div id=' box ' box/div '，})；new Vue({ el: '#app1 '，mount ed : function(){ console . log(this。$ refs)；}});/脚本

只要为组件指定了ref属性，组件的对象就会在实例的$refs中被访问；摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。谢谢你的支持。