01-邂逅Vuejs

1.认识Vuejs   

• Vue（读音 /vju:/， 类似于 view）。
• Vue是一个渐进式的框架，什么是渐进式的呢？

1. 渐进式意味着可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验。
2. 希望将更多的业务逻辑使用Vue实现，Vue的核心库以及其生态系统。
3. 比如 vuejs Core + Vue-router +Vuex，可以满足各种各样的需求。

• Vue有很多特点和Web开发中常见的高级功能

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

2.Vuejs安装方式

• 方式一：直接CDN引入

对于制作原型或学习，你可以这样使用最新版本：


对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：


使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：


在生产环境中可以把 vue.js 换成 vue.min.js，可以带来比开发环境下更快的速度体验。

• 方式二：直接下载使用 script 引入

生产环境
https://cn.vuejs.org/js/vue.min.js

开发环境
https://cn.vuejs.org/js/vue.js

• 方式三：NPM安装

安装最新稳定版
npm install vue

3.Vuejs初体验

3.1 Hello Vuejs       

    
    
    
    



    

        {{message}}
    
    
    

• 创建Vue对象的时候，传入一些 options:{}
  •  {}中包含el属性：该属性决定了这个Vue对象挂载到哪个元素，很明显这里挂载到id为app元素上。
  • {}中包含了data属性：该属性中通常会存储一些数据
    • 这些数据可以是我们直接定义出来的。如上。
    • 也可以是来自网络，从服务器中加载的。

        并且代码是响应式的。

3.2 Vue列表展示

    
    
    
    



    

        {{message}} {{movies}}
        
        

            
{{movies[0]}}
            
{{movies[1]}}
            
{{movies[2]}}
        
        
        

            
{{item}}
        
    
    
    

使用 v-for 指令   v-for="item in 数组"

3.3 Vue列表展示

    
    
    
    



    

        
当前计数：{{counter}}
        +
        -

        
        +
        -
        
        -
        -
    
    
    

使用新的指令和属性

• 新的属性：methods，该属性用于在Vue对象中定义方法。
• 新的指令：v-on:click  语法糖  @click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods定义的方法）。

4.Vuejs的MVVM

什么是MVVM？【维基百科搜索】

维基百科搜索
MVVM（Model-View-ViewModel）
MVVM(Model-view-viewmodel)是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑或后端逻辑(数据模型)的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据的对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大多数视图的显式逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑访问。
MVVM是马丁-富勒的PM（Presentation Model）设计模式的变体。MVVM以相同的方式抽象出视图的状态和行为，但PM以不依赖于特定用户界面平台的方式抽象出视图（创建了视图模型）。
MVVM和PM都来自于MVC模式。
MVVM由微软构架师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight(WPF的互联网应用派生品)的特性来简化用户界面的事件驱动设计。微软的WPF和Silverlight构架师之一John Gossman于2005年在他的博客上发表了MVVM。
MVVM也被成为model-view-binder，特别是在不涉及.NET平台的实现中。ZK(Java写的一个Web应用框架)和KnockoutJS(一个JavaScript库)使用model-view-binder。

MVVM模式的组成部分
模型
    模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

视图
    就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

视图模型
    视图模型是暴露公共和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

绑定器
    声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

理论基础
    MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注与用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码上工作，视图与模型的适当分离也会更加好笑，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。
MVVM模式试图获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近应用程序模型。它使用绑定器、视图模型和任何业务层的数据检查功能来验证传入的数据。结果是模型和框架驱动尽可能多的操作，消除或最小化直接操纵视图的应用程序逻辑（如代码隐藏）。

Vue的MVVM

• View层
  • 视图层
  • 在前端开发中，通常就是DOM层
  • 主要作用是给用户展示各种信息
• Model层
  • 数据层
  • 数据可能是固定的死数据，更多的来自我们的服务器，从网络上请求下来的数据。
• VueModel层：
  • 视图模型层
  • 视图模型曾是view和Model沟通的桥梁
  • 一方面它实现了Data Binding 也就是数据绑定，将Model的改变实时的反应到View中
  • 另一方面实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch等），可以监听到，并在需要的情况下改变对应的Data