vue 学习笔记二之vue2与vue1的选择

    前文提到都已经Vue2.x了，Vue1还没学呢。那么如何开始呢，是先Vue1，再Vue2，还是直接Vue2呢，得对比一下。

查阅了一些资料，看到有人提到正在把项目逐渐迁移到vue2.0，建议直接从vue2.0+开始。那么这样看来，从时间成本的角度看，加上vue1到2的进阶是比较平滑的，api相似，可以考虑直接从vue2.0+着手，至于现有的vue1.x的项目，只需要关注他们之间的差异就好了。

 

有过AngularJS和react开发的经验，而vue有类似的双向数据绑定机制，以及类似react的组合视图组件。按理说应该轻车熟路了，但感觉还是疑点重重。入口在哪里，如何一步步构建大型应用呢，有哪些坑在等着，继续往下走吧。

看到新手填坑文章，作为入门的第二步，走起。

http://www.jianshu.com/p/5ba253651c3b

 

等等，等等，入门之后呢，熟悉了基础语法，会编写一个应用，就完了吗？

No，No，最终的目标在哪呢？再慢慢思考ing......

万丈高楼平地起，还得打地基。

首先看到npm run dev命令，另外还有npmrun build、npm run e2e等，为自动化任务，可以查看package.json。配置scripts下dev: node build/dev-server.js,监听http://localhost:8080，dev的配置定义在config/index.js中。疑问：那这个配置是如何引入的呢？回头再看。

webpackConfig的路径是./webpack.dev.conf，引入baseWebpackConfig，路径为./webpack.base.conf，应用入口entry为app:'./src/main.js'。

new Vue({

      el: ‘#app’,

      router,

      template: ‘<App/>’,

components: { App }

})

App.vue生成页面，引入<router-view></router-view>，通过router/index.js引入新的component，引导页面为Hello.vue，加入了Core Docs、Forum、Gitter Chat、Twitter、Docs forThis Template，etc。

加一个例子，在components下新建fstcomp.vue，添加：

<template>

  <div id="fstcomp">

    <h1>I am a title.</h1>

    <a>written by {{ author }}</a>

  </div>

</template>

 

<scripttype="text/script">

export default {

  data () {

    return {

      author: "微信公众号jinkey-love"

    }

  }

}

</script>

 

此处data() {

      return {

             author: ‘xxx’

}

}，相当于data:function() {

      return {…}

}，data是一个函数，返回一个对象。

 

在Hello.vue的<template>里添加<fstcomp></fstcomp>，在<script>的exportdefault里加入components: { fstcomp }，即添加了新的组件。

如此可构建越来越多的功能。

我如果想添加一个click方法，那怎么做呢？

在Hello.vue的<template>中添加

<h3v-on:click="clickme()">Hello</h3>

在<script>中添加

  methods: {

    clickme () {

      alert('click me in hello.vue')

    }

  },

这里遇到了一些障碍，就是添加methods后报错，因为没看完整的语法，所以查资料一点点试，一开始clickme 后面没加空格，alert结尾加;号，使用clickme:function() {…}这种写法，etc。虽然很纠结，也有收获，看了更多的资料。

比如，Vue.js 2.0快速上手，

https://zhuanlan.zhihu.com/p/23078117

包括模板语法、Vue实例、计算属性、监听器、Class和Style绑定、条件绑定、列表渲染、数组改变监测、事件处理、自定义事件、Slot分发内容、动态组件、其他。Vue1.x TO 2.0，使用vue-migration-helper。

 

Vue实例的生命周期，created、mounted、updated以及destroyed

如何快速上手？当然是直接看文档，然后可以写个小项目咯。通过项目驱动学习是最快的入门学习。

举例一个小项目：Vue2.0实现简易豆瓣电影webApp：https://github.com/superman66/vue2.x-douban。

一个项目快速学习Vue+vue-router的使用。

作者：超人不会飞

链接：https://www.zhihu.com/question/51173658/answer/138265175

来源：知乎

这个还没看的，先Mark一下

 

Vue2.x踩坑与总结

https://segmentfault.com/a/1190000008279436

1.    独立构建vs运行时构建

2.    挂载点的选择

3.    动态组件渲染（跟1.x类似）

4.    ref

5.    自定义事件

6.    组件命名的约定

7.    子组件中使用this

8.    key的使用

9.    v-move的使用

10. 跳过css检测

11. render函数的使用

 

vue-router2.x

1.    router-view

2.    挂载

3.    给link添加事件

4.    利用vue-router做导航

5.    路由嵌套

内容超级多，怎么如何消化呢？还是那句老话，一步一个脚印。

 

再看另一篇文章，新手向Vue2.0的建议学*顺序，这个当然是仁者见仁智者见智，只当借鉴。http://m.sanwen8.cn/p/584LOHO.html

       既然走上这一步，那么必然有高的目标，罗列一下Vue进阶之路。

1.    用webpack-simple模板，阅读官方教程进阶篇及vue-loader文档，从零开始搭一个项目加深理解

2.    整合vue-router和vuex

3.    深入理解Virtual DOM（React核心）和渲染函数及其关系，了解其使用方法和适用场景

4.    了解服务端渲染的使用，理解它为你所用

5.    阅读开源的Vue应用、组件、插件源码，并尝试自己编写

6.    参考贡献指南阅读Vue的源码，理解内部实现细节。（了解Flow）

7.    参与Vue GitHub issue的定位->贡献PR->加入核心团队->升任CTO。。。

现在就想到这也许有些可笑，太高端了吧，还没学会走路呢，就想起飞么？默默地回了一下头，没看到有人拿着砖头走过来想拍，于是想，有什么害怕的呢，万一实现了呢。