初学vue.js记录

前言

本人刚开始学习vue.js几天，作了一些练习以后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。
初学Vue.js应该学习哪些知识

一、 vue2.0

主要学习基础知识。首先是引入vue.js，能够在网页中直接引入cdn的连接，或者在本地搭建环境，使用脚手架工具帮你快速搭建项目，具体环境搭建过程可参考官方文档。而后是基础语法，如何渲染数据，熟悉它的各类指令，条件渲染或者循环渲染数据等。可大体了解一下生命周期与钩子函数，能够暂时跳过。接下来要学习如何写函数，计算属性。最后要会建立组件与引用组件，到此，你算是入门了。给两连接：
Vue.js2.0官方文档：https://cn.vuejs.org/v2/guide/
几个小练习：https://www.cnblogs.com/wuhao...

二、 vue-router

在项目开发中，常常会用到路由，因此学会如何构建路由是必须的。
vue-router官方文档：https://router.vuejs.org/zh-c...

三、vuex

这是一个vue中的状态管理仓库，咱们能够借助它来存储一些数据。由于它能被全局访问，因此能借助它来实现不一样组件之间的通讯。

四、axios

若是你学习过jquery，它与jquery里的ajax相似，是发送请求，交互数据的工具。
github学习地址：https://github.com/axios/axios

正文

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

生命周期
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入口文件中注册，其它页面不用单独引入，能够直接使用。
局部组件引入方法：
一、简单的组件能够直接在对应实例里面加入components项，使用键值对的形式写代码。

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

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

<template>
    <div>
        我是单独vue文件里建立的组件
    </div>
</template>
<script>
    export default{
        name:'child',
    }
</script>

而后在要使用的页面引入，并注册：
import child from './components/child'
<script>
    export default{
        name:'dad',
        components:{
            'my-clild':child
        }
    }
</script>

全局组件：
与局部组件引入相似，还能够给主实例取名Vue，而后经过Vue.components的方式添加。

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

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

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

过渡
在元素进行显示隐藏等切换时，vue为这些动做定义了6个状态：
一、v-enter 二、v-enter-active 三、v-enter-to 四、v-leave 五、v-leave-active 六、v-leave-to
须要显示过渡动画的元素用transition元素包裹，而且取个name属性。在样式里，使用name值替换上面的v，具体效果就是css3的过渡效果等。

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

vuex的简单使用
一、在目录下引入vuex模块：cnpm install vuex -S
二、在main.js中引入：import Vuex from 'vuex'

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

三、构建核心仓库 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

四、在组件中映射状态

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

五、修改状态
虽然直接赋值也能修改可是最好仍是使用官方推荐的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项目便可。。。但愿后来的朋友少走弯路！