Vue2.0视频教程-实例和内置组件（笔记）
实例入门-实例属性（在 Vue 中调用其他 JS 插件）
mounted：生命周期函数，在挂载完毕之前调用
<div id='app'>
{{message}}
</div>
<script type='text/javascript'>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
},
// 声明周期函数，mounted
mounted: function(){
// 使用 jQyery 方法操作 DOM
$('#app').html('你好，世界！');
}
});
</script>
实例方法
1. $mount() 挂载方法
功能：$mount方法是用来挂载我们的扩展的
<div id='app'>
{{message}}
</div>
<script type='text/javascript'>
// 声明一个拓展
var jspang = Vue.extend({
template: `<div>{{message}}</div>`,
// 拓展中的 data 声明数据，需要用匿名函数返回
data: function(){
return {
message: 'Hello World!'；
};
}
});
// 挂载拓展
var vm = new jspang().$mount('#app');
</script>
2.$destroy() 卸载方法
功能：用来卸载挂载
html
<button onclick='destroy()'>卸载</button>
js
function destroy(){
vm.$destroy();
}
3. $forceUpdata() 更新方法
功能：刷新数据
vm.$forceUpdate()
4. $nextTick() 数据修改方法
功能：构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数，和构造器里的updated生命周期很像
function tick(){
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
});
}
实例事件
实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。
1. $on() 在构造器外添加事件
- $on() 接收两个参数，
- 调用的事件名称
- 一个匿名方法
- 如果按钮在作用域外，需要用 $emit 来执行
app.$on(‘reduce’,function(){
console.log('执行 reduce 函数')
});
// 外部调用内部事件
function reduce(){
app.$emit('reduce');
}
2. $once 执行一次事件操作
app.$once('reduceOnce',function(){
console.log('只执行一次的方法');
});
3. $off 关闭事件
function off(){
app.$off('reduce');
}
内置组件 slot 讲解
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。
template模板标签里面的内容需要用一个DIV包裹起来
<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='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 jspang = {
template: '#tep'
}
var app = new Vue({
el: '#app',
data: {
jspangData: {
bolgUrl: 'https://www.baidu.com',
netName: '技术胖',
skill: 'web前端'
}
},
components: {
'jspang': jspang
}
});
</script>
