vue入门总结

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

vue单文件组件简介

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

<template>
<div class="_full_inner _scroll _effect component-chat" :class="{'_effect--30':decline}">
    <search-bar></search-bar>
    <ul class="wechat-list">
        <li class="item _line-fine" v-for="item in wechat_list" transition="chat-item">
            <div class="info" :class="{
                'current':currentIndex==$index
                }" @touchstart="info_touchstart($index)" v-touch:tap="info_tap($index)" v-touch:swipeleft="info_swipeleft($index)" v-touch-options:swipe="{ direction: 'horizontal' }">
                <div class="ico-box">
                    <i :class="item.chatConfigModel | f_news 'nclass'" v-text="item.chatBaseModel | f_news 'ntext'" v-show="item.chatBaseModel | f_news 'nshow'"></i>
                    <div class="ico">
                        ![](item.base.iconSrc)
                    </div>
                </div>
                <div class="desc">
                    <div class="desc-time" v-text="item.chatBaseModel.endTimeStr | fmtDate 'hh:ss'"></div>
                    <div class="desc-title" v-text="item.base.name"></div>
                    <div class="desc-message">
                        <div class="desc-mute iconfont icon-mute" :title="item.chatConfigModel.newsMute | json" v-show="item.chatConfigModel.newsMute"></div>
                        <span :title="item.base.type" v-show="item.base.type==='friends'" v-text="item.chatBaseModel.endChatAuth+':'"></span>
                        <span v-text="item.chatBaseModel.endChatTxt"></span>
                    </div>
                </div>
            </div>
            <div class="handle">
                <div class="handle-unread" v-touch:tap='increase_newsState($index,1)' v-show="item.chatBaseModel.newsUnreadCount==0">标为未读</div>
                <div class="handle-unread" v-touch:tap='increase_newsState($index,0)' v-show="item.chatBaseModel.newsUnreadCount>0">标为已读</div>
                <div class="handle-del" v-touch:tap="delete_item($index)">删除</div>
            </div>
        </li>
    </ul>
</div>
<!-- router -->
<router-view transition="cover" keep-alive></router-view>
</template>
<script>
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 {
    vuex: {
        getters: {
            wechat_list
        },
        actions: {
            get_menu_wechat_list,
        set_menu_active,
        set_chat,
        set_chat_count,
        set_news_state,
        delete_news
    }
},
route: {
    activate({
        from,
        to,
        next
    }) {

        this.set_menu_active(0)
        next()
    }
},
data() {
    return {
        decline: false,
        currentIndex: -1, //列表item处在左划状态
        isTouchSwipe: false, //验证是否处于左划状态
    }
},
events: {
    'route-pipe' (_decline) {
        this.decline = _decline
        this.$parent.$emit('route-pipe', _decline)
    }
},
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
    },
    info_swipeleft(_index) {
        event.stopPropagation()
        if (!this.isTouchSwipe) {
            this.isTouchSwipe = true
            this.currentIndex = _index
        } else {
            this.isTouchSwipe = false
        }
    },
    computed_unRead_count() {
        //计算未读数量
        let sum = 0;
        console.log(this.wechat_list)
        this.wechat_list.forEach(({
            chatBaseModel,
            chatConfigModel
        }, index) => {
            if (!chatConfigModel.newsMute) {
                let count = chatBaseModel.newsUnreadCount
                sum += count
            }
        })
        this.set_chat_count(sum)
    },
    increase_newsState(index, val) {
        this.isTouchSwipe = false;
        //改变已读未读状态并回调计算未读总和
        this.set_news_state(index, val, () => {
            this.currentIndex = -1
            this.computed_unRead_count()
        })
    },
    delete_item(index) {
        this.delete_news(index, () => {
            this.currentIndex = -1;
            this.computed_unRead_count()
        })

    }
},
filters: {
    f_news(obj, attr) {
        var obj = obj || {}
        let newsClass = obj.newsMute ? '_news-dot' : '_news-count'
        let newsText = !obj.newsMute ? obj.newsUnreadCount : ''
        let newsShow = (obj.newsUnreadCount > 0)
        let o = {
            nclass: newsClass,
            ntext: newsText,
            nshow: newsShow
        }
        return o[attr]
    }
},
components: {
    searchBar
},
created() {
    this.get_menu_wechat_list(() => {
        this.computed_unRead_count()
    })
}
}
</script>
<style scoped>
</style>

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

<template>
   ....
</template>
<script>
  ....
</script>
<style>
   ....
</style>

那么这个东西是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中有这样的语句

 <search-bar></search-bar>

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（我还没写呢，写的有点累了，后面补上。）