实例和内置组件
- 概述： 实例就是在构造器外部操作构造器内部的属性选项或者方法，这叫做实例。实例的作用就是给原生的或者其他JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。（摘自技术胖博客http://jspang.com/）
一、实例属性
1、vue和jQuery.js一起使用
<div id="app">
{{message}}
</div>
<script src="vue.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'hello Vue!'
},
//在vue中使用jQuery
mounted:function() {
$('#app').html('我是jQuery')
},
methods:{
add:function(){
console.log('调用了add方法')
}
}
})
app.add();//实例调用自定义方法
</script>
- 页面显示我是jQuery，而不是hello Vue！。
- 我们有可能把app.add()的括号忘记或省略，这时候我们得到的就是方法的字符串，但是并没有执行，所以必须要加上括号。
二、实例方法
1、$mount方法
<div id="app">
{{message}}
</div>
<script src="vue.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var panda = Vue.extend({
template: `<div>{{message}}</div>`,
data:function(){
return {
message: '为了你我愿意热爱整个世界'
}
}
})
new panda().$mount('#app');
</script>
2、$destory()销毁方法
<div id="app">
{{num}}
<p><button @click="add">add</button></p>
</div>
<p><button onclick="destroy()">销毁</button></p>
<script src="vue.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data:{
num: 1
},
methods:{
add:function(){
this.num++
}
}
})
function destroy() {
vm.$destroy()
}
</script>
- 注意：$destroy()后边必须要有括号，没有括号是无用的。
3、$forceUpdated()更新方法
-
迫使Vue实例重新渲染，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件
vm.$forceUpdate()
4、$nextTick() 数据修改方法
-
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
-
当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。
function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被调用了'); }) }
三、实例事件
- 实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据
1、vm.$on(event,callback)
-
$on 在构造器外部添加事件
-
$on 接受两个参数。第一个参数是调用时的事件名称，第二个参数是一个匿名方法。
-
如果按钮在作用域外部，可以利用$emit来执行
<div id="app"> {{num}} <p><button @click="add">add</button></p> </div> <button onclick="reduce()">reduce</button> <script src="vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data:{ num: 1 }, methods:{ add:function(){ this.num++; } } }) vm.$on('reduce',function(){ console.log('执行了reduce()'); this.num--; }) //外部调用内部事件 function reduce(){ vm.$emit('reduce') } </script>
2、vm.$once(event,callback)
-
$once执行一次事件
vm.$once('reduceOnce',function(){ console.log('只执行一次的方法'); this.num--; }); //外部调用内部事件 function reduceOnce(){ vm.$emit('reduceOnce') }
3、vm.$off([event,callback])
- $off关闭事件
用法
- 移除自定义事件监听器
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除改事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器；
4、vm.#emit(eventName,[...args])
- 触发当前实例上的事件，附加参数都会传给监听器回调
四、内置组件
1、slot
- slot是标签的内容扩展，也就是说你用slot就可以自定义组件时传递给组件内容，组件接收内容并输出
2、component
3、transition
Props
- name -string,用于自动生成css过渡类名。例如：name:'fade' 将自动拓展为
.fade-enter,.fade-enter-active等。默认类名为"v" - appear -boolean,是否在初始值渲染时使用过渡。默认值为false。
- css -Boolean，是否使用css过渡类。默认为true。如果设置为false，将只通过组件事件触发注册的JavaScript钩子。
- type -string，指定过渡事件类型，侦听过渡何时结束。有效值为"transition"和"animation"。默认Vue.js将自动检测出持续时间长的为过渡事件类型。
- mode -string,控制离开/进入的过渡时间序列。有效的模式有"out-in"和"in-out"；默认同时生效
- enter-class -string
- leave-class -string
- appear-class -string appear初始渲染的过渡
- enter-to-class -string
- leave-to-class -string
- appear-to-class -string
- enter-active-class -string
- leave-active-class -string
- appear-active-class -string
事件
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled (v-show only)
- appear-cancelled
用法
<transition>元素作为单个元素/组件的过渡效果。<transition>只会把过渡效果应用到其包裹的内容上，而不是额外渲染DOM元素，也不会出现在检测过的组件层级中
html
<!-- 简单元素 -->
<transition>
<div v-if="ok">toggled content</div>
</transition>
<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
<component :is="view"></component>
</transition>
<!-- 事件钩子 -->
<div id="transition-demo">
<transition @after-enter="transitionComplete">
<div v-show="ok">toggled content</div>
</transition>
</div>
js
new Vue({
...
methods: {
transitionComplete: function (el) {
// 传入 'el' 这个 DOM 元素作为参数。
}
}
...
}).$mount('#transition-demo')
