vue.js 拥有简单小巧的核心, 渐进式技术栈, 足以应付任何规模的应用 . 这里的渐进式指的是可以一步一步地, 有阶段地来使用 vue.JS.
它提供了现代 web 开发中常见的高级功能, 比如:
解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟 DOM
1 MVVM 模式
MVVM(Model-View-ViewModel)模式. MVVM 模式是从经典的 MVC 模式衍生而来 . 当 View (视图层)发生变化时, 会自动更新到 ViewModel (视图模型), 反之亦然, View 和 ViewModel 之间同过数据双向绑定 ( data-building ) 建立联系 .
因此, 开发者只需关心数据即可, DOM 维护的事情交由 Vue 处理.
2 第一行 Vue 代码
我们可以通过使用 CDN 方法来加载 Vue.JS, 来实现快速体验. 目前有以下这些 CDN 地址可用:
BootCDN : https://cdn.bootCSS.com/vue/2.2.2/vue.min.JS
unpkg: https://unpkg.com/vue/dist/vue.JS , 会保持和 NPM 发布的最新的版本一致.
cdnjs :
这里推荐使用 WebStorm, 来开发 Vue 项目.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 我的好友列表</title>
- </head>
- <body>
- <div id="App">
- <ul>
- <li v-for="friend in friends">{{friend.name}}</li>
- </ul>
- </div>
- <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.JS"></script>
- <script>
- new Vue({
- el:'#App',
- data:{
- friends:[
- {name:'Jack'},
- {name:'Lucy'}
- ]
- }
- })
- </script>
- </body>
- </HTML>
在 WebStorm 中使用 ctrl+shift+F10, 即可在浏览器中运行.
效果:
来源: http://www.jianshu.com/p/83cb119ee531