vue的实例方法与内置组件

slot内置组件的使用

说明:slot的意思是插槽，vue中用来做内容的分发，接下来具体来说明slot的作用与分类
首先定义一个slot.vue的子组件，代码如图:
接着在父组件App.vue页面中引入并注册slot.vue组件，我们就能在App.vue父组件中使用slot.vue组件了，如图:
渲染结果为:
可以看到我是插值这四个字并没有渲染，要想这个四个字渲染，就要使用slot，我只需将slot.vue加一个slot标签就可以做到了，如图:
这个时候的渲染结果为:
当我将我是插值这个四个删除呢?如图:
渲染的就是slot标签里的内容
<slot>就是外部调用时，标签中的内容。如果外部调用时没有提供内容的话，那么它就会使用自己默认提供的内容
上面就是单个slot的使用，接下里说具名slot
首先还是定义一个slot.vue的子组件，在父组件App.vue中引入并注册slot.vue组件，并在父组件中定义一些数据，代码如下:
接着是slot.vue的写法:
这就是具名slot，其实就是给每个slot取了个名字一样，渲染结果:
讲了这么多，好像不明白slot的应用场景吧。我对solt的理解是当组件中某一项需要单独定义，那么就应该使用solt。举例说明。例如项目中需要一个模态框提示付款成功，付款失败。那么这个模态框也就仅仅差这几个字或者是状态图片而已。那么此时应用solt就是一个非常不错的选择。如果你不用slot的话，那就得用两个组件，付款成功是一个组件，付款失败也是组件，用slot的话就只需要一个组件了。先上代码:
在这个场景下，有没有觉得使用slot很方便，(^▽^)

component内置组件

用法:渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

参考(动态组件)[https://cn.vuejs.org/v2/guide/components.html#动态组件]

transition内置组件与transition-group内置组建的区别与后者的应用示例

transition 只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心为了更好适用于更多的场景，vue 提供 <transition-ground>来多个元素的过渡
结合了animate.css动画库的一个vue动画示例,(animate.css的使用)[https://github.com/daneden/animate.css]
代码:

vue与jquery一起使用

我们知道vue是不推崇操作dom，vue是以数据驱动的，但是有些时候操作dom会很方便，所以这里介绍vue与jQuery一起使用
下面一个案例就是在dom加载后修改里边的内容，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
    <title>Early Examples Demo</title>
</head>
<body>
    <h1>Early Examples Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            //在Vue中使用jQuery
            mounted:function(){
                $('#app').html('我是jQuery!');
            }
        })
    </script>
</body>
</html>

之前我们在vue的生命周期这个介绍了mouted钩子函数，在这里dom已经加载完毕，所以可以使用jQuery操作dom了，所以现在页面显示是：我是jQuery，而不是hello Vue了。

实例方法/生命周期

$mount

$mount方法是用来挂载我们的扩展的，之前我们有讲到用vue.extend扩展。
这里我们作了wzj的扩展，然后用$mount的方法把wzj挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Examples Method Demo</title>
</head>
<body>
    <h1>Examples Method Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
      var wzj= Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am wzj'
              }
          }
      })
      var vm = new wzj().$mount("#app")
    </script>
</body>
</html>

$destroy() 卸载方法

说明:用$destroy()进行卸载。
我写了一个button按钮，点击后卸载整个挂载。
html:```

- js:```function destroy(){
   vm.$destroy();
}

其他

其他还有vm.$nextTick与vm.$forceUpdate可以参考(实例方法/生命周期)[https://cn.vuejs.org/v2/api/#实例方法-生命周期]

实例方法/事件

vm.$on(event,callback)

参数解读:event指监听的事件名，后面是回调函数
用法:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。这个额外参数就是通过事件emit过来的值
代码:

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

vm.$once(event,callback)

参数解读: event指监听的事件名，后面是回调函数
用法:监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

vm.$off([event,callback])

参数解读:同上
用法:移除自定义事件监听器。
- 如果没有提供参数，则移除所有的事件监听器；
- 如果只提供了事件，则移除该事件所有的监听器；
- 如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$emit(event,[args])

参数解读:event指事件名，args为附加参数，可以带也可以不带
用法:触发当前实例上的事件。附加参数都会传给监听器回调。

来源：https://www.cnblogs.com/wan-fei/p/8328740.html

标签

vue

transition

监听器

vue的实例方法与内置组件

slot内置组件的使用

component内置组件

keep-alive内置组件

transition内置组件

transition-group内置组件

transition内置组件与transition-group内置组建的区别与后者的应用示例

vue与jquery一起使用

实例方法/生命周期

$mount

$destroy() 卸载方法

其他

实例方法/事件

vm.$on(event,callback)

vm.$once(event,callback)

vm.$off([event,callback])

vm.$emit(event,[args])