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>

keep-alive内置组件

transition内置组件

transition-group内置组件

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为附加参数，可以带也可以不带
  • 用法:触发当前实例上的事件。附加参数都会传给监听器回调。
posted @ 2018-01-23 14:15  不止于学  阅读(491)  评论(0)  编辑  收藏  举报