在国内Vue盛行的今天,很多想转行入门前端的同学,以为掌握Vue开发,便能走上人生巅峰,在前端界有容身之所?所以不打基础直接上手Vue?遇到问题上交流群截图,当伸手党?
作为前端开发的一份子,直接学Vue等于入门前端?告诉你,事实是不存在的。
在这里插入图片描述

掌握Vue是帮助前端开发人员敏捷开发的一种技能,Vue框架是一种高效解决通用业务场景的方案,在前端开发的发展长河中,他是目前受欢迎的,主流的方案之一。很多同学做出Vue项目后,都希望通过面试,来拿到一份前端offer,但也四处碰壁。

在这里插入图片描述

其实找一份前端工作,只会Vue是远远不够的,原生JS,移动端开发如果你不够熟练,是非常吃亏的。当然,如果有个好的UI大腿,切图你是可以忽略的。
物联网+时代,很多场景都是线上线下相互结合,导致移动端用户量激增。另一方面,以Angular,React,Vue为主的MVVM框架和NodeJS,ES6等前端新技术的出现和快速迭代,让前端得到前所未有的发展空间。
今天的前端,早已借助ES6和NodeJS实现模块化,系统化,前后端分离的开发模式也已经成熟。前端只需要关注接口数据,无需关注后端用什么语言实现。前端像适配器般角色,能够灵活对接后台,甚至,通过NodeJS,自己兼任后台角色,也就是全栈开发。因此,前端开发工程师的“钱”途,是十分乐观的,但这些技术实现,不是Vue一个框架能全部满足的。
既然JS能够前端,后端一手抓,作为想入门前端的同学,我们更应该专注于原生知识的学习,框架是学不完的,但底层的知识,思想是相通的,下面我们简单列出js的学习路线
在这里插入图片描述
很多同学面试的过程中,被问到原生知识或底层原理,就答非所问。虽然使用Vue很久,但其中的响应式数据原理,vue路由懒加载原理,Vue生命周期,这些理论知识缺十分空白。更重要的是,面试官考察的,不仅是理论知识,还有你的编码习惯,拆分问题,解决问题的思维方式。我们要做的,就是夯实原生知识,设计模式,从前端走到后端,时刻关注前端动态,才能成为一名合格的前端开发工程师。
前置知识了解后,我们来快速入门Vue,对于不习惯阅读Vue官方文档的同学,可以继续往下读,我们还是推荐大家养成阅读文档的习惯,这样才能更快的掌握第一手资料。
我们蓝景也准备了Vue的电子书,把Vue里面必需掌握的知识再次提炼,帮助大家快速上手Vue(蓝景Vue电子书http://mybook.bluej.cn/vue/docs/#/),除了Vue,蓝景电子书还有其他有关前端方面的电子书,欢迎大家把蓝景电子书加入浏览器的收藏夹中,方便各位快速查阅(蓝景电子书http://mybook.bluej.cn/)。
使用Vue
在编辑器中,直接复制下面代码,用
创建一个 Vue 实例,显示’hello world’
学习一门新技术,我们从“hello world”开始

hello world
{{msg}}
这里涉及到了3个Vue的基础 1.将实例化的Vue对象挂载在id为app的容器中。 2.在data属性中声明响应式数据msg, 当这些属性的值发生改变时,视图将会产生“响应”。 3. 通过模板语法,使用“Mustache”语法 (双大括号) 的文本插值,把msg属性绑定到视图上

常用指令
通过”hello world”的例子,大家发现Vue的写法是非常贴合原生的,这也是“渐进式”框架的特点,推荐大家掌握原生js基础后,来学习Vue。
下面我们列举Vue常用指令。
1.绑定数据 v-bind:(缩写:)
动态地绑定一个或多个特性,或一个组件 prop 到表达式。

2.条件 v-if/v-show
v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-if=“布尔值”
v-if=“字符串”-隐式转换 v-if=“true”
v-if绑定条件如果为false,则以 来占位
v-show绑定条件如果为false,则添加style=“display:none;”

3.循环 v-for="ele in elements "
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in elements形式的特殊语法,其中 elements是源数据数组,而 ele 则是被迭代的数组元素的别名。

  • {{ ele }}

var example1 = new Vue({
el: ‘#example-1’,
data: {
items: [ ‘b’, ‘l’,‘u’, ‘e’ ,’j’ ]
}
})

结果:
b
l
u
e
j

总结
通过学习上面的知识点,大家可以发现,有原生JS基础后再来学习Vue,是不是倍感亲切,其实框架的api很多是贴近原生js的api,因此我们强调的“夯实基础”,以不变应万变的心态来接受新事物,这个就是学习前端正确的打开方式。

梦想在蓝景启航
http://www.bluej.cn/newbluejsite/html/index.html
扫描下方二维码
关注我们
期待每周与你相遇
畅游代码世界
在这里插入图片描述在这里插入图片描述
广州蓝景,助力在IT路上前进的你,
让你在IT之路越走越远,越飞越高!

Logo

前往低代码交流专区

更多推荐