专栏首页郭少华(第四季)Vue实例和内置组件

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

实例入门-实例属性

概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (第三季)Vue2.0-选项

    扩展标签已经做好了,这时我们要在挂载时传递一个数字过去,我们就用到了propsData。 我们用propsData三步解决传值: 1、在全局扩展里加入pro...

    楠楠
  • (第二季)Vue2.0-全局API

    全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

    楠楠
  • (第一季)Vue2.0-内部指令

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核...

    楠楠
  • jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

    那么下一步写click监听点击按钮,然后触发div使用fadeOut()方法,使得已存在的div消失,如下:

    Devops海洋的渔夫
  • 配合JQuery练习

    仇诺伊
  • 为什么setinterval和settimeout越点击越快以及响应的解决办法

    setinterval大家都很了解,但是如果时间长的话,误差也会越来越大,所以我习惯上使用settimeout的递归,闲来没事,写了一个定时器的递归

    蓓蕾心晴
  • BBS论坛(二十四)

    zhang_derek
  • 7种最常见的Hadoop和Spark项目

    称之为“企业级数据中心”或“数据湖”,这个想法是你有不同的数据源,你想对它们进行数据分析。这类项目包括从所有来源获得数据源(实时或批处理)并且把它们...

    加米谷大数据
  • Rxjs入门

    Rxjs英文官网域名已经变为 https://rxjs-dev.firebaseapp.com/

    lilugirl
  • 百度春笋小哥带你解决熊掌号主页不更新等几个问题

    先来说一下这个问题吧,熊掌号主页数据是在熊掌号指数2.0公布之后出的问题,也就是 9.10 以后

    沈唁

扫码关注云+社区

领取腾讯云代金券