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查错流程归纳
May 04 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
JavaScript字符串对象
Jan 14 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
vue+element实现动态加载表单
Dec 13 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
WxPython建立批量录入框窗口
2019/02/27 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
小学生自我评价100字(15篇)
2014/09/18 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书