初学vue.js记录

摘要：初学应该学习哪些知识主要学习基础知识。接下来要学习如何写函数，计算属性。事件处理与修饰符事件通过指令来绑定，在中事件为事件名，所以是很好记忆的。这时可通过来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。

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

1、 vue2.0

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

2、 vue-router

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

3、vuex

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

4、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入口文件中注册，其它页面不用多带带引入，可以直接使用。
局部组件引入方法：
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 -S
2、在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项目即可。。。希望后来的朋友少走弯路！