(第四季)Vue实例和内置组件

楠楠

发布于 2018-09-11 11:48:30

5340

发布于 2018-09-11 11:48:30

文章被收录于专栏：郭少华

实例入门-实例属性

概述：实例就是在构造器外部操作构造器内部的属性选项或者方法，就叫做实例？实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。

下载并引入jquery框架下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。

<script type="text/javascript"  src="../assets/js/jquery-3.3.1.js"></script>

<div id="app">
      {{message}}
  </div>
  <script type="text/javascript">
      var app= new Vue({
          el:"#app",
          data:{
              message:'hello wordl'
          },
          methods: {
              add:function(){
                  console.log("调用了构造器内部的方法");
              }
          },
          //(生命周期)只有在挂载之后和更新使用否则找不到DOM
          mounted:function(){
              $("#app").html("我是Jquery");
          }
      })

      //实例调用自定义方法
      app.add();
  </script>

实例方法

 <div id="app">
    </div>
    <button onclick="destroy()">卸载</button>
    <button onclick="reload()">更新</button>
    <button onclick="tick()">更改数据</button>
    <script type="text/javascript">
        var guo = Vue.extend({
            template: `<p>{{message}}</p>`,
            data: function () {
                return {
                    message: 'hello'
                }
            },
            destroyed: function () {
                console.log("被卸载了");
            },
            updated: function () {
                console.log("被更新了");
            }
        })
        //$mount()挂载扩展 
        var vm = new guo().$mount("#app");
        //$destroy()卸载方法
        function destroy() {
            vm.$destroy();
        }
        //$forceUpdate() 更新方法
        function reload() {
            vm.$forceUpdate();
        }
        //$nextTick() 数据修改方法
        function tick() {
            vm.message = "update message info ";
            vm.$nextTick(function () {
                console.log('message更新完后我被调用了');
            })
        }

    </script>

实例事件

    <div id="app">
        {{num}}
        <p>
            <button @click="add">add</button>
        </p>
    </div>
    <p>
        <button onclick="reduce()">reduce</button>
    </p>
    <p>
        <button onclick="reduceOnce()">reduceOnce</button>
    </p>
    <p>
        <button onclick="off()">off</button>
    </p>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            }

        })
        //$on  在构造器外部添加事件。
        app.$on("reduce", function () {
            this.num--;
        })
        //如果按钮在作用域外部，可以利用$emit来执行。
        function reduce() {
            app.$emit("reduce");
        }


        //$once只执行一次的事件
        app.$once("reduceOnce", function () {
            this.num--;
        })

        function reduceOnce() {
            app.$emit('reduceOnce');
        }


        //关闭事件
        function off() {
            app.$off('reduce');
        }

    </script>

内置组件-slot讲解

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

    <div id="app">
        <guosh>
            <span slot="bolgUrl">{{guoshData.bolgUrl}}</span>
            <span slot="netName">{{guoshData.netName}}</span>
        </guosh>
    </div>
    <template id="tmp">
        <div>
            <p>博客地址:<slot name="bolgUrl"></slot></p>
            <p>名字:<slot name="netName"></slot></p>
        </div>
    </template>
    <script type="text/javascript">
        var guosh={
            template:"#tmp"
        }
        var app = new Vue({
            el:"#app",
            data:{
                guoshData:{
                    bolgUrl:'http://guoshaohua.cn',
                    netName:'郭少华'
                }
            },
            components: {
                "guosh":guosh
            }
        })
    </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.01.31 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java