编程 Javascript

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获取。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue实例简单方法介绍

- Author -

github_26672553

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现可自动收缩的TAB网页选项卡代码

Sep 06 Javascript

WebSocket+node.js创建即时通信的Web聊天服务器

Aug 08 Javascript

js实现九宫格的随机颜色跳转

Feb 19 Javascript

微信JS-SDK选取手机照片上传功能

Apr 21 Javascript

node.js操作mysql简单实例

May 25 Javascript

JavaScript定时器setTimeout()和setInterval()详解

Aug 18 Javascript

js 实现复选框只能选择一项的示例代码

Jan 23 Javascript

vue-router项目实战总结篇

Feb 11 Javascript

Vue 中axios配置实例详解

Jul 27 Javascript

Vue slot用法(小结)

Oct 22 Javascript

浅析JavaScript 函数柯里化

Sep 08 Javascript

实现一个简单得数据响应系统

Nov 11 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="form"的作用详解

Jan 20 #Javascript