vue--实例与组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--实例与组件相关的知识，希望对你有一定的参考价值。
第1节：实例入门-实例属性一、Vue和Jquery.js一起使用
1、下载并引入jquery框架
下载可以去官网进行下载，这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然还有很多其它的方法引入jquery，只要可以顺利引入就可以了。
1 | <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> |
试着作一个案例，在DOM被挂载后修改里边的内容。
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> <title>Early Examples Demo</title> </head> <body> <h1>Early Examples Demo</h1> <hr> <div id="app"> {{message}} </div>
<script type="text/javascript"> var app=new Vue({ el:'#app', data:{ message:'hello Vue!' }, //在Vue中使用jQuery mounted:function(){ $('#app').html('我是jQuery!'); } }) </script> </body> </html> |
现在页面显示是：我是jQuery，而不是hello Vue了。
二、实例调用自定义方法
在Vue的构造器里我们写一个add方法，然后用实例的方法调用它。
构造器里的add方法：
1 2 3 4 5 | methods:{ add:function(){ console.log("调用了Add方法"); } } |
实例调用：
1 | app.add(); |
PS：有可能把app.add()的括号忘记或省略，这时候得到的就是方法的字符串，但是并没有执行，所以必须要加上括号。
利用console.log把app打印出来，看看里边到底包含了哪些属性和方法。因为里边的属性很多，这里只是简单的介绍。
第2节：实例方法
一、$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> |
以上是关于vue--实例与组件的主要内容，如果未能解决你的问题，请参考以下文章