Vue学习笔记——实例和内置组件【转自jspang】
2018-07-19 14:47
561 查看
概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vue和其他框架一起使用。
第1节:实例入门-实例属性
1、Vue和Jquery.js一起使用
[code]<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> //在Vue中使用jQuery mounted:function(){ $('#app').html('我是jQuery!'); }
2、实例调用自定义方法
[code]// Vue的构造器里调用add方法: methods:{ add:function(){ console.log("调用了Add方法"); } } // 实例调用: app.add();
第2节:实例方法
1、$mount方法
[code]// $mount方法是用来挂载我们的扩展的 var jspang = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am JSPang' } } }) var vm = new jspang().$mount("#app")
2、$destroy() 卸载方法
[code]// 用$destroy()进行卸载。我写了一个button按钮,点击后卸载整个挂载。html: <p><button onclick="destroy()">卸载</button></p> javascript: function destroy(){ vm.$destroy(); }
PS:$destroy()后边必须要有括号,没有括号是无用的。
3、$forceUpdate() 更新方法
[code]vm.$forceUpdate()
4、$nextTick() 数据修改方法
当Vue构造器里的data值被修改完成后会调用这个方法,也相当于一个钩子函数吧,和构造器里的updated生命周期很像。
[code]function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被调用了'); }) }
5、安装Vue的控制台调试工具
第3节:实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。
1、$on 在构造器外部添加事件。
[code]app.$on('reduce',function(){ console.log('执行了reduce()'); this.num--; }); $on接收两个参数,第一个参数是调用时的事件名称,第二个参数是一个匿名方法。 如果按钮在作用域外部,可以利用$emit来执行。 //外部调用内部事件 function reduce(){ app.$emit('reduce'); }
2、 $once执行一次的事件
[code]app.$once('reduceOnce',function(){ console.log('只执行一次的方法'); this.num--; });
3、$off关闭事件
[code]//关闭事件 function off(){ app.$off('reduce'); }
第4节:内置组件 -slot讲解
slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出。
先来定义一个<jspang></jspang>的组件,这个组件用来显示博主的一些信息。
我们在Vue 构造器里的data中给出了信息,信息如下:(博客地址,网名,使用技能)
[code]data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技术胖', skill:'Web前端' } },
我们用<template></template>标签的方式定义了组件:
[code]<template id="tmp"> <div> <p>博客地址:</p> <p>网名:</p> <p>技术类型:</p> </div> </template>
用slot功能让组件接收传递过来的值,并在模板中接收显示
slot的使用需要两步:
1、在HTML的组件中用slot属性传递值。
[code]<jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang>
2、在组件模板中用<slot></slot>标签接收值。
[code]<template id="tmp"> <div> <p>博客地址:<slot name="bolgUrl"></slot></p> <p>网名:<slot name="netName"></slot></p> <p>技术类型:<slot name="skill"></slot></p> </div> </template> // javascript: var jspang={ template:'#tmp' } components:{ "jspang":jspang }
阅读更多
相关文章推荐
- vue自定义组件和列表循环--vue学习笔记
- vue.js学习笔记(三)--父子组件通信总结
- vue学习笔记--父子组件通信
- Vue组件学习笔记
- Vue 2.0的学习笔记: Vue实例和生命周期
- 有关AutoCompleteBox组件的研究[2]_常用特性实例介绍——Silverlight学习笔记[37]
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- vue学习笔记 实例(二)
- Vue.js学习笔记:组件
- Vue 学习笔记 — 组件初始化
- Vue.js实例学习:组件
- vue学习笔记 - 组件通信01
- Vue 2.0学习笔记:实现组件数据的双向绑定
- Vue.js第四天学习笔记(组件)
- Vue学习笔记——指令和部分组件
- Vue.js学习笔记-1-组件
- Vue 2.0学习笔记:组件的使用
- Vue学习笔记进阶篇之函数化组件解析
- Vue学习笔记——Vue-router【转自jspang】
- 学习Vue组件实例