Vue.js组件高级特性实例详解
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了Vue.js组件高级特性,结合实例形式详细分析了vue.js组件递归、模板、动态加载、渲染等相关操作技巧,需要的朋友可以参考下
本文实例讲述了Vue.js组件高级特性。分享给大家供大家参考,具体如下:
1 递归
为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己。
html:
<div id="app"> <deniro-ponent :count="1"></deniro-ponent> </div>
js:
Vue.ponent('deniro-ponent',{ name:'deniro-ponent', props:{ count:{ type:Number, default:1 } }, template:'\ <div class="child">\ <p>{{count}} 微信大变样!看了这些新功能后,网友淡定不住了</p>\ <deniro-ponent\ :count="count + 1"\ v-if="count < 3"></deniro-ponent>\ </div>\ ' }); var app = new Vue({ el: '#app', data: {} });
效果:
渲染结果:
可以利用组件的可递归特性,来实现一些具有不确定层级的组件,比如级联选择器和树型组件。
2 内联模板
一般情况下,组件的模板都是在 template 中定义的。我们也可以在组件标签中加上 inline-template 属性,这样组件就会把它的内容作为实际的模板内容。
内联模板可以接收父、子组件中声明的数据,所以更加灵活。
html:
<div id="app2"> <deniro-ponent2 inline-template> <div> <h2>父组件中定义子组件模板</h2> <p>{{content1}}</p> <p>{{content2}}</p> </div> </deniro-ponent2> </div>
js:
Vue.ponent('deniro-ponent2',{ data:function () { return { content1:'双屏手机一碰就碎?实测结果意外(来源于子组件)' } } }); var app2 = new Vue({ el: '#app2', data: { content2:'AI正在改变所有行业 咖啡也将被消灭(来源于父组件)' } });
渲染结果:
<div id="app2"> <div> <h2>父组件中定义子组件模板</h2> <p>双屏手机一碰就碎?实测结果意外(来源于子组件)</p> <p>AI正在改变所有行业 咖啡也将被消灭(来源于父组件)</p> </div> </div>
如果父子组件定义的数据同名,那么优先使用子组件中的数据。
因为作用域较难理解,所以除非必要,否则不建议使用。
3 动态加载
我们可以使用 is 来实现动态挂载组件。
html:
<div id="app3"> <deniro-ponent3 :is="currentView"></deniro-ponent3> <button @click="change('A')">切换到 A 组件</button> <button @click="change('B')">切换到 B 组件</button> <button @click="change('C')">切换到 C 组件</button> </div>
js:
var app3 = new Vue({ el: '#app3', ponents: { ponentA: { template: '<div>组件 A</div>' }, ponentB: { template: '<div>组件 B</div>' }, ponentC: { template: '<div>组件 C</div>' } }, data: { currentView: 'ponentA' }, methods: { change: function (ponent) { this.currentView = 'ponent' + ponent; } } });
效果:
data 中的 is 变量也可以直接绑定组件对象。
html:
<div id="app4"> <deniro-ponent4 :is="currentView"></deniro-ponent4> </div>
js:
var news={ template:'<p>无人机送快递 渐行渐近</p>' } var app4 = new Vue({ el: '#app4', data: { currentView: news } });
渲染结果:
<div id="app4"> <p>无人机送快递 渐行渐近</p> </div>
4 异步加载
当工程变得越来越大时,就需要考虑性能喽。我们可以把组件定义成一个工厂函数,实现组件动态解析。Vue.js 会把本次渲染后的结果缓存起来,从而提高性能。
html:
<div id="app5"> <deniro-ponent5></deniro-ponent5> </div>
js:
Vue.ponent('deniro-ponent5', function (resolve,reject) { window.setTimeout(function () { resolve({ template:'<div>全球首个5G电话拨通</div>' }); },1000); }); var app5 = new Vue({ el: '#app5' });
效果:
这里使用 setTimeout 来模拟异步下载,下载成功后会调用 resolve 方法。
一般情况下,会把组件的配置定义为对象配置,然后通过 Ajax 请求组件配置信息,最后通过 resolve 传入这些配置。
完整实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vue.js组件高级特性</title> <script src="https://cdn.bootcss./vue/2.4.4/vue.min.js"></script> </head> <body> <div id="app"> <deniro-ponent :count="1"></deniro-ponent> </div> <div id="app2"> <deniro-ponent2 inline-template> <div> <h2>父组件中定义子组件模板</h2> <p>{{content1}}</p> <p>{{content2}}</p> </div> </deniro-ponent2> </div> <div id="app3"> <deniro-ponent3 :is="currentView"></deniro-ponent3> <button @click="change('A')">切换到 A 组件</button> <button @click="change('B')">切换到 B 组件</button> <button @click="change('C')">切换到 C 组件</button> </div> <div id="app4"> <deniro-ponent4 :is="currentView"></deniro-ponent4> </div> <div id="app5"> <deniro-ponent5></deniro-ponent5> </div> <script> Vue.ponent('deniro-ponent5', function (resolve,reject) { window.setTimeout(function () { resolve({ template:'<div>全球首个5G电话拨通</div>' }); },1000); }); var app5 = new Vue({ el: '#app5' }); var news={ template:'<p>无人机送快递 渐行渐近</p>' } var app4 = new Vue({ el: '#app4', data: { currentView: news } }); var app3 = new Vue({ el: '#app3', ponents: { ponentA: { template: '<div>组件 A</div>' }, ponentB: { template: '<div>组件 B</div>' }, ponentC: { template: '<div>组件 C</div>' } }, data: { currentView: 'ponentA' }, methods: { change: function (ponent) { this.currentView = 'ponent' + ponent; } } }); Vue.ponent('deniro-ponent2', { data: function () { return { content1: '双屏手机一碰就碎?实测结果意外(来源于子组件)' } } }); var app2 = new Vue({ el: '#app2', data: { content2: 'AI正在改变所有行业 咖啡也将被消灭(来源于父组件)' } }); Vue.ponent('deniro-ponent', { name: 'deniro-ponent', props: { count: { type: Number, default: 1 } }, template: '\ <div class="child">\ <p>{{count}} 微信大变样!看了这些新功能后,网友淡定不住了</p>\ <deniro-ponent\ :count="count + 1"\ v-if="count < 3"></deniro-ponent>\ </div>\ ' }); var app = new Vue({ el: '#app', data: {} }); </script> </body> </html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具: 测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程