实例和内置组件

• 概述： 实例就是在构造器外部操作构造器内部的属性选项或者方法，这叫做实例。实例的作用就是给原生的或者其他JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。（摘自技术胖博客http://jspang.com/）

• 注意：$destroy()后边必须要有括号，没有括号是无用的。

• 迫使Vue实例重新渲染，注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件

  vm.$forceUpdate()

• $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

• 当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。

    function tick(){
        vm.message="update message info ";
        vm.$nextTick(function(){
            console.log('message更新完后我被调用了');
        })
    }

• 实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据

• $on 在构造器外部添加事件
• $on 接受两个参数。第一个参数是调用时的事件名称，第二个参数是一个匿名方法。

• 如果按钮在作用域外部，可以利用$emit来执行

    
  
    
    
  <script src="vue.js">
  
  <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')
   }
  

• $once执行一次事件

    vm.$once('reduceOnce',function(){
        console.log('只执行一次的方法');
        this.num--;
    });
    //外部调用内部事件
       function reduceOnce(){
        vm.$emit('reduceOnce')
       }

• $off关闭事件

用法

• 移除自定义事件监听器
• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除改事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；

• 触发当前实例上的事件，附加参数都会传给监听器回调

• slot是标签的内容扩展，也就是说你用slot就可以自定义组件时传递给组件内容，组件接收内容并输出

• 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

• 元素作为单个元素/组件的过渡效果。只会把过渡效果应用到其包裹的内容上，而不是额外渲染DOM元素，也不会出现在检测过的组件层级中

html

    
    
      

    
<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"&gt;</component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo"&gt;
  <transition @after-enter="transitionComplete"&gt;
    <div v-show="ok"&gt;toggled content</div>
  </transition>
</div></code></pre>
js
    new Vue({
      ...
      methods: {
        transitionComplete: function (el) {
          // 传入 'el' 这个 DOM 元素作为参数。
        }
      }
      ...
    }).$mount('#transition-demo')
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!