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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 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
简单的PHP多图上传小程序代码
2011/07/17 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python字符串格式化输出方法分析
2016/04/13 Python
Python yield 使用方法浅析
2017/05/20 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
信息技术教学反思
2014/02/12 职场文书
企业宣传工作方案
2014/06/02 职场文书
公司借条范本
2015/05/25 职场文书