vue2.0學習(四)-實例和內置組件
阿新 • • 發佈：2018-04-16
red jsp methods emit 屬性 function AS button 組件
vue2.0學習(四)-實例和內置組件
1.實例入門-實例屬性
一、Vue和Jquery.js一起使用
下載可以去官網進行下載，我這裏使用的版本是3.1.1，下載好後在需要的頁面引入就可以了。當然你還有很多其它的方法引入jquery，只要可以順利引入就可以了。
<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script><!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>
二、實例調用自定義方法
在Vue的構造器裏寫一個add方法，然後我們用實例的方法調用它
構造器裏的add方法
methods:{
add:function(){
console.log("調用了add方法")
}
}實例調用:
app.add();2.實例方法
一、$mount方法
$mount方法是用來掛載我們的擴展的.
<!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 zidingyi = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:‘Hello ,I am JSPang‘ } } }) var vm = new zidingyi().$mount("#app") </script> </body> </html>
二、$destroy() 卸載方法
用$destroy()進行卸載
html:
<p><button onclick="destroy()">卸載</button></p>javascript代碼
function destroy(){
vm.$destroy();
}三、$forceUpdate() 更新方法
vm.$forceUpdate()四、$nextTick() 數據修改方法
當Vue構造器裏的data值被修改完成後會調用這個方,也相當於一個鉤子函數吧，和構造器裏的updated生命周期很像.
function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log(‘message更新完後我被調用了‘); }) }
3.實例事件
實例事件就是在構造器外部寫一個調用構造器內部的方法。這樣寫的好處是可以通過這種寫法在構造器外部調用構造器內部的數據。
寫一個點擊按鈕，持續加1的例子.
一、$on 在構造器外部添加事件.
app.$on(‘reduce‘,function(){
console.log(‘執行了reduce()‘);
this.num--;
});$on接收兩個參數,第一個參數是調用時的事件名稱,第二個參數是一個匿名方法.
如果按鈕在作用域外部，可以利用$emit來執行.
//外部調用內部事件
function reduce(){
app.$emit(‘reduce‘);
}二、$once執行一次的事件
app.$once(‘reduceOnce‘,function(){
console.log(‘只執行一次的方法‘);
this.num--;
});三、$off關閉事件
//關閉事件
function off(){
app.$off(‘reduce‘);
}4.內置組件 -slot講解
slot是標簽的內容擴張，也就是說你用slot就可以在自定義組件時傳遞給組件內容，組件接收內容並輸出.
先來定義一個的組件，這個組件用來顯示博主的一些信息。
我們在Vue 構造器裏的data中給出了信息.
data:{
baiduData:{
url:"https://www.baidu.com/",
name:"百度",
skil:"web前端"
}
},我們用<template></template>標簽的方式定義了組件:
<template id="tmp">
<div>
<p>百度地址</p>
<p>網名：</p>
<p>技術類型：</p>
</div>
</template>slot的使用需要兩步:
1.在HTML的組件中用slot屬性傳遞值.
<baidu>
<span slot="url">{{baiduData.url}}</span>
<span slot="name">{{baiduData.url}}</span>
<span slot="skil">{{baiduData.skil}}</span>
/baidu>2.在組件模板中用<slot></slot>標簽接收值.
<template id="tmp">
<div>
<p>百度地址:<slot name="url"></slot></p>
<p>網名:<slot name="name"></slot></p>
<p>技術類型:<slot name="skil"></slot></p>
</div>
</template>全部代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>example methods Demo</title>
<script type="text/javascript" src="../assert/js/vue.js"></script>
<script type="text/javascript" src="../assert/js/jquery-3.2.1.min.js"></script>
</head>
</head>
<body>
<h1>example methods Demo</h1>
<hr>
<div id="app">
<baidu>
<span slot="url">{{baiduData.url}}</span>
<span slot="name">{{baiduData.url}}</span>
<span slot="skil">{{baiduData.skil}}</span>
</baidu>
</div>
<template id="tmp">
<div>
<p>百度地址:<slot name="url"></slot></p>
<p>網名:<slot name="name"></slot></p>
<p>技術類型:<slot name="skil"></slot></p>
</div>
</template>
<script>
var baidu={
template:"#tmp"
}
var app=new Vue({
el:‘#app‘,
data:{
baiduData:{
url:"https://www.baidu.com/",
name:"百度",
skil:"web前端"
}
},
components:{
"baidu":baidu
}
})
</script>
</body>
</html>vue2.0學習(四)-實例和內置組件