前文提到都已经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。。。
现在就想到这也许有些可笑,太高端了吧,还没学会走路呢,就想起飞么?默默地回了一下头,没看到有人拿着砖头走过来想拍,于是想,有什么害怕的呢,万一实现了呢。