本人是个刚从厦门小培训出来的前端，最近刚刚入职，不知道各位前端大佬们对于vue的学习有什么见解呢？希望大佬们能够指点一些经验

（如果你从没学过框架，那么跳过这一段直接看下面）你培训有没有学习框架这方面的知识？如果有其他框架的使用经验，那么学vue和其他框架一样学就行了，所谓一通百通。

（由于你说你培训过，所以假设你有还行的js基础，熟悉es6语法，不然先学好这些）如果vue是你第一个接触的框架，你可以先去慕课网上看一个免费的vue基础教学，讲的比较基础，但足够让你对这个框架的使用有个大致的概念了。2小时不到看完，然后去vue官网看官网文档，因为vue开发者是中国人，所以中文文档做的还不错。19年的官方文档好像改变了不少，我感觉和我18年看的有很多不同，你就看最新的好了。像文档说的那样，在学到「深入了解组件」之前，你就已经掌握了vue基础知识了（你会觉得内容很短是吧），这时候文档会建议你先停下来，弄个简单的小demo做做，你听他的。把基础知识熟悉一点之后，再继续学下去。

文档中有些地方可能讲的比较晦涩，你看不懂可以先跳过，并不影响使用，等你以后深入框架原理，再回头看看就茅塞顿开了。vue偏向新手，vue的使用就记住一点，多练练、熟悉各种api、语法规则 就行了。

如果你以前没有接触过webpack、npm、模块化，你先不用看vue-cli，包括文档开头的vue npm安装。像文档建议的那样，先学好vue本身，然后去了解了解webpack、npm，再去学vue-cli，不然你会感觉怀疑人生的。

学完vue和vue-cli（如果感觉vue-cli的一些配置理解不了，那么先尝试记住它们，等你以后工程化基础好了，会明白的。你到公司第一要务是快速上手出活，所以先不用太纠结一些东西），你可以找个小项目练练手，这里我还是推荐慕课网上的vue项目，我做过仿饿了么的SPA，感觉挺有帮助的。只不过由于这些课程是几年前的，所以可能和最新的vue语法不一样，全家桶也不一样。比如仿饿了么是vue1.0写的，ajax用的是vue-resource（vue2.0后已弃用），我是用vue2.x + axios + vue-cli3.0重写的。用最新的vue重写老vue项目，不也是一个锻炼吗。

然后随著你接触的项目越来越复杂，组件通信越来越让你无从下手，你自然而然就知道有vuex这个东西了，那时由于你一路自学过来，已经掌握了一些学习方法，学习vuex也不算难事了

ps：再过几个月，说不定你能用vue3.0写了……

再ps：我写过vue对象、数组响应，双向绑定的源码，欢迎有缘人给star。

HiWayne/Self-Vue?

github.com图标

再再ps：另外还有一个有趣的js特效插件，其中的过渡动画使用风格有些类似vue，有兴趣的可以看看readme中的lazyfade教程，也欢迎有缘人给star。

HiWayne/jsAnimate?

github.com图标

打开官方文档&>教程&>敲它

打开官方文档&>生态&>vue cli&>整它

打开官方文档&>生态&>vue route&>怼它

打开官方文档&>生态&>vuex&>搞它

打开官方文档&>生态&> 动画transition &>弄它

书？ &> vue.js实战 &> 安排它

demo？&> 打开github &> 搜索awesome vue

~ 推荐饿了么项目

emmm敲完这些，你也就差不多入门了

----------------------------------补充的分隔线

2021年了。vue3的hooks，建议想入手vue的同学千万要抓紧拿下。虽然咱已经转战react了，但是

以react的hooks的应用经验来看。vue早晚也会是hooks的天下。

马上就年末了，本来是在公司维护维护项目，修改之前项目中的一些问题不大的bug，没想到被组长商量著说，要用vue重构之前项目的前端，最近几天工作量，突然剧增了起来。

没办法。。。对于不是主要写前端的我来说，之前一直是用jq和bootstrap在项目中强撑，随著项目的需求功能越来越多，显然jq和bootstrap写起来是特别的不顺手。这不从四天前开始看vue。

emm....之前没接触过vue，我也算是初学者了。

