vue11 vue实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
{{a}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
}
});
console.log(vm.$el);//div元素
vm.$el.style.background='red';//元素变红
console.log(vm.$data.a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script> </script>
</head>
<body>
<div id="box">
{{a}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
}
}); console.log(vm.$data.a);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<span v-text="a"></span>
</div>
<script>
//angular.bootstrap
var vm=new Vue({
data:{
a:1
}
});
vm.$mount('#box'); //手动挂载 var vm=new Vue({
data:{
a:1
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<span v-text="a"></span>
<br>
{{aa}}
</div>
<script>
var vm=new Vue({
aa:11, //自定义属性,
show:function(){//自定义方法，不再methods里面，
alert(1);
},
data:{
a:1
}
}).$mount('#box'); vm.$options.show();//自定义方法
console.log(vm.$options.aa);//自定义属性,
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<span v-text="a"></span>
</div>
<script>
var vm=new Vue({
data:{
a:1,
b:2
}
}).$mount('#box'); console.log(vm.$log());//{a:1,b:2}打印data
</script>
</body>
</html>
vue11 vue实例方法的更多相关文章
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue——实例方法 / 数据
目录 1.vm.$set 2.vm.$watch 3.vm.$delete 1.vm.$set 哎呀呀,周五啦,大家应该都很开心吧,放假了可以好好休息休息啦,然而小颖明天要面试,所以小颖今天就回去放了 ...
- VUE实例方法添加、COOKIE、Token
创建COOKIE const COOKIE = { KEY_TOKEN: 'access_token', KEY_USER: 'nbuser', KEY_PERMISSION: 'nb-permiss ...
- Vue实例方法之事件的实现
开始 这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习.这里主要是分析的Vue事件处理的实现. 正文 一 ...
- Vue.JS快速上手（指令和实例方法）
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- vue 快速入门 系列 —— 实例方法（或 property）和静态方法
其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from ...
- vue.js 学习笔记
/*属性*/ 标签内的属性都用 :attr="xxx" 的形式 /*模板*/ {{ msg }} -> 绑定数据 {{ *msg }} -> 数据只绑定一次 {{{ m ...
- Vue.2.0.5-插件
开发插件 插件通常会为Vue添加全局功能.插件的范围没有限制--一般有下面几种: 添加全局方法或者属性,如: vue-element 添加全局资源:指令/过滤器/过渡等,如 vue-touch 通过全 ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
随机推荐
- 4----COM：a Generative Model for group recommendation（组推荐的一种生成模型）
1.摘要: 组推荐的一个挑战性问题:因为不同组的成员就有不同的偏好,如何平衡这些组员的偏好是一个难以解决的问题. 在本文中,作者提出了一个COM的概率模型来建立组活动生成过程. 直觉上: 一个组中的用 ...
- [UVa10188]Automated Judge Script
题目大意:叫你写一个判断答案的系统. 解题思路:模拟即可.AC条件为,答案条数相等,所有字符相等.PE条件为,答案条数可能不等,所有数字字符相等.其他为WA. UVa现在的C++已经不支持gets了, ...
- AWS中国EC2 公网IP登录免pemKEY修改shh 配置文件
个人使用记录 1:KEY 授权 chmod 400 VPN.pem 2:连接 ssh -i "VPN.pem" ubuntu@ec2-54-183-119-93.us-west-1 ...
- python scrapy爬取HBS 汉堡南美航运公司柜号信息
下面分享个scrapy的例子 利用scrapy爬取HBS 船公司柜号信息 1.前期准备 查询提单号下的柜号有哪些,主要是在下面的网站上,输入提单号,然后点击查询 https://www.hamburg ...
- 洛谷 P1070 道路游戏
设为第i秒获得的最大值 表示从当前世界是j,从pos走k步到当前点i的最大价值 注意这里的sum可以利用前面的值逐步累加. 我开始做的时候没有想到这一点单独求,然后就超时了. 同时要注意循环的循序问题 ...
- POJ——T2117 Electricity
http://poj.org/problem?id=2117 Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 5459 ...
- java实现上传图片
1.将图片上传到tomcat下 2.将相对路径存放到数据库中 @RequestMapping(params="upLoadPicture") @ResponseBody publi ...
- Java NIO笔记(一)：NIO介绍
Java NIO即Java Non-blocking IO(Java非堵塞I/O),由于是在Jdk1.4之后添加的一套新的操作I/O工具包,所以通常会被叫做Java New IO.NIO是为提供I/O ...
- poj 2079 Triangle，旋转卡壳求点集的最大三角形
给出一个点集,求顶点在点集中的最大的三角形面积. 我们知道这三角形的三个点肯定在凸包上,我们求出凸包之后不能枚举,由于题目n比較大,枚举的话要O(n^3)的数量级,所以採用旋转卡壳的做法: 首先枚举三 ...
- 一步一步跟我学习lucene（19）---lucene增量更新和NRT(near-real-time)Query近实时查询
这两天加班,不能兼顾博客的更新.请大家见谅. 有时候我们创建完索引之后,数据源可能有更新的内容.而我们又想像数据库那样能直接体如今查询中.这里就是我们所说的增量索引.对于这种需求我们怎么来实现呢?lu ...