Vue2.0 【第四季】第1节 实例入门-实例属性
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节 实例入门-实例属性的更多相关文章
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
- vue2.0组件通信各种情况总结与实例分析
Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...
- vue2.0：项目开始，首页入门（main.js，App.vue,importfrom）
对main.js App.vue 等进行操作: 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import from又在干嘛?ne ...
- Vue2.0+ElementUI实现表格翻页的实例
参考地址: https://www.cnblogs.com/zhouyifeng/p/7706815.html
- 通信vue2.0组件
vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...
- vue2.0入门
vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工 ...
- vue2.0项目实战（1）基础入门
最近公司的H5项目准备重构,部门老大说前端使用vue2.0来开发,所以就准备把整个项目的开发过程记录下来,一方面是为了记录开发过程中遇到的坑,另一方面也加强自己写作的能力. 什么是 Vue? 简要介绍 ...
- Vue2.0 【第二季】第2节 Vue.extend构造器的延伸
目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...
- 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节 ...
随机推荐
- 羽翼sqlmap视频笔记
access 注入 ./sqlmap.py -u "url" 注入判断./sqlmap.py -u "url" --tables 跑表./s ...
- 89）PHP，跳转练习（1）
首先是需要两个简单的文件: 目录关系是: 我的beifen.php代码展示,这个先执行: <?php header('Location:b.php'); b.php代码展示: <?php ...
- Esp8266和HomeKit
Summary 没有找到合适的简单解决方案,将Esp8266控制的设备连接到HomeKit.所以参照EspEasy实现 HomeKit和Esp8266连接. 连接方式: Raspberry Zero ...
- 网易与Google合作，于GDC开幕首日发布开源UI自动化测试方案
[TechWeb报道]美西时间3月19日,在GDC开幕第一天的Google开发者专场,Google发布了一款由网易研发的UI自动化测试方案:Airtest Project. Google方面评价,这可 ...
- NSURLSession与NSURLConnection区别
1. 使用现状 NSURLSession是NSURLConnection 的替代者,在2013年苹果全球开发者大会(WWDC2013)随ios7一起发布,是对NSURLConnection进 ...
- const define static extern
const const意味着"只读",欲阻止一个变量被改变,可以使用const关键字 const仅仅用来修饰右边的变量(基本数据变量p,指针变量*p) define #define ...
- 微软手机 能靠Surface Phone卷土重来吗？
能靠Surface Phone卷土重来吗?" title="微软手机 能靠Surface Phone卷土重来吗?"> 就算整体大环境再好,就算是站在风口之上,也总是 ...
- Dream权限追踪系统<=2.0.1 重安装漏洞
在./install/install.php中 if(file_exists('lock.txt')){ echo '系统已安装,请不要重复安装!如需安装,请删除install文件夹下的lock.tx ...
- AndroidManifest.xml文件详解
本文为安全专家李洋的最新一篇专栏文章<AndroidManifest.xml文件详解>.AndroidManifest.xml是一个跟安全相关的配置文件,该配置文件是Android安全保障 ...
- 【译文】使用webpack提高网页性能优化
这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...