vuejs.jpg

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动Vue中文官网

一、简单了解MVVM模式

     MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM 就是将其中的View的状态和行为抽象化,让我们将视图和业务逻辑分开。当然这些事ViewModel已经帮我们做了,它可以取出Model的数据同时帮忙处理View中需要展示内容而涉及的业务逻辑。
mvvm.png

  • 上图清晰的描述了关于vue视图和模型之间交互的流程
    • 我们从中也能看到ViewModel是Vue的核心,它是一个Vue的实例,这个实例是作用于DOM元素的
    • Data Bindings将model和view绑定起来,使的双方任何一方发生改变,另一方也会随之改变
    • DOM Listeners会帮vue监听页面DOM元素的变化,从而影响Model中的数据
    • DOM Listeners(文档监听)和Data Bindings(数据绑定),它们是ViewModel的核心,是实现双向绑定的关键

二、Vue.js开发环境

  • IDE vscode
  • git

  • nvm (node包管理) github for nvm

    1
    curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
  • node

  • npm/cnpm

    1
    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  • vue-cli (vue脚手架)

    1
    npm install -g vue-cli

472017A4-83EE-4B7F-8E99-84B7D513EC3B.png

三、Hello World

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<!-- View -->
<h1 align="center" id="app">Ronaldo Say {{ msg }}</h1>
</body>
<script>
// Model
let my-data = {
msg: 'Hello Vue.js!!!'
}
// 创建一个ViewModel(Vue 实例),用它来关联View和Model
new Vue({
el: '#app',
data: my-data
})
</script>

E1843C20-09C3-4823-BA9D-DADAB56EDB33.png
Ps: 1)vue实例中,el: ‘#app’表示将该实例与view层id名为app的元素绑定;2)data: my-data表示与model层名为my-data的对象绑定。
更详细的介绍请移至vue官网