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获取当前select 元素值的代码
Apr 19 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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:风雨欲来 路在何方?
2006/10/09 PHP
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
javaScript语法总结
2016/11/25 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
解决Python二维数组赋值问题
2019/11/28 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Jdbc数据访问技术面试题
2012/03/30 面试题
kfc实习自我鉴定
2013/12/14 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
2016年情人节问候语
2015/11/11 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
go语言中fallthrough的用法说明
2021/05/06 Golang
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python