学习vue需要先了解关于 HTML、CSS 和 JavaScript 的基础知识，和一些ECMAScript5标准特性。
首先了解下Vue的作者：
尤雨溪，Vue.js框架的作者，毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University。2014年2月，开源了一个前端开发库Vue.js。2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队担任技术顾问。
一、简介
核心目标
Vue(读音 /vjuː/，类似于 view) 的核心库只关注视图层，Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。其它如状态、路由、网络请求需要单独引入相应框架，这使得Vue不仅易于上手，还便于与第三方库或既有项目整合。
渐进式框架
Vue 是一套构建数据驱动的 web 界面的渐进式框架(可以自底向上逐层应用)，表现为：
声明式渲染——组件系统——客户端路由——大数据状态管理——-构建工具
- 可以在数据、逻辑的处理上使用它的特性和设计模式，如响应式数据绑定，在数据变化时视图自动更新；
- 可以在原有大系统的上面，把一两个组件改用它实现；
- 用它处理页面跳转(vue-router)；
- 单页状态管理实例(vuex)；
- 也可以整个用它全家桶开发整套项目；
二、初识Vue
DOM渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
创建第一个Vue应用
<div id="app2">
{{ message }}
</div>
var app = new Vue({
el: '#app2',
data: {
message: 'Hello Vue!'
}
})
-
el: '#app2'设置Vue实例的DOM根节点； -
data: {...}设置当前Vue实例的变量名称和默认值；
看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
现在数据和 DOM 已经被建立了关联，new Vue()函数返回了一个<div id="app">元素所对应的一个虚拟DOM 渲染函数。结合响应系统，Vue通过与真实DOM系统比对来来渲染需要更新的子元素和数据。
基础语法
1.条件与循环
条件语法Demo
指令：v-if v-else-if v-else
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
循环语法Demo
指令： v-for
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
2.处理事件 Demo
指令：v-on ， 用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法。
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
//切割成数组再反转数组然后拼接
this.message = this.message.split('').reverse().join('')
}
}
})
这个示例中更新了html(即Vue模板)的状态，但是没有在js代码中获取任何元素——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
3.处理用户输入 Demo
指令： v-model ， 轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
4.精髓-组件化 Demo
指令： Vue.component()
组件系统是 Vue 的一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：
image
一个Vue组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
可以用它构建另一个组件模板：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
这个场景就是一个列表组件和一个单元格组件，我们可以通过循环和传值来简洁的生成一个列表:Demo
<div id="app-7">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
三、Vue全家桶：Vue、VueRouter、Vuex、axios
- Vue.js主要聚焦于UI，提供了用于组件的整套生命周期函数、事件和数据传递机制、模板渲染机制。
- VueRouter.js 是Vue.js 官方的路由管理器，提供了基于组件的路由配置、路由参数传递、视图过渡效果、导航控制等功能。
- Vuex.js 是Vue应用的统一状态状态管理工具，Vuex 的状态存储是响应式的，而且改变状态的唯一途径就是显式地提交 (commit) mutation。
- axios.js Vue官方推荐的网络请求工具，官方曾经提供过vue-resource工具，但是现在不推荐使用了。简单说axios.js就是一个同时支持浏览器和 node.js 的 http 请求客户端的网络请求库，基于 xhr 封装，使用 ES 规范的 Promise 来实现。
四、应用范围
1. 大型web项目，包括移动端和PC端、后台管理系统
- 传统的web项目在扩展的过程中html文件会越来越复杂和冗余，脚本也会越来越多，从而产生加载速度、渲染效率、代码维护等方面的瓶颈问题。
- 而且开发中反复编写和粘贴相同的代码极其枯燥，也容易产生错误。而React、Angular的产生正是大厂们在实际开发中根据自身技术和需求而设计完成的框架，这些框架紧跟ECMAScript标准，融合一些先进的开发思想和设计模式，很好的避免了上述大型项目中会遇到的瓶颈问题。
- Vue和React、Angular都提供了组件化、动态绑定这些前端开发最亟需的功能，同时还提供了大量其他新颖且实用的特性，比如：按需加载、页面路由、路由拦截、统一状态管理等等，这使得使用这些框架开发大型项目相比于传统的开发模式大大简化了代码。众多优点不再一一举例。
2. 使用weex开发移动端跨平台应用程序
- 虽然weex是不限于特定框架的，但目前主要还是以 Vue.js 和 Rax 作为其内置的前端框架。
- Weex 致力于使开发者能使用同一套代码来构建 Android、iOS 和 Web 应用。具体来讲，在集成了 WeexSDK 之后，你可以使用 JavaScript 和现代流行的前端框架来开发移动应用。
- Weex 在 iOS 和 Android 上都实现了一个渲染引擎，并提供了一套基础的内置组件。基于这些组件，可以用 js 封装更多的上层组件。尽管 Weex 中的组件看起来很像 HTML 标签，但你无法使用所有 HTML 标签，只能使用内置组件和自定义组件。
3. 使用vue-electron开发PC端跨平台应用程序
- Electron提供了一个Nodejs的运行时来作为桌面程序的解释器，同时使用web页面来作为应用的GUI。本质上，electron 就是一个带了 Chrome 浏览器的壳子。
- electron-vue 则是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动建立起 electron 应用程序，很方便。
4. 作为学习其它框架和技术的跳板
- Vue是中国人开发的，中文文档内容完整逻辑清晰，学习曲线也比React平缓很多，所以在国内应用的很广泛。
- 移动端、后端招聘要求越来越多要求掌握至少一种前端框架。
- 学习Vue对于学习跨平台开发、小程序都有一个打基础的作用。
网友评论