vue2.0基础(四、实例和内置组件)
2020-08-19 本文已影响0人
zZ_d205
一、Vue和Jquery.js一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue和Jquery.js一起使用</title>
<script src="../assets/js/vue.js"></script>
<script src="../assets/js/vue.js"></script>
<script src="../assets/js/jquery.js"></script>
</head>
<body>
<h1>Vue和Jquery.js一起使用</h1>
<hr>
<div id="app">{{message}}</div>
<script>
var app= new Vue({
el:'#app',
data:{
message:"hello world"
},
mounted:function(){
$("#app").html("1111")
},
methods:{
add:function(){
console.log("app内部方法")
}
}
})
app.add()
</script>
</body>
</html>
二、实例方法
- 一、$mount方法
$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。
- 二、$destroy() 卸载方法
用$destroy()进行卸载。
- 三、$forceUpdate() 更新方法
vm.$forceUpdate()
- 四、$nextTick() 数据修改方法
当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例方法</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>实例方法</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>
var jspang=Vue.extend({
template:"<p>{{message}}</p>",
data:function(){
return {
message:"hello,i am jspang"
}
},
mounted:function(){
console.log("创建")
},
// 销毁
destroyed:function(){
console.log("销毁")
},
// 更新
updated:function(){
console.log("更新")
}
})
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>
</html>
三、实例事件
一、$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');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实例事件</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>实例事件</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>
var app= new Vue({
el: '#app',
data: {
num: 1,
},
methods: {
add() {
console.log('原生方法')
this.num++;
}
},
})
app.$on("reduce",function(){
console.log('执行了方法')
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>
</html>
四、内置组件 -slot
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slot</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>slot</h1>
<hr>
<div id="app">
<jspang>
<span slot="bolgUrl">{{jspangData.bolgUrl}}</span>
<span slot="netName">{{jspangData.netName}}</span>
<span slot="skill">{{jspangData.skill}}</span>
</jspang>
</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>
var jspang={
template:"#tmp"
}
var app= new Vue({
el: '#app',
data:{
jspangData:{
bolgUrl:'http://jspang.com',
netName:'技术胖',
skill:'Web前端'
}
},
components:{
"jspang":jspang
},
})
</script>
</body>
</html>
