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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
javascript中的new使用
Mar 20 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
微信小程序 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的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php检查页面是否被百度收录
2015/10/28 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
详解js中==与===的区别
2017/01/08 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
Python中的一些陷阱与技巧小结
2015/07/10 Python
python获取引用对象的个数方式
2019/12/20 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
2014年党员承诺书范文
2014/05/20 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
小学科学教学计划
2015/01/21 职场文书
合作合同协议书范本
2015/01/27 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书