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中属性的改变 ...
随机推荐
- Javac语法糖之TryCatchFinally
https://docs.oracle.com/javase/specs/jls/se7/html/jls-14.html#jls-14.20.3 Optionally replace a try s ...
- js with 语句的用法
with 语句 为语句设定默认对象. with (object) statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象 ...
- C/C++ -- Gui编程 -- Qt库的使用 -- 组件大杂烩
- jenkins 踩坑路 之 jenkins ssh 脚本
背景: 由于公司业务调整,整个业务要从阿里云迁移到aws,自然 jenkins 也是要进行迁移的.jenkins 迁移过程中遇到的问题在此记录下,希望能给遇到类似问题的朋友些许帮助.也便于我后期遇到此 ...
- onclick时间加return和不加return的区别
JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置. 而该值决定了当前操作是否继续.当返回的是true时,将继续操作.当返回是 ...
- goldarch企业管理软件框架整体解决方案终于出来了
所有的图片及解决方案都在我的博客里http://blog.posn.net 框架把企业管理软件开发中要遇到的常用做了组件化处理,达到了通用性和可定制性的目的. goldarch的数据层是spring. ...
- Angular CLI 安装和使用以及安装失败的解决方法
背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line I ...
- 深复制与浅复制&&strong，copy修饰符总结
又是一个老生常谈的话题,可是貌似这个问题,好多ios开发工程师并不能理解透彻,所以简单记录分析一下深复制与浅复制的原理以及strong,copy修饰符的原理和使用. 一.深复制与浅复制 ...
- XCode 添加自定义framework运行时出现dyld: Library not loaded的解决方法
XCode添加自定义framework运行时出现dyld: Library not loaded的解决方法 在使用自定义的framework运行时,会出现如下的错误: dyld: Library no ...
- GC详解及Minor GC和Full GC触发条件总结
GC,即就是Java垃圾回收机制.目前主流的JVM(HotSpot)采用的是分代收集算法.与C++不同的是,Java采用的是类似于树形结构的可达性分析法来判断对象是否还存在引用.即:从gcroot开始 ...