vue是目前比较常用的前端框架，相对于主流的三大框架React、Vue、Angular。vue是比较好入手的一个框架了。

下面就说说我是如何在一周就开始上手vue做项目的，也给之后想要入手vue的同学一些参考。

1 首先了解vue，必须看vue的官方文档啊！

官方文档链接：https://cn.vuejs.org/。（里面有一段视频，《WHY VUE.JS》,强烈建议你看一下，大概介绍了VUE的语法用法，初学者建议多看看官方文档，讲的很全面）。

vue官方文档

2 推荐几个学习VUE的地方：

菜鸟教程VUE：https://www.runoob.com/vue2/vue-tutorial.html（菜鸟教程大家都懂得，菜鸟当然要看菜鸟教程喽）

速学堂VUE：https://www.sxt.cn/intro/64.html（这个是视频要收费299，不过淘宝你懂得-_-）

Vuejs中文社区 ：https://www.vue-js.com（vue的中文社区，没事逛逛总有好处的。）

Vue开源项目汇总：https://github.com/opendigg/awesome-github-vue（github上的vue大量的组件，框架供你选择。我们做的项目就是用的是饿了么开发的vue的element组件）

3 必须了解的VUE相关的知识

1 工要善其事,必先利其器，你需要一款合适的编辑器，这里推荐Hbuilder。国人开发的，界面是中文，简洁大方。适合上手。

Hbulider界面

2 node.js和 npm 相关的知识

vue.js的安装需要nodejs环境，vue项目通过npm（类似于python的pip 用来下载第三方包）

3 需要你会前端的基础知识(Html Css javascript等知识)

em 这些就是我最近的Vue入门学习，希望能对你有所帮助。

PS 最后说说我们当时用的VUE做的后台管理系统，我是在github上找到element的项目框架进行修改的。

目前只是用VUE完成了简单的登录页面的主页。

接下来准备把用户管理页面用VUE替换了。（之前用bootstrap写的）

用户管理界面

个人觉得VUE在许多地方还是很优与bootstarp的，比如（下拉选择框，级联选择等），而且vue现在是比较流行的前端框架，学习学习总归是好处很多的。

就暂时写到这里，等项目完结了，再写一写VUE相关的东西。共勉！

作为初学者，想学习Vue.js，应该看一下黑马程序员Vue最新学习视频！

4小时+5个拣选案例让你快速入门Vue.js

4小时+5个拣选案例让你快速入门Vue.js（ps：介绍来源于官网）

----站在初学者的角度，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网路请求库axios的基本使用，中间穿插著5个精心设计的案例

学习亮点

1，0基础，面向初学者设计，对于Vue完全的0基础也能够轻松上手

2，编程思路转换，花姐带你从Vue基础，本地应用，网路应用，综合应用从各个方面感受Vue带来的全新编程思路

3，精心设计的案例，适时出现的案例，让知识立刻学以致用。

学习内容

首先讲解Vue的基本使用，然后讲解Vue中的常用指令，结合指令完成3个案例，接著讲解axios网路请求库，结合axios完成两个案例

适用人群

1、希望未来使用Vue进行前端开发的小伙伴进行入门学习。

2、学习完毕html、css、Javascript、Ajax的同学

4小时+5个拣选案例让你快速入门Vue.js

配套资料：https://pan.baidu.com/s/1meI9FV4OcKJWv6M0lk9gqA 提取码：itzp

更多Vue学习视频：

Vue 组件实战

配套资料：https://pan.baidu.com/s/1tAGur6qWxoEZGvcUBJy-BA 提取码：hk88

Vue.js + Node.js-构建音乐播放器新玩法

配套资料：https://pan.baidu.com/s/1BcRHuOhPJbupOAwDTngNiQ 提取码：6sir

2018年Vue.js深入浅出教程

配套资料：https://pan.baidu.com/s/1Uwja4t4ZE7cmm-l0xufkFg 密码：8v9c

Vue思维导图目录

  1. MVC与MVVM的区别
  2. Vue基本代码结构
  3. Vue指令
  4. Vue组件
  5. class和style动态绑定
  6. computed计算属性
  7. EventBus
  8. filter过滤器方法

Vue是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

