04实例和内置组件
04实例和内置组件
1，实例入门-实例属性
<body>
<h1>example methods</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'hello world!'
},
mounted:function(){
$("#app").html('我是jquery');
},
methods:{
add:function(){
console.log("调用了构造器内部的ADD方法");
}
}
})
app.add();
</script>
</body>2，实例方法
<body>
<h1>example methods 实例方法</h1>
<hr>
<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 jspang = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello,I am JSPang!'
}
},
mounted:function(){
console.log("mounted 被创建！");
},
destroyed:function(){
console.log("destroy 销毁之后");
},
updated:function(){
console.log('updated 更新之后');
}
})
var vm = new jspang().$mount("#app");
function destroy(){
vm.$destroy();
}
function reload(){
vm.$forceUpdate();
}
function tick(){
vm.message="update message info";
vm.$nextTick(function(){
console.log('message 更新完后我被调用了')
})
}
</script>
</body>3，实例事件
<body>
<h1>example methods 实例事件</h1>
<hr>
<div id="app">
{{num}}
<p><button @click="add">add</button></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:{
num:1
},
methods:{
add:function(){
this.num++;
}
}
});
app.$on("reduce",function(){
console.log("执行了reduce方法");
this.num--;
})
app.$once('reduceOnce',function(){
console.log('只执行一次的方法');
this.num--;
})
function reduce(){
app.$emit('reduce');
}
function reduceOnce(){
app.$emit('reduceOnce');
}
function off(){
app.$off('reduce');
}
</script>
</body>4，内置组件 -slot讲解
<body>
<h1>内置组件 -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="tep">
<div>
<p>博客地址：<slot name="blogUrl"></slot></p>
<p>网名：<slot name="netName"></slot></p>
<p>技术类型：<slot name="skill"></slot></p>
</div>
</template>
<script type="text/javascript">
var jspang = {
template:"#tep"
}
var app = new Vue({
el:'#app',
data:{
jspangData:{
blogUrl:'http://jspang.com',
netName:'技术胖',
skill:"web前端"
}
},
components:{
"jspang":jspang
}
})
</script>
</body>回复列表
回复操作