Vue2.0 【第四季】第1节 实例入门-实例属性

第1节 实例入门-实例属性

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

一、Vue和Jquery.js一起使用

下载并引入jQuery框架

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

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

试着做一个案例，在DOM被挂载后修改里边的内容：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>example methods Demo</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

    <body>

        <h1>example methods Demo</h1>

        <hr>

        <div id="app">

            {{message}}

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello world!'

                },

                mounted:function(){

                    $("#app").html('我是jQuery~！');

                }

            })

        </script>

    </body>

</html>

浏览器效果：

现在页面显示是：我是jQuery，而不是hello Vue了。

二、实例调用自定义方法

在Vue的构造器里我们写一个add方法，然后我们用实例的方法调用它。

构造器里的add方法：

methods:{

    add:function(){

        console.log("调用了ADD方法");

    }

}

实例调用：

app.add();

全部代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>example methods Demo</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

    <body>

        <h1>example methods Demo</h1>

        <hr>

        <div id="app">

            {{message}}

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    message:'hello world!'

                },

                mounted:function(){

                    $("#app").html('我是jQuery~！');

                },

                methods:{

                    add:function(){

                        console.log("调用了构造器内部的ADD方法");

                    }

                }

            })

            app.add();

        </script>

    </body>

</html>

浏览器效果：

PS：我们有可能把app.add()的括号忘记或省略，这时候我们得到的就是方法的字符串，但是并没有执行，所以必须要加上括号。

Vue2.0 【第四季】第1节 实例入门-实例属性的更多相关文章

  1. 用webpack2.0构建vue2.0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

  2. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  3. vue2.0：项目开始，首页入门（main.js，App.vue,importfrom）

    对main.js App.vue 等进行操作: 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import from又在干嘛?ne ...

  4. Vue2.0+ElementUI实现表格翻页的实例

    参考地址: https://www.cnblogs.com/zhouyifeng/p/7706815.html

  5. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  6. vue2.0入门

    vue2.0 开发实践总结之入门篇   vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工 ...

  7. vue2.0项目实战（1）基础入门

    最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力. 什么是 Vue? 简要介绍 ...

  8. Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

    目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...

  9. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

随机推荐

  1. python学习笔记（0）python基础概念

    一.字符集 说字符集之前,先说下2进制的故事,计算机比较傻只认识2进制,什么是2进制,就是0,1,计算机只认识这俩数字,其他的都不认识,这样的0或1为一"位",规定8位为一个字节, ...

  2. WebFilter 在springBoot工程中不起作用

    [1]@ServletComponentScan 必须有一个注解将带有@WebFilter的类包含进去. [2]自定义 FiltersConfig extends WebMvcConfigurerAd ...

  3. Tomcat源码解析-启动过程分析之主干流程

    Tomcat启动入口就在脚本startup.sh中,具体脚本可以看tomcat的源码,这个启动脚本主要用来判断环境,找到catalina.sh脚本路径,将启动参数传递给catalina.sh执行.ca ...

  4. 小码哥哥 FastJson--阿里巴巴公司开源的速度最快的Json和对象转换工具

    转载地址:http://www.oschina.net/code/snippet_228315_35122?_t_t_t=0.4667952097048127 class User{ private ...

  5. 2018湖南省赛B题“2018”

    题面懒得敲了,反正看这篇博客的肯定知道题面. 比赛时想按约数的一些性质分情况讨论出公式然后在合并,结果单考虑矩阵里出现2018和1009(与2互质,1009出现次数等于2)出现的情况就写了一长串公式, ...

  6. win7图片只显示图标不显示预览图解决方案

    问题描述: win7上图片只显示图标,不显示缩略图:不管是调节小图.中图还是大图或者其他均不显示:而且这种情况下使用截图工具截下来的图片都不自动带上扩展名:情况如下图: 解决方案: 打开计算机-> ...

  7. 序列化模块ModelSerializer上补充及ListSerializer

    整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py """ 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验,校验的数据应该在 ...

  8. OpenGL Panorama Player

    JMGL_PANO star_war_eve source 1 star_war_eve source 2 1. 介绍 JMGL_PANO 是Justin开源的一个全景视频播放器(Github).基于 ...

  9. hiho一下：Beautiful String

    hiho一下:Beautiful String 记不清这是 hiho一下第几周的题目了,题目不难,不过对于练习编程,训练思维很有帮助.况且当时笔者处于学习算法的早期, 所以也希望刚接触算法的同学能多去 ...

  10. js进阶之重复的定时器

    使用setInterval()创建的定时器确保了定时器代码规则的插入队列中,这个的问题是:定时器代码可能在代码再次被添加到队列之前还没有完成执行,结果导致定时器代码连续运行了好几次,而之间没有任何停顿 ...