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> ...
随机推荐
- svn 验证位置失败 Authorization failed
进入svn的conf目录下 修改svnserve.conf [general] anon-access = none #未登录用户不允许访问 auth-access = write passwor ...
- FTP 无法获取目录列表的处理方法
FTP 无法获取目录列表的处理方法 1.以阿里云的服务器为例 对于阿里云的服务器是因为阿里云为了进一步保护用户的安全利益使用了安全策略组,我们要设置安全策略组对应的端口开启. 首先要设置端口范围,这个 ...
- c的面向对象思想记录
在一家公司做实习生,努力学习,keep moving. //c1.h typedef struct { +]; int (*tr)(); } trans; //c1.c #include<str ...
- harbor 安装过程
[root@master01 harbor]# ./prepare Clearing the configuration file: ./common/config/adminserver/env ...
- C语言修改文件某部分内容
两种方法 1.全部读入内存 修改后重新存入文件 2.边读边写到另一新建文件 要修改的部分修改后存入新建文件 其他部分原封不动写入 写完删掉原先文件 将这个新的改为删掉那个的名字 方法一 读入内存修改 ...
- 榨取kkksc03 luogu1855 dp 裸二维费用背包
首先对于这个题目背景,,个人认为很(you)好(qu),,, 核心就是一个裸的二维费用背包,刚刚学习的同学参见dd大牛的背包九讲 #include <cstdio> #include &l ...
- C语言之基本算法38—格式化输出10000以内的全部完数
//穷举法! /* ================================================================== 题目:求10000以内的全部完数,统计数量并以 ...
- 树莓派学习路程No.2 GPIO功能初识 wiringPi安装
WiringPi是应用于树莓派平台的GPIO控制库函数,WiringPi遵守GUN Lv3.wiringPi使用C或者C++开发并且可以被其他语言包转,例如python.ruby或者PHP等.Wiri ...
- 里根上台时国债只占GDP的30%
学里根是刻舟求剑,关键是钱从哪来 5 里根主要靠借钱,这是冷战红利,美国打完二战国债占了GDP的120%,然后总量就没怎么增加,但战后GDP快速增长,结果国债占GDP的比例连续下降,打越战登月石油危 ...
- Import Example Dataset
Overview The examples in this guide use the restaurants collection in the test database. The followi ...