学习Vue你需要知道的前置知识

在国内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”开始

{{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之路越走越远，越飞越高！