Vue2学习笔记:实例
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学习笔记:实例的更多相关文章
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- vue2 学习笔记2
文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...
- JavaScript学习笔记-实例详解-类（二）
实例详解-类(二) //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...
- JavaScript学习笔记-实例详解-类（一）
实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...
- php session学习笔记(实例代码)
http 无状态协议 一个服务器向客户端发送消息的时候有三条信息 一是状态二是头信息三是内容 会话控制 让一个用户访问每个页面,服务器都知道是哪个用户访问 cookie cookie是通过头信息发送 ...
- vue学习笔记 实例（二）
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...
- Vue2 学习笔记5
文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...
随机推荐
- Java_单例模式
主要介绍单例模式的一种写法.注意事项.作用.测试,以Java语言为例,下面代码是目前见过最好的写法: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- sql 时期格式整理
我们经常出于某种目的需要使用各种各样的日期格式,当然我们可以使用字符串操作来构造各种日期格式,但是有现成的函数为什么不用呢? SQL Server中文版的默认的日期字段datetime格式是yyyy- ...
- 面试题6：二叉树最近公共节点（LCA）《leetcode236》
Lowest Common Ancestor of a Binary Tree(二叉树的最近公共父亲节点) Given a binary tree, find the lowest common an ...
- kafka-2.11-0.11集群搭建
kafka集群依赖于zookeeper,所以需要先搭建zookeeper集群,kafka默认自带了内建的zookeeper,建议使用自己外搭建的zookeeper,这样比较灵活并且解耦服务,同时也可以 ...
- Sass进阶之路,之二(进阶篇)
Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2 ...
- 二维码ZBar之ZBarReaderView
参考:http://www.chinatarena.com/Html/iospeixun/201301/3985.html http://blog.csdn.net/chenyong05314/a ...
- c#基础学习(0806)之StringBuilder的使用
以前字符串的拼接基本都是用string来完成的,从来没有考虑过性能或者速度的问题,自从学习了StringBuilder之后才发现两者的差距有多大,当然,数据量比较小的时候,用string还是挺方便的, ...
- 【拓扑 && 模板】Kosaraju算法
#include<bits/stdc++.h> using namespace std; ; vector <int> g1[maxn],g2[maxn]; stack < ...
- 为 HTTP/2 头压缩专门设计的 HPACK
HTTP/2 对消息头采用 HPACK 进行压缩传输,能够节省消息头占用的网络的流量.如何理解 HPACK 压缩呢? 如果我们约定将常用的请求头的参数用一些特殊的编号来表示,比如 GET ...
- QT的信号和槽机制简介
信号与槽作为QT的核心机制在QT编程中有着广泛的应用,本文介绍了信号与槽的一些基本概念.元对象工具以及在实际使用过程中应注意的一些问题. QT是一个跨平台的C++ GUI应用构架,它提供了丰富的窗口部 ...