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 iframe内部出滚动条
Feb 11 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python实现图片筛选程序
2018/10/24 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
给儿子的表扬信
2014/01/15 职场文书
高二物理教学反思
2014/02/08 职场文书
出纳员岗位责任制
2014/02/11 职场文书
意向协议书范本
2014/04/23 职场文书
公司员工体检通知
2015/04/21 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
业务员管理制度范本
2015/08/06 职场文书
早安问候语大全
2015/11/10 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS