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 相关文章推荐
Jquery Change与bind事件代码
Sep 29 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
隐性调用php程序的方法
2009/03/09 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
一套C#面试题
2013/10/09 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
2014的自我评价
2014/01/13 职场文书
学生实习介绍信
2014/01/15 职场文书
2014年高考决心书
2014/03/11 职场文书
理财投资建议书
2014/03/12 职场文书
同学聚会主持词
2014/03/18 职场文书
捐款倡议书
2014/04/14 职场文书
八项规定整改方案
2014/10/01 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js