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> ...
随机推荐
- Hadoop2.x 关于日志文件位置
查看日志是发现Hadoop问题和解决Hadoop问题的第一步. 开始我不知道该去哪找日志,后来我发现在我启动节点的时候,有打印信息以及明确告诉了日志写在哪. [root@master hadoop]# ...
- vue项目测试和打包发布
在线测试:npm run dev 发布打包:npm run build 打包后,代码文件在dist文件夹下面,可以正式发布了,复制到其它web服务器下面,在浏览器用http访问.
- vue路由知识整理
vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...
- 中国象棋程序的设计与实现(五)--回答CSDN读者的一些问题
最近写了很多文章,同时,也上传了很多免积分的FansUnion原创的优质资源,有兴趣的同学可以看来我的CSDN博客瞧瞧 http://blog.csdn.net/FansUnion. 近期,收到了不少 ...
- Kneser猜想与相关推广
本文本来是想放在Borsuk-Ulam定理的应用这篇文章当中.但是这个文章实在是太长,导致有喧宾夺主之嫌,从而独立出为一篇文章,仅供参考.$\newcommand{\di}{\mathrm{dist} ...
- 洛谷 P2730 魔板 Magic Squares
P2730 魔板 Magic Squares 题目背景 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 题目描述 ...
- Java设置Client Socket链接Server超时时间
Java设置Client Socket链接Server超时时间 学习了:http://blog.csdn.net/tterminator/article/details/52494141 http:/ ...
- gem5中event queue执行原理机制具体分析
搞清楚这个花了两天时间,下面内容为简略版.为了给自己赚点下载用的积分.如须要具体版本号.请点击下载点击打开链接 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- action support分析
Action这一部分主要是数据(索引)的操作和部分集群信息操作. 所有的请求通过client转发到对应的action上然后再由对应的TransportAction来执行相关请求.如果请求能在本机上执行 ...
- POJ 3668 枚举？
枚举两点,算一下斜率 sort一遍 判个重 输出解 25行 搞定- //By SiriusRen #include <cmath> #include <cstdio> #inc ...