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

《前端福音,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
上一篇:理解 python GC


下一篇:Vue.js 相关知识(组件)