因之前项目接触了vue,从此我被迷住，简洁而不失优雅，小巧而不乏大匠。

首先我们要了解vue，什么是vue，正如官网所说：Vue.js 是一套构建用户界面的渐进式框架，Vue 的核心库只关注视图层。Vue.js的作者为Evan You（尤雨溪），vue虽然是个人项目，但是其发展前景绝不逊于谷歌的AngularJs。相信用过vue的用户都会被他简洁，轻量，友好等特点吸引。

安装vue

官网上介绍的很详细，可以直接通过<script>进行引入，也可以使用npm进行环境搭配。因为vue经常需要搭配其他框架，之前我用的是laravel+vue，具体可以参考我的另一篇博客：http://www.cnblogs.com/lishanlei/p/7488876.html，在此不做赘述。

介绍vue

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

mvvm模式

这是一张介绍mvvm的图

其中ViewMode是vue的核心，他表示的是一个vue实例，其作用在一个html元素上。vue的另一特点是双向绑定，当创建好实例进行绑定后，vue中的DOM Listeners和Data Bindings可以看做两个工具，对于View侧，DOM Listeners会检测DOM层的变化，如果数据变化，将会修改Model中的数据；对于Model侧，如果我们更新Model的数据，那么Data Bindings将会更新DOM元素。

组件化

组件化是vue的另一大特点，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。

那么什么是组件？在vue中一个组件本质上是一个拥有预定义选项的一个 Vue 实例，组件可以扩展 HTML 元素，封装可重用的代码，在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。对于组件的思想，可能对于刚刚接触vue的用户有点难以理解，其实我们可以将其想象为积木，一个页面是由一个或多个组件进行组合的，每一个创建的组件都有其作用，不同的组件组合在一起形成不同的页面，这也是组件重用的体现。

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--这是我们的View-->

        <div id="app">

            {{ message }}

        </div>

    </body>

    <script src="js/vue.js"></script>

    <script>

        // 这是我们的Model

        var exampleData = {

            message: 'Hello World!'

        }

        // 创建一个 Vue 实例或 "ViewModel"

        // 它连接 View 与 Model

        new Vue({

            el: '#app',

            data: exampleData

        })

    </script>

</html>
以上这段代码将会在页面上显示Hello World！。使用Vue的过程就是定义MVVM各个组成部分的过程的过程。在这段代码中，进行了三个过程：1，定义View 2，定义Model 3，创建一个vue实例进行view和Model的连接。
在创建vue实例时，需要传入一个选项对象，可以包括数据，挂载元素，方法，生命钩子等，在这个demo中，选项对象的el属性指向view，表示vue实例将挂载到id=app的元素上，而data属性则指向Model。
其数据的是通过data属性进行定义，值得提一下，vue的双向绑定的数据是在data属性定义的，vue中的工具在实现数据绑定时通过data进行寻找。

指令
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
vue中提供了一些常用的内置指令：
v-text

v-on

v-bind

v-if   v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

v-show

...
这些指令的作用在官网中介绍的很详细，在此不做赘述，如果不了解可以翻一翻API。vue提供了良好的扩展性用户也可以自定义用于开发的指令。

生命周期

每个 Vue 实例在被创建或销毁之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。

比如created钩子可以用来在一个实例被创建之后执行代码：

new Vue({

data: {

a:

},

created: function () {

// `this` 指向 vm 实例

console.log('a is: ' + this.a)

}

})

// => "a is: 1"
常用的生命周期钩子：
beforeCreate:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted:el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。
beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
 
vue小巧却精悍，如果想要深入学习vue，可以去vue的官网上进行学习




												


											
浅学vue的更多相关文章
	

    
								
  1. 包学会之浅入浅出Vue.js：结业篇（转）
		
    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...
    
		
    2. 
						
  2. 包学会之浅入浅出Vue.js：升学篇
		
    包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
    
		
    3. 
						
  3. 包学会之浅入浅出Vue.js：结业篇
		
    在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...
    
		
    4. 
						
  4. 浅谈Vue下的components模板
		
    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
    
		
    5. 
						
  5. 浅谈Vue.js
		
    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
    
		
    6. 
						
  6. junit浅学笔记
		
    JUnit是一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓白盒测试,因为程序员知道被测试的软件如何(How)完成功能和完成什么样(Wh ...
    
		
    7. 
						
  7. 浅谈Vue不同场景下组件间的数据交流
		
    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
    
		
    8. 
						
  8. 【Vue】浅谈Vue不同场景下组件间的数据交流
		
    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
    
		
    9. 
						
  9. 包学会之浅入浅出Vue.js：开学篇（转）
		
    包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 关于responseBody注解中文乱码的问题解决
			
    在web.xml中定义字符集过滤器: <filter> <filter-name>SpringEncodingFilter</filter-name> <fi ...
    
			
    2. 
						
  2. dedecms幻灯片调用图片模糊的解决办法
			
    dedecms幻灯片调用的是缩略图,如果图片尺寸比例和幻灯片的大小相差太大的话,图片就会自动拉伸模糊,比较影响美观和用户体验,下面就有常用的2个方法来解决这个图片模糊的问题. 第一种:手动制图 我们用 ...
    
			
    3. 
						
  3. 【编程技巧】java不使用第三个变量处理两个变量的交换
			
    public class SwapNum {public static void main(String[] args) {doSwapNum();}public static void doSwap ...
    
			
    4. 
						
  4. mysql 两个时间段的差,可以是秒,天,星期,月份,年...
			
    SELECT TIMESTAMPDIFF(SECOND, now(), "2012-11-11 00:00:00") 语法为:TIMESTAMPDIFF(unit,datetime ...
    
			
    5. 
						
  5. PostgreSql问题：ERROR: column "1" does not exist
			
    摘录自:http://blog.csdn.net/shuaiwang/article/details/1807421 在PostgreSQL中,不论是在pgAdmin中还是在命令行控制台里面,在SQL ...
    
			
    6. 
						
  6. 再叙Java反射
			
    Java中的反射 本文为反射的基础知识部分. 能够分析类能力的程序被称为反射(reflective). 反射机制允许程序在运行时取得任何一个已知名称的class的内部信息,容许程序在运行时加载.探知. ...
    
			
    7. 
						
  7. mysql中能够使用索引的典型场景
			
    mysql 演示数据库:http://downloads.mysql.com/docs/sakila-db.zip 匹配全值 explain select * from rental where re ...
    
			
    8. 
						
  8. 【处理多服务器日志合并处理问题】多服务器的日志合并统计——apache日志的cronolog轮循
			
    转发:http://www.chedong.com/tech/rotate_merge_log.html   内容摘要:你完全不必耐心地看完下面的所有内容,因为结论无非以下2点:1 用 cronolo ...
    
			
    9. 
						
  9. intellij-项目目录隐藏无用的文件和文件夹
			
    File-->Editor-->File Types
    
			
    10. 
						
  10. 如何使用 volatile, synchronized, final 进行线程间通信
			
    原文地址:https://segmentfault.com/a/1190000004487149.感谢作者的无私分享. 你是否真正理解并会用volatile, synchronized, final进 ...
    
			
    11.