1.实例

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">

        window.onload = function(){

            vm = new Vue({

                el:'#box',

                data:{

                    msg:'Hello Vue!'

                }

            });

        }

    </script>

</head>

<body>

    <div id="box">

        {{msg}}

    </div>

</body>

</html>

实例化传入了一个对象{el:'#box',data:{msg:'Hello Vue!'}}，每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例。

实例化后 vm 是什么：上面代码我们new处理一个Vue的实例，并赋值给了全局vm变量

2.实例负值和得到值相关

vm.$el.style.background = 'red';  //让$el的样式背景变得红色

console.log(vm.$data);　　　　//{msg:'Hello Vue!'}

console.log(vm.$data.msg); //'Hello Vue!'

3.实例挂载和自定义属性相关

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 可以通vm.$options  来获得

Vue2学习笔记:实例的更多相关文章

  1. Vue2学习笔记:实例生命周期

    实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...

  2. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  3. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  4. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  5. JavaScript学习笔记-实例详解-类（二）

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  6. JavaScript学习笔记-实例详解-类（一）

    实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...

  7. php session学习笔记(实例代码)

    http  无状态协议 一个服务器向客户端发送消息的时候有三条信息 一是状态二是头信息三是内容 会话控制 让一个用户访问每个页面,服务器都知道是哪个用户访问 cookie cookie是通过头信息发送 ...

  8. vue学习笔记 实例（二）

    var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...

  9. Vue2 学习笔记5

    文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...

随机推荐

  1. Android PdfViewer

    今天按项目要求找了一个android的PDF控件,各种操作效果都非常好,在这里和大家分享一下. 这是github的地址:https://github.com/barteksc/AndroidPdfVi ...

  2. Javac语法糖之TryCatchFinally

    https://docs.oracle.com/javase/specs/jls/se7/html/jls-14.html#jls-14.20.3 Optionally replace a try s ...

  3. 两个字符串 char* a, char* b，输出b在a中的位置次序。

    /** 题目: 两个字符串 char* a, char* b,输出b在a中的位置次序. void output_postion(const char* a, const char* b); 如:a = ...

  4. ABP实战--项目结构

    学习完毕With ASP.NET Core & Entity Framework Core Part-1及Part-2后,只实现了基本的功能,使用该工程继续学习ABP的更多功能. 更改项目结构 ...

  5. orcle查询记录的每天的第一条

    select * from (      select elec,time,Row_Number() OVER (partition by trunc(TIME) order by time) ran ...

  6. [转]React 教程

    本文转自:http://www.runoob.com/react/react-install.html React 可以直接下载使用,下载包中也提供了很多学习的实例. 本教程使用了 React 的版本 ...

  7. AVPlayer 音乐播放后台播放，以及锁屏主题设置

    第一步:在appDelegate中通知app支持后台播放:在方法 - (BOOL)application:(UIApplication *)application didFinishLaunching ...

  8. Storm框架：Storm整合springboot

    我们知道Storm本身是一个独立运行的分布式流式数据处理框架,Springboot也是一个独立运行的web框架.那么如何在Strom框架中集成Springboot使得我们能够在Storm开发中运用Sp ...

  9. IDEA 中edit configurations加号找不到tomcat server

    前言:在本机 idea 中搭建 springMVC 项目,正准备配置 Tomcat 时,发现没有 tomcat server 选项,而我的 idea 是有这个插件的,所以解决问题的方案应该是另一个地方 ...

  10. 【java基础】 == 和 equals() 的区别

    ==号和equals()方法都是比较是否相等的方法,那它们有什么区别和联系呢? 首先,==号在比较基本数据类型(指的值类型)时比较的是值,而用==号比较两个对象时比较的是两个对象的地址值: int x ...