Vue 2.0学习(一)简介
简介
Vue是一套用于构建用户界面的渐进式框架。简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
特点
♦ 解耦视图与数据
♦ 可复用的组件
♦ 前端路由
♦ 状态管理
♦ 虚拟DOM
环境版本
开发环境:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
创建实例
var vm = new Vue({
// 选项
})
数据和方法
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data
对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 } // 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
}) // 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true // 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2 // ……反之亦然
data.a = 3
vm.a // => 3
注:当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。
比如,新添加一个新属性:vm.b = 'hi' 将不会触发任何视图的更新。如果晚些时候需要一个属性,但是一开始它是不存在的,就需要设置一些初始值。
Object.freeze()会阻止修改现有的属性,意味着响应系统无法追踪变化。具体使用方法:Object.freeze(data)
生命周期
生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mounted
、updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的 Vue 实例。
注:不要在选项属性或回调上使用箭头函数,箭头函数是和父级上下文绑定在一起的,this不会指向预期的Vue实例。
♦ beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
♦ created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
♦ beforeMount:在挂载开始之前被调用:相关的 render
函数首次被调用。
♦ mounted:el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted
被调用时 vm.$el
也在文档内。
♦ beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
♦ updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
♦ beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
♦ destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
Vue.js学习资源
vuejs中文官网:-http://cn.vuejs.org/
vuejs源码:-https://github.com/vuejs/vue
vuejs官方工具:-https://github.com/vuejs
vuejs官方论坛:-http://forum.vuejs.org/
Vue 2.0学习(一)简介的更多相关文章
- Vue 2.0 学习路线
「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...
- Vue 2.0学习(七)方法与事件
基本用法 以监听一个按钮的点击事件为例,设计一个计数器,每次点击都加1: <div id = "app"> 点击次数:{{ counter }} <button ...
- Vue 2.0学习(四)计算属性
{{}}模板内的表达式常用于简单的运算,当运算过长或逻辑复杂时,会难以维护. <div> {{ text.split(',').reverse().join('') }} </div ...
- Vue 2.0学习(二)数据绑定
Vue实例对象 创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例: var app = new Vue({ el: '#app', data: { message: 'Hello ...
- Vue 2.0学习(六)内置指令
基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...
- Vue 2.0学习(五)v-bind及class与style绑定
DOM元素经常会动态地绑定一些class类名或style样式. 基本用法 <div id="app"> <a v-bind:href="url" ...
- Vue 2.0学习(三)指令与事件
指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
随机推荐
- c#开发_Dev的关于XtraGrid的使用(GridControl小结)
1,增加新行用InitNewRow事件,给新行某字段赋值.后结束编辑. private void grdView_InitNewRow(object sender, DevExpress.XtraGr ...
- 【BZOJ2683】简单题 [分治][树状数组]
简单题 Time Limit: 50 Sec Memory Limit: 128 MB[Submit][Status][Discuss] Description 你有一个N*N的棋盘,每个格子内有一 ...
- Xcode变量概览-summary
问题描述 在Xcode中断点调试时,鼠标停留在变量上,就能看到变量的信息.但对于自定义对象,通常Xcode提供的直接信息非常有限,像这样 想要了解这个对象具体的内容,需要展开左边的箭头 当开发者想要知 ...
- 转:国内优秀npm镜像推荐及使用
原文:http://riny.net/2014/cnpm/ npm全称Node Package Manager,是node.js的模块依赖管理工具.由于npm的源在国外,所以国内用户使用起来各种不方便 ...
- Linux Deploy 使用 Repository部署Linux系统
Linux Deploy 使用 Repository部署Linux系统 为了解决镜像不稳定导致包下载错误,能得到一个稳定环境,可以使用linux deploy导出功能. 这里提供两个制作好的包 用户名 ...
- JS window.name跨域封装
JS window.name 跨域封装 function CrossDomainName(target, agent, callback, security) { if (typeof target ...
- linux网络配置完全解析
概述:熟悉了windows下面的网络配置,对linux下的网络配置缺未必了解透彻.熟练掌握linux下的网络配置原理,能帮助我们更容易掌握网络传输原理:同时具备一些网络连接不通对应问题的排查能力.文本 ...
- Linux中切换用户变成-bash4.1-$的解决方法
原因是root在/root下面的几个配置文件丢失,将/etc/skel/目录下的三个文件拷贝到用户家目录即可 cp /etc/skel/.bashrc /root/ cp /etc/skel/.bas ...
- Java容器---Collection接口中的共有方法
1.Collection 接口 (1)Collection的超级接口是Iterable (2)Collection常用的子对象有:Map.List.Set.Queue. 右图中实现黑框的ArrayLi ...
- IEEEXtreme 10.0 - Flower Games
这是 meelo 原创的 IEEEXtreme极限编程比赛题解 题目来源 第10届IEEE极限编程大赛 https://www.hackerrank.com/contests/ieeextreme-c ...