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中属性的改变 ...
随机推荐
- Android 开发工具类 16_NotificationActivity
在前台运行的 Activity 可以通过Dialog.Toast 向用户发出提示信息,而后台运行的程序,如下载.收到信息等 Service 应用,则需要使用 Notification(通知)向用户发出 ...
- Ubuntukylin-14.04-desktop（ 不带分区）安装步骤详解
不多说,直接上干货! Ubuntukylin-14.04-desktop(带分区)安装步骤详解 Ubuntu14.04安装之后的一些配置 Ubuntukylin-14.04-desktop( 不带分区 ...
- Linux -- 使用笔记
Linux新增分辨率1920x1080 sudo gedit /etc/default/grub 找到:#GRUB_GFXMODE=640x480 在这行下面加一行GRUB_GFXMODE=1920x ...
- java-双大括号实例初始化的反模式
今天在看springboot的batch时, 看到这样一段代码, 直接把我看懵了, 于是找了一下, 发现这 两个大括号 {{ 叫实例初始化器 FlatFileItemReader<Person ...
- 8-lvs-负载均衡
注意: linux集群的时间需要一致 并发量在千万以上, 一般才会使用此种方式, 基于第四层进行ip欺骗, 使得nginx只接受上行流量, 下行流量通过具体执行的服务器直接返回 由章文嵩博士(淘宝) ...
- .Net Core使用 MiniProfiler 进行性能分析（转）
转自:http://www.cnblogs.com/ideacore/p/9505425.html 官方文档: https://miniprofiler.com/dotnet/AspDotNetCor ...
- Java序列化机制和原理
Java序列化算法透析 Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.Java序列化API提供一 ...
- CUBA 7 新特性 (下篇)
上篇我们主要介绍了 CUBA 7 中前端的一些主要功能.这篇我们介绍一下中间件的一变化和新特性. 中间件功能 前面关于新的界面 API 的描述内容比我预期的要多许多,所以在这一节,我会尽量简单点说! ...
- C#将Dll嵌入到EXE
感谢博主的方法: https://blog.csdn.net/lin381825673/article/details/39122257 我之前也看了网上的其他的方法试了都不行 第一种方法就是说用IL ...
- java SE 入门之语言与环境(第一篇)
Javase的语言与开发环境Keke2016年03月08日 Java属于-Oracle公司(甲骨文)创始人:Gosling1995年诞生1998年12月发布jdk1.22002年2月发布:jdk1.4 ...