《前端福音，vue.js 之豆瓣电影组件大揭秘-video》

 

{{ message }} 小胡子语法   在 Vue 中被称之为双花括号插值表达式

---------------- http://todomvc.com/ 

TodoMVC是一款开源的JavaScript框架，它使用各种不同的MV*框架实现一个相同的Todo应用。TodoMVC最大的优点就是帮助开发者挑选出合适的MV*框架，从Backbone, Ember, AngularJS, Spine...一系列框架中决定使用哪个框架。  

开发者现在有很多的MV*框架选择来组织开发web应用程序。Backbone、 Ember、AngularJS、Spine… 新的稳定解决方案列表持续增长，但你如何决定在海量的框架中选择哪个使用？为了帮助解决问题，于是诞生了TodoMVC项目，它使用不同的最流行的JavaScript MV*框架实现了一个相同的Todo应用。

# VueJS 入门实践

![vue-logo](img/logo.png)

## 课程介绍

VueJS是一个非常简单但十分强大的库，用于构建数据驱动的组件，为构建现代化的 Web 界面而生。
它具有简单易用、小巧灵活、性能高效等特性，可以更轻松的完成复杂应用页面需求，
但是不同于 AngularJS 和 React 等前端框架，通过 VueJS 构建的应用程序结构更为清晰更为简洁。

通过本次课程的学习，我们可以对 VueJS 有一个基本的认识，并可以通过完成一个番茄清单应用对 VueJS 快速入门。

![TodoMVC](img/todo.png)

## 课程知识点

- MVVM
- 模板语法
- 常用指令
- 番茄清单：TodoMVC
- 使用 Vue 获取网络资源
- 课后作业：豆瓣电影

## 简介

> 渐进式 JavaScript 框架

- [Vue - 中文官网](https://cn.vuejs.org/)
- [Vue - 官网](https://vuejs.org/)
- [Vue - Github](https://github.com/vuejs/vue)
- [Vue - Awesome](https://github.com/vuejs/awesome-vue)
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架
  + 只关注视图
  + 渐进式，可以很轻松的和其它已有库或已有项目整合到一起，增量式开发
- 简单易用
  + 只需要基本的 HTML、CSS、JavaScript 基础即可
- 轻量高效
  + 压缩后大小仅仅 17kb
- MVVM
- 组件化

## 起步

### 我该如何学习一个新技能

- what
  + 是什么
  + JavaScript 框架
  + 上官网 -> 起步（Getting Started）
  + Vue 作者：尤雨溪
  + 单页应用：SPA
    * Angular
    * ReactJS
    * 。。。
    * VueJS
- why
- how

### SPA（Single Page Application）：单页应用

以前网站的交互模型都是通过服务器直出的形式直接渲染到客户端。

- 客户端发起一个请求
- 浏览器锁死：等待服务端的响应
- 渲染服务端响应的数据内容

### 安装

> 参考文档：https://cn.vuejs.org/v2/guide/installation.html

- 单文件
- CDN
- NPM
- Bower

### hello world

```html
<div id="app">
  {{ message }}
</div>
```

```js
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```

## Vue 基础

### 表达式

### 常用指令

- v-text
- v-html
- v-show
- v-if
- v-else
- v-else-if
- v-for
- v-on
  + https://cn.vuejs.org/v2/api/#v-on
  + 缩写：`@`
- v-bind
  + https://cn.vuejs.org/v2/api/#v-bind
  + 缩写：`:`
- v-model
  + https://cn.vuejs.org/v2/api/#v-model