如何自学 Vue 呢

2020-02-20 21:55:26 +08:00
 Cy86

自学了 1 年 Python 后, 学了 3 天 Golang, 能用 Go 写个爬虫,Python 也可以, 但大多用 Django 或者 Flask 写后端, , 简单的 HTML 和 JS css 都会用,能做出前端, 能用但是太丑了

发现很多人说 Vue 做前端好用, 而且也好看.

之后我看了 Vue 官网和网上教程 不知道怎么下手, 看了很久没明白这东西是什么, 像 react 和 Vue 一直没明白,

目前陷入懵逼状态, 就像在找撕开胶带的那一条边, 只要找到了便能一路学下去

请问各位: 如何入门 Vue 呢, 需要先了解哪些前提条件呢

10629 次点击
所在节点    Vue.js
70 条回复
murmur
2020-02-21 09:17:48 +08:00
@catch 那是得有前端基础，或者直接用 element 这种框架干活的，最后出产东西一般。。看是能看，细节不忍直视，见过多少兼职前端写的代码连[].join 都不知道用
azcvcza
2020-02-21 09:17:48 +08:00
vue 比 react 好的地方就在于可以单文件和 JQuery 一样引入单个页面直接开始写。
比较传统的前端，都是写好后页面，然后用选择器，document.querySelector('xxx')来筛选要更改的元素，简单的页面还好，如果涉及复杂的联动，还有复杂的状态转换，很容易就淹没在函数里。
vue 和 react 做了什么，建议去看官方的 tutorial，一步一步跟下去
garlics
2020-02-21 09:33:58 +08:00
估计你跟我以前学 vue 的问题一样，看不出 vue 到底和 jQuery 有什么区别
建议你看下 https://cli.vuejs.org/zh/guide/ 感觉这个可以帮助你理解现代化的前端开发
之后可以看下 vue 的框架 element，移动端的话可以看 2 楼写的 vux，这也是我接触 vue 的第一个框架
nullundefined
2020-02-21 12:00:06 +08:00
不用觉得 vue 难学，只要你基础好，从入门到资深只需要一个上午的时间
hongch
2020-02-21 12:21:16 +08:00
前天晚上花了 2 个小时看了 vue 官方文档，照着 demo 撸一边，然后直接搜 element-ui，接下去就是复制粘贴的事
leonard916
2020-02-21 12:27:42 +08:00
Vue 不包括 UI，想要頁面好看可以去找 CSS 框架
hubqin
2020-02-21 12:30:39 +08:00
https://zhuanlan.zhihu.com/p/23134551
AM2coder
2020-02-21 12:37:22 +08:00
vue 还是很好上手的吧。把数据驱动这个概念搞清楚了，就好理解了。我的理解是，就是自己把需要呈现的网页的架子搭好，需要动态变化的地方留一个变量，然后用逻辑方法去改这个变量，网页就会自动渲染了。这整个过程都是由 vue 框架自己完成，我们只要写改变变量的那个逻辑。至于那个架子，可以找一个组件库来美化 UI。建议先不要用脚手架搭项目，先做一个单页的搞清楚原理再层层深入。
wiluxy
2020-02-21 12:45:08 +08:00
vue 和页面好看没有关系，如果说网站写的丑的话，应该看看 css，vue 就算用组件库也是别人已经定义好的样式，css 写的不 6 的话也是很难自定义样式的
zhbzhbzhbz
2020-02-21 12:48:01 +08:00
@pastgift 才发现 element-UI 是饿了么搞的？
sairoa
2020-02-21 13:55:21 +08:00
借宝地一问，代码如下：
```
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="{{url_for('static', filename='js/vue.js')}}"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
```
为啥没反应啊！在浏览器看到 vue 都加载成功了啊！ vue 学习之路卡在第一步了。
clino
2020-02-21 14:06:44 +08:00
要好看可以找一些用 vue 的框架,比如 iview element 之类的,可以在这个上面找找: https://github.com/vuejs/awesome-vue
guolaopi
2020-02-21 14:42:00 +08:00
@sairoa data 属性是个函数
cmdOptionKana
2020-02-21 15:17:46 +08:00
@sairoa 借题发挥歪个楼，有现代化 IDE/编辑器支持之下，还是静态类型语言好用，如果是静态语言，data 那里就会有类型错误提示了。
murmur
2020-02-21 15:25:18 +08:00
@cmdOptionKana
@guolaopi
data 不是 function 不是 fatal，如果是用 webpack 构建会报 warning，我刚才看了我写的 20 多个直接引用的 vue 页面，所有的 data 都是直接写 object，所有页面工作正常，浏览器不报提示
当然我这是写漏了
letitbesqzr
2020-02-21 15:31:33 +08:00
如果只有比较“古老”的 js 基础 u，建议学 vue 之前，学下 es6 ,否则后面会一脸懵逼的。http://es6.ruanyifeng.com/
dcoder
2020-02-21 15:35:34 +08:00
你们都不等着 Vue3 出来后再学么?
"你们"指的是业余前端, 比如日常是写后端的人
DoyouRocket
2020-02-21 15:39:36 +08:00
vue 是数据驱动框架 管理数据用的 好看不好看是 UI 库 建议你看看 ElementUI 有 Vue 版本,然后推荐看 B 站上黑马的 Vue 商城项目视频
kosmosr
2020-02-21 15:39:40 +08:00
我是看别人的开源项目学会的，边学边写 配合官方文档
shintendo
2020-02-21 15:42:40 +08:00
@guolaopi
@cmdOptionKana
data 只是推荐用函数，并没有强制，vue 官方文档就用 object，当然也不会报错

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/646221

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX