第1節(jié) 實(shí)例入門-實(shí)例屬性
(一vue和jqueryjs一起使用)一，Vue和JQuery.js一起使用
下載并引入jquery.js
<script < type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
總結(jié)body：
<body>
<h1>example01 Methods Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
mounted:function() {
//在Vue中使用jQuery
//只有在mounted和updated中才可以使用引入JQuery
$("#app").html('我是JQuery！');
},
methods: {
add:function(){
console.log('調(diào)用了構(gòu)造器內(nèi)部的add方法');
}
},
})
//構(gòu)造器外部調(diào)用內(nèi)部方法
app.add();
</script>
</body>
第2節(jié) 實(shí)例方法
$mount方法
mount的方法把jspang掛載到DOM上
destroy()卸載方法
用于卸載整個(gè)掛載
forceUpdate()更新方法
nextTick()數(shù)據(jù)修改方法
當(dāng)Vue構(gòu)造起里的data值被修改完成后會(huì)調(diào)用這個(gè)方法，相當(dāng)于一個(gè)鉤子函數(shù)，和構(gòu)造器里的updated生命周期很像。
總結(jié)代碼如下：
<body>
<h1>example Methods Demo</h1>
<hr>
<div id="app">
</div>
<p><button onclick="destroy()">卸載</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">更改數(shù)據(jù)</button></p>
<script type="text/javascript">
var jspang = Vue.extend({
template:`<p>{{ message }}</p>`,
data:function(){
return{
message:'Hello,I am ZR'
}
},
//加生命周期
mounted:function(){
console.log('mounted被創(chuàng)建');
},
destroyed:function(){
console.log('destroy 銷毀');
},
updated:function(){
console.log('updated 更新之后');
}
})
//掛載到app上
var vm = new jspang().$mount('#app');
//銷毀
function destroy(){
vm.$destroy();
}
//更新
function reload(){
vm.$forceUpdate();
}
//更改數(shù)據(jù)
function tick(){
//更改擴(kuò)展里的message內(nèi)容
vm.message='update message info';
//里面放回調(diào)函數(shù)
vm.$nextTick(function(){
console.log('message更新完之后被我調(diào)用了');
})
}
</script>
</body>
第3節(jié) 實(shí)例事件
實(shí)例事件就是在構(gòu)造器外部寫一個(gè)構(gòu)造器內(nèi)部的方法。 這樣寫的好處就是可以通過這種寫法在構(gòu)造器外部調(diào)用構(gòu)造器內(nèi)部的數(shù)據(jù)。
1.$on 在構(gòu)造器外部添加事件
app.$on('reduce',function(){
console.log('執(zhí)行了reduce()');
this.num--;
});
$on接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是調(diào)用時(shí)的事件名稱，第二個(gè)參數(shù)是一個(gè)匿名方法。
如果按鈕在作用域外部，可以利用$emit來執(zhí)行。
//外部調(diào)用內(nèi)部事件
function reduce(){
app.$emit('reduce');
}
$once執(zhí)行一次的事件
app.$once('reduceOnce',function(){
console.log('只執(zhí)行一次的方法');
this.num--;
});
$off關(guān)閉事件
//關(guān)閉事件
function off(){
app.$off('reduce');
}
總結(jié)代碼：
<body>
<h1>example03</h1>
<hr>
<div id="app">
{{ num }}
<!-- @click = v-on:click -->
<p><button @click="add">add</button></p>
</div>
<!-- 外部調(diào)用需要加括號(hào) -->
<p><button onclick="reduce()">reduce</button></p>
<p><button onclick="reduceOnce()">reduceOnce</button></p>
<p><button onclick="off()">off</button></p>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
num:1
},
methods: {
add:function(){
this.num++;
}
}
});
app.$on("reduce",function(){
console.log("執(zhí)行了reduce方法");
this.num--;
});
app.$once('reduceOnce',function(){
console.log("reduce只調(diào)用一次");
this.num--;
})
function reduce(){
app.$emit('reduce');
}
function reduceOnce(){
app.$emit('reduceOnce');
}
//關(guān)閉事件
function off() {
app.$off('reduce');
}
</script>
</body>
第4節(jié) 內(nèi)置組件slot講解
slot是標(biāo)簽的內(nèi)容擴(kuò)展，也就是說你用slot就可以在自定義組件時(shí)傳遞給組件內(nèi)容，組件接受內(nèi)容并輸出。 先定義一個(gè)jspang組件，用這個(gè)組件來展示博主的一些信息
slot的使用需要兩步：
1、在HTML的組件中用slot屬性傳遞值。
<jspang>
<span slot="bolgUrl">{{jspangData.bolgUrl}}</span>
<span slot="netName">{{jspangData.netName}}</span>
<span slot="skill">{{jspangData.skill}}</span>
</jspang>
2、在組件模板中用標(biāo)簽接收值。
<template id="tmp">
<div>
<p>博客地址：<slot name="bolgUrl"></slot></p>
<p>網(wǎng)名：<slot name="netName"></slot></p>
<p>技術(shù)類型：<slot name="skill"></slot></p>
</div>
</template>
總結(jié)代碼：
<body>
<h1>example04-slot</h1>
<hr>
<div id="app">
<jspang>
<span slot="blogUrl">{{jspangData.blogUrl}}</span>
<span slot="netName">{{jspangData.netName}}</span>
<span slot="skill">{{jspangData.skill}}</span>
</jspang>
</div>
<template id="tmp">
<!-- 第二步 接收slot標(biāo)簽 -->
<div>
<p>博客地址：<slot name="blogUrl"></slot></p>
<p>網(wǎng)名：<slot name="netName"></slot></p>
<p>技術(shù)類型：<slot name="skill"></slot></p>
</div>
</template>
<script type="text/javascript">
var jspang={
template:"#tmp"
}
var app=new Vue({
el:'#app',
data:{
//jspang 傳遞一些博客的信息
jspangData:{
blogUrl:'http:jspang.com',
netName:'jishupang',
skill:'web前端'
}
},
components:{
//模板名稱 調(diào)用
"jspang":jspang
}
})
</script>
</body>
