(第四季)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 条评论
登录 后参与评论

相关文章

来自专栏wblearn

程序员的你是否熟练掌握Chrome开发者工具?

回归正题,本文主要是介绍一下Chrome developer tool(开发者工具)的使用,以方便我们的日常开发与调试。其实在没用Chrome开发之前就时不时的...

1224
来自专栏漫漫全栈路

Less快速入门

Less快速入门 Web前端学习笔记之——Less快速入门 ---- 什么是Less Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了...

3708
来自专栏技术专栏

Python3入门与实践(五):IO 与 异常

1174
来自专栏IT杂记

Windows查看文件句柄

图形界面方式     打开任务管理器 ?      2. 性能tab,点击链接打开资源监视器; ?     3. 现在cpu tab,关联的句柄后面的输入框可以...

3319
来自专栏十月梦想

node读取文件进阶(详解)

刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访...

862
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

23210
来自专栏开发之途

用WordPress搭建个人网站(1)

5136
来自专栏Spring相关

Vue-router的基本使用

1232
来自专栏Gaussic

IntelliJ IDEA 14 配置Tomcat8

       在网上找了找IntelliJ IDEA配置Tomcat的方法,发现大部分都显得有些过时,主要是我在配置的过程中出现了一下问题,耽误了很长的时间。现...

1302
来自专栏游戏杂谈

预加载JavaScript/CSS但不执行

好吧,一个方案一个方案来分析一下(要求是不允许执行Javascript和应用CSS,以免消耗系统资源):

1552

扫码关注云+社区

领取腾讯云代金券