vue.js浅学习之路

之前初学了 vue.js， 对 vue 有了初步的了解，虽然只是将它作为 js 库来使用，只是用了很小部分功能，但是感觉再也回不到 jquery 了。

开启有vue的前端道路

最近选择了加入了一个技术牛逼的创业团队，感觉上是个牛逼的团队。刚好前端的技术选型就是用的 vue.js，所以一段时间都在恶补 vue 的更多知识。

当然，如果仅仅把 vue.js 当作一个强大的 js 库来用也是完全可以的。至少大部分前端项目，相比 jquery 会很大的优势。但是如果是仅仅是如此使用 vue，那么对于你来说，可能是很大的损失。如果你现在还不太想放下 jquery ，那我先放一个小 demo 让你体验一些vue的魅力。

一个基于vue实现的todos https://zhuss.github.io/todomvc/，代码地址 https://github.com/zhuss/todomvc 下载可以看下，代码和思路其实很简单，如果你看不懂，那么你应该点击这个链接http://cn.vuejs.org 再去了解一下。

当然，我相信你应该是和我一样想用 vue 做更多事情。那么你应该需要借助vue-cli去搭建一个更大型的项目，所以请看下自动生成的项目。注意，如果你是刚开始使用vue的话，在构建基础模板项目的时候请加上版本号，也就是将命令
$ vue init webpack my-project 这是 vue2.0 的版本
换成
$ vue init webpack#1.0 my-project 这是 vue1.0 的版本

vue希望你用组件的方式搭建你的项目，因为这样才能做到代码复用，你就再也不用在多个页面中复制粘贴代码了。生成的代码中有默认的组件 Hello.vue 和 App.vue ， 这是最简单的两个组件了，你可以根据不同的组件去实现不同组件的功能，而且组件是可以嵌套的。

有了自动生成的项目之后，那我们就根据这个项目，去试试组件应该怎么写，怎么用了。

我们打开 App.vue，看下是如何构建的，我们发现这个文件里包含 3 个东西 html，js，css。
其中html就是dom结构，js是逻辑代码，css就是样式表。然后我们就可以哈皮的在App.vue的文件下写我们的demo了。

接下来的事情就简单了，那就是看vue的官方文档，去组织我们的js代码。最开始就写单个的组件就好了，当然你也可以引入其他的组件，然后使用引入的组件，完整的js包括下面这些。

//引入组件的方式
import Cover from './components/marketing/Cover'

//注册组件
module.exports = {
    components:{
        Cover
    },
    methods:{
       //这里是方法
        loadDate(){
            ...
        }
    },
    mounted(){
    //这里写组件加载完成时的逻辑
        this.loadDate()
    },
    data(){
    //这里写数据  关键的部分
      return{
         msg:"Hello word!"
      }
    }
}

在dom中使用组件

当然，在写demo的时候还是把文档打开，对照着看，相信不懂的文档都会有详细的说明的。最后，希望vue能开启你前端的新道路，下篇文章我准备写下vue项目的多页面配置，希望你也喜欢。