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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 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
关于页面优化和伪静态
2009/10/11 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
浅谈React之状态(State)
2018/09/19 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
浅谈JavaScript节流和防抖函数
2020/08/25 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
Python中的hypot()方法使用简介
2015/05/18 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
英语系本科生求职信范文
2013/12/18 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
亮剑观后感
2015/06/05 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Mysql Show Profile
2021/04/05 MySQL
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS