Vue实例简单方法介绍


Posted in Javascript onJanuary 20, 2017

 Vue实例的一些简单方法

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> 
 <div id="box">
  {{a}}
 </div>
 <script type="text/javascript">
  var vm = new Vue({
   el:'#box',
   data:{
    a:1,
   },
  });

  //vm就是实例对象
  console.log(vm.$el); //这里就是div元素
  vm.$el.style.background = 'red';
  console.log(vm.$data); 
  console.log(vm.$data.a); //'1' 
 </script>
</body>
</html>

Vue实例简单方法介绍

手动挂载

var vm = new Vue({
   data:{
    a:1,
   },
  });

  //手动挂载
  vm.$mount('#box');

或者下面的写法:

var vm = new Vue({
  data:{
  a:1,
  },
 }).$mount('#box');
var vm = new Vue({
  aa:11, //自定义属性
   data:{
    a:1,
   },
  }).$mount('#box');

 console.log(vm.$options.aa); //11

上面代码,自定义了属性aa,可以通过vm.$options获取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
微信小程序 Toast自定义实例详解
Jan 20 #Javascript
JavaScript判断浏览器及其版本信息
Jan 20 #Javascript
JS中传递参数的几种不同方法比较
Jan 20 #Javascript
JS出现失效的情况总结
Jan 20 #Javascript
JSON 数据详解及实例代码分析
Jan 20 #Javascript
Angular ui.bootstrap.pagination分页
Jan 20 #Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
js性能优化技巧
2015/11/29 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
微信小程序表单验证功能完整实例
2017/12/01 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
python异步Web框架sanic的实现
2020/04/27 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
办公室人员先进事迹
2014/01/27 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
大学生读书笔记大全
2015/07/01 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Python绘画好看的星空图
2022/03/17 Python