0.MVC 与MVVM的区别

  • MVC是后端的分层开发概念；
  • MVVM是前端视图层的概念，主要关注于 视图层分离。MVVM把前端的视图层分为了三部分：Model,View,VM ViewModel

1.Vue基本代码结构

const vm = new Vue({
el:#app,//所有的挂载元素会被 Vue 生成的 DOM 替换
data:{ // this-&>window },
methods:{ // this-&>vm},
//注意，不应该使用箭头函数来定义 method 函数 ,this将不再指向vm实例
props:{} ,// 可以是数组或对象类型，用于接收来自父组件的数据
//对象允许配置高级选项，如类型检测、自定义验证和设置默认值
watch:{ // this-&>vm},
computed:{},
render(){},
// 声明周期钩子函数
})

当一个Vue实例被创建时，它将data对象中的所有的property加入到Vue的响应式系统中。当这些property的值发生改变时，视图将会产生 响应，即匹配更新为新的值。

例外：

  • Vue实例外部新增的属性改变时不会更新视图。
  • Object.freeze()，会阻止修改现有的property，响应系统无法追踪其变化。

实例属性和方法

  • 访问el属性：vm.$el,`document.getElemnetById(『app』)``;
  • 访问data属性：vm.$data
  • 以_或$开头的property不会被Vue实例代理，因为它们可能和Vue内置的property、API方法冲突。你可以使用例如vm.$data._property的方式访问这些property。
  • 访问data中定义的变数：vm.a,vm.$data.a
  • 访问methods中的方法：vm.方法名()
  • 访问watch方法：vm.$watch()

不要在选项property或回调上使用箭头函数,this将不会指向Vue实例 比如created: () =&> console.log(this.a)或vm.$watch(a, newValue =&> this.myMethod())。

因为箭头函数并没有this，this会作为变数一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之类的错误。

2. Vue指令

插入数据：

  • 插值表达式相当于占位符，不会清空元素中的其他内容。直接写在标签中。会将html标签作为文本显示。
  • v-text会覆盖元素中原本的内容。写在开始标签中，以属性的形式存在。会将html标签作为文本显示。
  • v-html（innerHTML）会覆盖元素中原本的内容，会将数据解析成html标签。

3. Vue组件

组件配置对象和vue实例的区别

  • 组件配置对象没有el，组件模板定义在template中；
  • 组件配置对象中data是函数，该函数返回的对象作为数据。

创建组件模板

  • 方法一

var com = Vue.extend({
//通过template属性 指定组件要展示的html结构
template:&

这是使用Vue.extend搭建的全局组件&

})

  • 方法二：使用对象创建模板

{
template:&

这是使用Vue.extend搭建的全局组件-com3&

}

  • 方法三：使用template标签（写在受控区域外面）创建模板，通过id建立联系

& 写在受控区域外面
......
&

{ template:#tmpl }

组件中的data是一个函数的原因

  • 多次使用该组件，如果修改其中一个中的数据，另一个也会改变。
  • 写成函数的形式，每次调用函数，返回一个新的对象

ref属性

  • 获取dom元素/组件：标签上添加ref属性，this.$refs.ref属性值获取该dom元素/组件。
  • this.$refs.ref属性值.变数名获取组件中的数据
  • this.$refs.ref属性值.方法名()获取组件中的方法

$parent 和 $children 获取 父/子组件的数据和方法

  • this.$parent获取父组件
  • $children由于子组件的个数不确定 返回的是一个数组 ,不是对象
  • this.$children[0]获取第一个子组件

作用域插槽：父组件替换插槽的标签，内容由子组件决定。

编译的作用域：自身的数据在自身模板template标签中生效

  • 插槽上添加 属性绑定：data=』子组件中的数据』
  • 父组件通过template标签，添加slot-scope=』slot』slot-scope属性接收子组件中的数据slot.data
  • template标签中的html结构替换slot插槽中的默认html结构。

4.class和style动态绑定

绑定

5.computed 计算属性

6.EventBus

7.filter过滤器方法

原作者姓名：1024 FED

原出处：腾讯云原文链接：面试必备 Vue 知识点 - 云+社区 - 腾讯云

推荐阅读：
相关文章