我的vue.js 2.0学习路线是参考技术胖老师的博客,感谢！
一、实例入门-实例属性
这一块可以对照官网API看一下都有哪些实例属性。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>实例入门-实例属性</title>
</head>
<body>
<h1>实例入门-实例属性</h1>
<hr>
<div id="app">
{{number}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
number:5,
},
})
console.log(app.$data)
console.log(app.$props)
console.log(app.$el)
console.log(app.$options)
console.log(app.$parent)
console.log(app.$root)
console.log(app.$children)
console.log(app.$slots)
console.log(app.$scopedSlots)
console.log(app.$refs)
console.log(app.$isServer)
// 2.4.0 新增 $attrs 和 $listeners 可去官网API查看
</script>
</body>
</html>
二、实例方法-生命周期
-
$mount()方法
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
-
$destroy()方法
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
-
$forceUpdate()方法
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
-
$nextTick()方法
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<title>实例方法-生命周期</title>
</head>
<body>
<h1>实例方法-生命周期</h1>
<hr>
<!--$mount()方法-->
<div id="kuozhan"></div>
<!--$destroy()方法-->
<button onclick="destroy()">点击卸载</button>
<!--$forceUpdate()方法-->
<button onclick="update()">点击强制更新</button>
<!--$nextTick()方法-->
<button onclick="nextTick()">点击修改数据</button>
<script type="text/javascript">
//$mount方法用来挂载我们的扩展的
var kuozhan=Vue.extend({
template:`<p>{{message}}</p>`,
data:function () {
return{
message:'这是一个扩展'
}
},
})
var vm=new kuozhan().$mount('#kuozhan')
// $destroy只是完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。它并不是用来清除已有页面上的DOM的。
function destroy() {
vm.$destroy();
}
// 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
function update() {
vm.$forceUpdate();
}
// 当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
//如果前边使用了$destroy()卸载实例，那么该方法不起作用。请先注释掉前边的$destroy()
function nextTick() {
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
})
}
</script>
</body>
</html>
三、实例方法-事件
-
$on()方法
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
-
$once()方法
监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。
-
$off()方法
移除自定义事件监听器。
-
$emit()方法
触发当前实例上的事件。附加参数都会传给监听器回调。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<title>实例方法-事件</title>
</head>
<body>
<h1>实例方法-事件</h1>
<hr>
<div id="app">
{{number}}<br>
<button @click="add()">点击加1</button>
</div>
<button onclick="reduce()">点击减1</button><br>
<button onclick="reduceOnce()">点击减1（只执行一次）</button><br>
<button onclick="off()">点击移除减1事件</button><br>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
number:1
},
methods:{
add:function () {
this.number++;
},
}
});
//$on()方法在构造器外部添加事件
app.$on('reduce',function(){
this.number--;
})
//$once()方法在构造器外部添加执行一次的事件
app.$once('reduceOnce',function(){
this.number--;
});
//外部调用内部事件
function reduce() {
app.$emit('reduce')//$emit()方法,触发当前实例上的事件
}
function reduceOnce() {
app.$emit('reduceOnce')
}
function off() {
app.$off('reduce')//$off()方法,移除自定义事件监听器。点击之后减1按钮不再起作用
}
</script>
</body>
</html>
四、内置组件slot
看一下这篇文章大白话vue——slot的作用与使用,了解一下slot的简单用法。
看一下这篇文章vue中的插槽————slot,了解一下slot的用法和具名插槽。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Slot content extend Demo</title>
</head>
<body>
<h1>Slot content extend Demo</h1>
<hr>
<div id="app">
<messages>
<span slot="netName">{{message.netName}}</span>
<span slot="skill">{{message.skill}}</span>
</messages>
</div>
<template id="tmp">
<div>
<p>网名：<slot name="netName"></slot></p>
<p>技术类型：<slot name="skill"></slot></p>
</div>
</template>
<script type="text/javascript">
var messages={
template:'#tmp'
}
var app=new Vue({
el:'#app',
data:{
message:{
netName:'vue',
skill:'Web前端'
}
},
components:{
"messages":messages
}
})
</script>
</body>
</html>
今天还学习了vue-cli和vue-router，给大家网址自己学习一下吧。
拜拜~
