目录
外部技术引入
可以在mounted中引入其他技术，例如jquery
<script type="text/javascript" src="../assets/js/jquery-1.10.2.min.js"></script><div id="app"></div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
mounted: function () {
$("#app").html('我是jquery');
}
});
</script>实例方法
<div id="app"></div>
<p><button onclick="destroy()">销毁</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">更改数据</button></p>
<script type="text/javascript">
var xwk = Vue.extend({
template: `<p>{
{message}}</p>`,
data: function () {
return {
message: 'Hello xwk'
}
},
mounted: function () {
console.log("mounted 被创建")
},
destroyed: function () {
console.log("destroyed销毁")
},
updated: function () {
console.log("updated更新之后")
}
})
var vm = new xwk().$mount("#app");
function destroy() {
vm.$destroy();
}
function reload() {
vm.$forceUpdate();
}
function tick() {
vm.message = "update message info";
vm.$nextTick(function () {
console.log("message更新后我被调用了");
})
}
</script>实例事件
<div id="app"><p>{
{count}}</p></div>
<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: {
count: 0
}
})
app.$on('reduce', function () {
console.log("执行了reduce");
this.count--;
})
app.$once('reduceOnce', function () {
console.log("执行了reduceOnce");
this.count--;
})
function reduce() {
app.$emit('reduce');
}
function reduceOnce() {
app.$emit('reduceOnce');
}
function off() {
app.$off('reduce');
}
</script>内置组件slot
<div id="app">
<panda>
<span slot="bolgUrl">{
{pandaData.bolgUrl}}</span>
<span slot="netName">{
{pandaData.netName}}</span>
<span slot="skill">{
{pandaData.skill}}</span>
</panda>
</div>
<template id="tep">
<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 panda = {
template: '#tep'
}
var app = new Vue({
el: '#app',
data: {
pandaData: {
bolgUrl: 'http://www.baidu.com',
netName: '百度',
skill: "web前端"
}
},
components: {
'panda': panda
}
})
</script>