一、$mount方法
$mount方法是用来挂载扩展的，先来复习一下扩展的写法。
这里作了hedong的扩展，然后用$mount的方法把hedong挂载到DOM上，生成了一个Vue的实例，直接看代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Examples Method Demo</title> </head> <body> <h1>Examples Method Demo</h1> <hr> <div id="app"> {{message}} </div>
<script type="text/javascript"> var hedong = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am hedong' } } }) var vm = new hedong().$mount("#app") </script> </body> </html> |
二、$destroy() 卸载方法
用$destroy()进行卸载。
写了一个button按钮，点击后卸载整个挂载。
html：
1 | <p><button onclick="destroy()">卸载</button></p> |
javascript
1 2 3 | function destroy(){ vm.$destroy(); } |
PS:$destroy()后边必须要有括号，没有括号是无用的。
三、$forceUpdate() 更新方法
1 | vm.$forceUpdate() |
四、$nextTick() 数据修改方法
当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
1 2 3 4 5 6 | function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被调用了'); }) } |
五、安装Vue的控制台调试工具。
每个人的安装方法不同。
第3节：实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。
还是写一个点击按钮，持续加1的例子。
一、$on 在构造器外部添加事件。
1 2 3 4 | app.$on('reduce',function(){ console.log('执行了reduce()'); this.num--; }); |
$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。
如果按钮在作用域外部，可以利用$emit来执行。
1 2 3 4 | //外部调用内部事件 function reduce(){ app.$emit('reduce'); } |
二、$once执行一次的事件
1 2 3 4 5 | app.$once('reduceOnce',function(){ console.log('只执行一次的方法'); this.num--;
}); |
三、$off关闭事件
1 2 3 4 | //关闭事件 function off(){ app.$off('reduce'); } |
第4节：内置组件 -slot讲解
slot是标签的内容扩展，也就是说用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
先来定义一个<hedong></hedong>的组件，这个组件用来显示博主的一些信息。
我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）
1 2 3 4 5 6 7 | data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技术-dong', skill:'Web前端' } }, |
我们用<template></template>标签的方式定义了组件：
1 2 3 4 5 6 7 8 | <template id="tmp"> <div> <p>博客地址：</p> <p>网名：</p> <p>技术类型：</p>
</div> </template> |
现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。
slot的使用需要两步：
1、在HTML的组件中用slot属性传递值。
1 2 3 4 5 | <jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> |
2、在组件模板中用<slot></slot>标签接收值。
1 2 3 4 5 6 7 8 | <template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p>
</div> </template> |
贴出这个案例的全部代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Slot content extend Demo</title> </head> <body> <h1>Slot content extend Demo</h1> <hr> <div id="app"> <hedong> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </hedong> </div>
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>网名：<slot name="netName"></slot></p> <p>技术类型：<slot name="skill"></slot></p>
</div> </template>
<script type="text/javascript"> var hedong={ template:'#tmp' }
var app=new Vue({ el:'#app', data:{ jspangData:{ bolgUrl:'http://hedong.com', netName:'技术-dong', skill:'Web前端' } }, components:{ "hedong":hedong } }) </script> </body> </html> |
评论（0）