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中属性的改变 ...
随机推荐
- postman—数据同步和创建测试集
postman使用之二:数据同步和创建测试集 一.数据同步 启动postman 后在右上角可以登录账号,登录后就可以同步自己的api测试脚本,连上网在办公区在家都可以同步. 二.创建测试集 1.点击c ...
- warning: already initialized constant FileUtils::VERSION
Ran into this, and the solution here works: https://stackoverflow.com/questions/51334732/rails-5-2-0 ...
- es6中let,const区别与其用法
ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScri ...
- expect安装和使用
Expect是一个我们常在shell交互时常用到的工具,它主要由expect-send组成.Expect是等待输出内容中的特定字符.然后由send发送特定的相应.Expect的工作流程类似于:小明和小 ...
- 深入理解Java虚拟机：虚拟机类加载机制
目录 7.1 概述 7.2 类加载的时机 类的生命周期 5种情况需要"初始化" 7.3 类加载的过程 1.加载 2.验证 3.准备 4.解析 5.初始化 7.4 类加载器 类与类加 ...
- php的304方式
一般浏览器请求php是不会被缓存的,除非php直接显示的发送head 304 if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) { $browserCache ...
- 深入了解Java虚拟机（1）java内存区域与内存溢出异常
java内存区域与内存溢出异常 一.运行时数据区域 1.程序计数器:线程私有,用于存储当前所执行的指令位置 2.Java虚拟机栈:线程私有,描叙Java方法执行模型:执行方法时都会创建一个栈帧,存储局 ...
- subltime快捷键
subltime 是一款快速开发各种文档的软件,本文主要介绍使用编写HTML,文章末尾提供绿色版安装包下载工具 A快捷键说明 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctr ...
- [日常] DNS的迭代查询过程
DNS是应用层协议,端口号为tcp/53和udp/53 DNS查询过程,比如访问www.test.com1.客户机查询www.test.com2.查询首选DNS服务器,Linux下/etc/resol ...
- ASP.NET MVC4应用程序无法建立控制器的解决方案/获取自己需要的EF版本
具体错误是我建立控制器的时候出现如下图那样的错误: Unable to cast object of type 'System.Data.Entity.Core.Objects.ObjectConte ...