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 相关文章推荐
javascript入门基础之私有变量
Feb 23 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue之将echart封装为组件
Jun 02 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
详解Js模块化的作用原理和方案
Apr 29 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 常见郁闷问题答解
2006/11/25 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
小程序转发探索示例
2019/02/19 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python pandas常用函数详解
2018/02/07 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python3解释器知识点总结
2019/02/19 Python
Python ATM功能实现代码实例
2020/03/19 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
车贷收入证明范本
2014/01/09 职场文书
政治表现评语
2014/05/04 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
办公用品质量保证书
2015/05/11 职场文书
Python实现天气查询软件
2021/06/07 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server