前言

本人刚开始学习vue.js几天，做了一些练习之后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。

初学Vue.js应该学习哪些知识

1、 vue2.0

主要学习基础知识。首先是引入vue.js，可以在网页中直接引入cdn的链接，或者在本地搭建环境，使用脚手架工具帮你快速搭建项目，具体环境搭建过程可参考官方文档。然后是基础语法，如何渲染数据，熟悉它的各种指令，条件渲染或者循环渲染数据等。可大致了解一下生命周期与钩子函数，可以暂时跳过。接下来要学习如何写函数，计算属性。最后要会创建组件与引用组件，到此，你算是入门了。给两链接：

Vue.js2.0官方文档：几个小练习：

2、 vue-router

在项目开发中，经常会用到路由，所以学会如何构建路由是必须的。

vue-router官方文档：

3、vuex

这是一个vue中的状态管理仓库，我们可以借助它来存储一些数据。因为它能被全局访问，所以能借助它来实现不同组件之间的通信。

4、axios

如果你学习过jquery，它与jquery里的ajax类似，是发送请求，交互数据的工具。

github学习地址：

正文

基础知识就不一一介绍了~~

生命周期

vue.js为vue实例划分了从创建到结束各种不同的阶段，把这些阶段称为生命周期，同时在不同的过程中也会运行一些叫做生命周期钩子的函数，我们能通过这些函数，在不同阶段添加相应的代码。总共可分为8个阶段：

beforeCreate（创建前）,created（创建后）,beforeMount(载入前),mounted（载入后）,beforeUpdate（更新前）,updated（更新后）,beforeDestroy（销毁前）,destroyed（销毁后）

使用举例：

beforecreate : 举个栗子：可以在这加个loading事件 created ：在这结束loading，还做一些初始化，实现函数自执行 mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

计算属性

在对某些值进行一系列逻辑算法时，虽然能直接在模板内书写，但是模板中的逻辑代码太多会让模板过重并且难以维护，所以在此时应当使用计算属性。计算属性默认只有getter，但我们还能加上setter，通过getter获取一些值来进行一系列的计算来返回值，而setter可以设置值，作用到data里面的数据。

条件渲染

在之前的编程中，要想隐藏一个元素有4种方式：display:none，visibility:hidden，opacity:0，position:absolute;left:50000px;top:50000px，而在vue.js里面是使用条件渲染v-if，v-show。v-show就是控制元素的display样式来显示隐藏，元素总是会被渲染的，而v-if是控制渲染与否，这就是他们的区别。

列表渲染

之前看了一点点angularjs和小程序，发现它们都有类似的列表渲染方式。这种方式与js里面的for in循环很像，为列表的每一项取个名字用来表示每一项，然后通过这个名字来访问每一项数据。如果会for in循环那么很容易接受，只不过每一项写在{ {}}里。

事件处理与修饰符

事件通过v-on指令来绑定，在js中事件为on+事件名，所以v-on是很好记忆的。而vue还提供了非常简便的方法来帮助事件处理，如阻止冒泡，只需要在v-on+事件名后使用.stop就行，而不用像原生js写一大行。修饰符还可以串联使用。在vue中有很多修饰符可帮助我们减少代码量。

组件

组件其实就是提取一段代码，让它在单独的文件中，当要使用的时候引入就行。当某段代码大量重复的时候它可起了大作用。组件分为局部组件与全局组件。局部组件是在某个页面需要的时候在这个页面引入，而全局组件是在main.js入口文件中注册，其它页面不用单独引入，可以直接使用。局部组件引入方法：1、简单的组件可以直接在对应实例里面加入components项，使用键值对的形式写代码。

export default {  name: 'App',  components:{      'child':{          template:'{
   {msg}},我叫{
   {name}},今年{
   {age}}岁了，{
   {sex}}',          props:['msg','name','age','sex'],     }

}

2、复杂点的结构不方便直接用引号写，这时可单独写一个页面并导出，在使用的页面引入，并且取别名，在用键值对写到components里。

    然后在要使用的页面引入，并注册：import child from './components/child'

全局组件：

与局部组件引入类似，还可以给主实例取名Vue，然后通过Vue.components的方式添加。

Vue.component('my-child',child)new Vue({  el: '#app',  router,  components: { App },})

使用props在组件之间传值

子组件有时需要动态地显示一些数据而不是直接写静态的。这时可通过props来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。不过上面的都是父组件向子组件传值，但是子组件如何和父组件通信？这时就需要用到自定义事件了，子组件可通过$emit来主动让自己触发一个事件，父组件监听这些自定义事件的名称就可以实现通信。

插槽

有时候子组件内容可能还需要父组件添加，这时候插槽slot就派上用场了。在子组件内定义插槽可以接收父组件写在元素之间的内容。当没有插槽的时候这些内容完全没作用，但是有预留插槽时，内容会被嵌入子组件插槽的位置。插槽还可以有多个，这时候需要给插槽一个name属性，父组件的内容需要有slot属性，这样多个内容能插入到相应的位置。

过渡

在元素进行显示隐藏等切换时，vue为这些动作定义了6个状态：1、v-enter 2、v-enter-active 3、v-enter-to 4、v-leave 5、v-leave-active 6、v-leave-to需要显示过渡动画的元素用transition元素包裹，并且取个name属性。在样式里，使用name值替换上面的v，具体效果就是css3的过渡效果等。

过滤器

在把实例里data的数据渲染进模板时还可以对数据进行过滤，形式如{ {msg | 过滤方法名}}，在需要渲染的数据后面跟上管道符，并跟上要使用的过滤方法的名称，一个简单的过滤功能就ok了。过滤器还可以使用多个，只需要重复管道符与方法名即可。

vuex的简单使用

1、在目录下引入vuex模块：cnpm install vuex -S2、在main.js中引入：import Vuex from 'vuex'

import store from './vuex/store'        new Vue({              el: '#app',              store        })

3、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下：

import Vue from 'vue'    import Vuex from 'vuex'    Vue.use(Vuex)       const store = new Vuex.Store({      // 定义状态          state: {                  author: 'Wise Wrong'         }    })    export default store

4、在组件中映射状态

computed: {  author () {    return this.$store.state.author  }}

5、修改状态

虽然直接赋值也能修改但是最好还是使用官方推荐的mutations或者actions：

首先在 store.js 中定义一个方法 newAuthor，其中第一个参数 state 就是 $store.state，第二个参数 msg 需要另外传入。

然后修改 header.vue 中的 setAuthor 方法

这里使用 $store.commit 提交 newAuthor，并将 this.inputTxt 传给 msg，从而修改 author。

这样显式地提交(commit) mutations，可以让我们更好的跟踪每一个状态的变化。

而actions类似，区别在于actions可以异步执行。

心得体会

整个vue有很多的功能，我也正在摸索中，此篇就写到这吧~对于新手而言，阅读官方文档是提升的好方法，在看过之后最好还是多多练习示例，才能迅速贯通，再之后呢就多可以去网上看看诸位大神的博客啊，论坛啥的，希望能对新入门的小伙伴有所帮助~！

友情提示：在我第一次看vue的时候啥也不懂，安装环境的时候每次都要把网上的安装教程重复一遍，到后来我才发现，因为前面几个步骤的工具都装在全局的，所以只需要装一次就行，之后只需要初始化vue项目即可。。。希望后来的朋友少走弯路！