vue入门总结

这篇文章旨在给要学习vue的新手一个大概的认知轮廓，让你心里有个学习的结构，有的放矢，避免在前期浪费太多时间。

vue单文件组件简介

首先，vue是什么，为什么用vue自然不用说，下面直接来个例子，大概扫一下，往下看

你可能有点懵逼，其实就三个块儿

那么这个东西是JB玩意儿呢？这个是一个vue的组件，是单文件组件，vue有两个核心的思想，双向绑定和组件开发，双向绑定说的是页面数据和内存数据相互影响，一个改变，另外一个也会随着改变，这个慢慢理解。最直观的其实是组件开发的思想，上面这个文件就是一个组件，template里是html布局，script是这个页面需要的数据，方法，style是样式，一个vue项目都是由这样的文件组成的，这样的好处可能你也看出来了，两个，一个是复用性强，另一个是就近维护，摆脱修改一个东西，要模板，样式，js文件到处找。这是单文件组件的介绍。

语法

上面你只是有了一个大概的了解，下面我们看看语法，还是看上面的例子，看这一段儿

import {
wechat_list
} from 'getters'
import {
    get_menu_wechat_list,
    set_menu_active,
    set_chat,
    set_chat_count,
    set_news_state,
    delete_news
} from '../vuex/actions'

import searchBar from 'components/search-bar.vue'

export default {

没错，这是es6的语法，vue中这样引入模块，输出模块数据的语法随处可见，所以你应该去看看es6关于module这一块儿的语法 阮一峰es6教程，接着看下面这段儿

data() {
return {
    decline: false,
    currentIndex: -1, //列表item处在左划状态
    isTouchSwipe: false, //验证是否处于左划状态
  }
},

这一段返回了一个对象，里面有一些键值对，这些就是页面中需要的数据。

methods: {
info_touchstart(_index) {
    this.currentIndex = -1
},
info_tap(_index) {
    var index = _index;
    if (index >= 0 && !this.isTouchSwipe) {
        this.set_chat(this.wechat_list[index])
        this.$router.go({
            path: "/chat/dialogue"
        })
    }
    this.isTouchSwipe = false
},

这一段儿定义了很多method，这些方法就是页面的数据交互和动作

components: {
    searchBar
},

这是一个组件，是这个组件引入的另一个组件，vue就是因为这样的用法才显得很nice，你会发现上面的html中有这样的语句

js中还有这样的语句

import searchBar from 'components/search-bar.vue'

至于为什么这么写先不要考虑，先看下面这一段

created() {
this.get_menu_wechat_list(() => {
    this.computed_unRead_count()
})
}

这是个啥呢，每个vue实例都有一个生命周期，从创建到销毁这个过程，vue都给出了对应的回调函数，你只要可以指定在某个阶段，要怎样。再看一段儿

 vuex: {
    getters: {
        wechat_list
    },
    actions: {
        get_menu_wechat_list,
    set_menu_active,
    set_chat,
    set_chat_count,
    set_news_state,
    delete_news
  }
},

这个又是啥呢？由于vue异常受欢迎，所以围绕着vue出现了很多插件，这个vuex就是其中一个，还有专门做路由的vue_router，还有专门做请求的vue-resource（现在官网推荐vue_axios）。

小结：vue语法涉及的内容还是挺多的，那么怎么学呢？首先你得把官方文档先看了，官方文档写的相当的详细，你最好把那些小例子都做了。比如基本语法有哪些，啥事双向绑定，啥是计算属性，啥是生命周期，组件有几种语法，单文件组件的语法，看了官网，这些东西你差不多就懂了一些，接着，看一下视频，最好是讲脚手架工具运用的，这样，有了基础语法，你自己下个空的脚手架，试一试，就更有感觉了。下面说一说vue脚手架工具

vue_cli

官网刚开始就有句话，说刚开始学的时候不要去用脚手架，建议你先引入一个cdn文件，直接开始看语法，这是对的，因为直接看脚手架，上面全是单文件组件的语法，可能很难接受，所以先引入文件把官网的例子走一走，知识点过一遍是最好的。
啥是脚手架工具呢？就像刚才说的，你直接引入一个vue.js可以写一些简单的语法例子，但是vue的核心就是组件化，而单文件组件全是.vue的文件，浏览器并不认识，就需要webpack来编译，所以vue提供了一个框架，集成了webpack，你可以按照官网下载一个，对于熟悉nginx的你，刚开始接触基于node的vue，你可能会遇到一些坑，看看这篇文章，可能会给你省下很多时间一些坑和补充。关于vue的脚手架工具，你应该尽量去理解他的文件结构，比如哪个是入口文件，组件怎么引入，怎么实例化，组件里面怎么引组件，这些都需要一点一点看。这些建议看视频，会比较快。如果上面说的你都知道了，这个时候，你差不多就是一个合格的vue小菜鸡了。

补充：vue脚手架是前后端分离的架构，那么如果在laravel中怎样使用vue的组件化功能呢？可以看一下我的另外一篇文章laravel与vue（我还没写呢，写的有点累了，后面补上。）