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节 ...
随机推荐
- sqlite基础API
/* 打开/创建数据库文件 * 如果数据库文件不存在就创建数据库文件. * 数据库操作句柄保存在第二个参数中. * 第一个参数:文件路径及其文件名 * 第二个参数:sqlite3操作句柄 * 返回值: ...
- 遍历一个文件夹,打印出该文件夹下所有的py文件
import os def iterbrowse(path): for home, dirs, files in os.walk(path): for filename in files: yield ...
- Nginx for windows 访问路径包含中文
转载自http://blog.csdn.net/five824/article/details/48261213 Nginx for windows 访问路径包含中文 原创 2015年09月07日 0 ...
- 读书笔记之 数字图像处理的MATLAB实现（第2版）
- 吴裕雄--python学习笔记：爬虫
import chardet import urllib.request page = urllib.request.urlopen('http://photo.sina.com.cn/') #打开网 ...
- 吴裕雄--天生自然KITTEN编程：行走
- Java volatile修饰字段
一.关键字volatile修饰字段: 使用特殊域变量(volatile)实现线程同步 volatile:不稳定的:反复无常的:易挥发的: 1.volatile关键字为域变量的访问提供了一种免锁机制, ...
- 数位dp对于状态描述与发现的一些感悟
今天刷的数位dp 第一题看了题解以后知道了数位dp的基本板子,写数位dp的方式(运用记忆化递归的方法)已经基本固定. 那么接下来的难点主要还是对于题目描述的问题,如何抽象成dp中的状态.就今天刷的题来 ...
- 腾讯自动化测试的AI智能
引子: 本文是林奕在腾讯 DevDays 2018 分享内容的脱敏整理,介绍了 CSIG 测试开发中心(前 SNG 测试开发中心)在自动化测试领域所做的智能化尝试. 大致分成下面几部分: 使用AI面对 ...
- 餐厅随评系列之四：Umu日本料理（米其林二星）
文章目录 在过去的几个月,工作和生活都极其忙碌,因此博客短暂停更了一阵子.慢慢积累下了很多素材,从近期开始恢复博客更新,不过很多内容估计得靠回忆了. 索性采取"倒叙"的方法,先从最 ...