VUE 入门简介

目前很火的一个JavaScript MVVM 库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js 提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js

如果你之前已经习惯了用jQuery 操作DOM，学习Vue.js 时请先抛开手动操作DOM 的思维，因为Vue.js 是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML 语法，将DOM 和数据绑定起来。一旦你创建了绑定，DOM 将和数据保持同步，每当变更了数据，DOM 也会相应地更新。

1.什么是MVVM?

Mvvm 模式广泛应用在WPF 项目开发中，使用此模式可以把UI 和业务逻辑分离开，使UI 设计人员和业务逻辑人员能够分工明确。
Wpf:Windows Presentation Foundation （WINDOW 呈现基础）

首先，我们将上图中的ViewModel 和Model 看作两个工具，它们是实现双向绑定的关键。
从View 侧看，ViewModel 中的DOM 监听器工具会帮我们监测页面上DOM 元素的变化，如果有变化，则更改Model
中的 数据；从Model 侧看，当我们更新Model 中的数据时，ViewModel 会帮我们更新页面中的DOM 元素，并适时反馈到View 中。

2.使用VUE 框架

1. 方法1：

<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
              或者 
<!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 方法2:

使用vue-cli 方法构建，需熟悉nodeJs 构建工具

3.如何应用MVVM 思想来解决问题?

现在有一个功能：用户填入姓名，年龄，选择最喜欢的颜色，然后点击确定按钮提交。就是这样简单的一个调查表。

a.首先设计UI，UI 看起来可能是这样的：

b.根据UI 去设计对应的ViewModel 层需要那些属性，数据和命令：[核心]

Name:string 
  Age:int 
  FavoriteColor:string 
  Submit:Command

c.在ViewModel 层的SubmitCommand 命令中，调用Model 层的Submit 方法进行逻辑处理。Model 层看起来可能是这样的：

 public string Name { get; set; } 
  public int Age { get; set; } 
  public string FavoriteColor { get; set; } 
  public void Submit() { ... } 

VUE 的核心：数据绑定 和 视图组件

**Vue的数据驱动:**数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图

**视图组件化：**把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。
注：vue.js 不兼容IE8

⭐Vue 数据双向绑定
数据可以驱动视图，视图也可以驱动数据

用户输入的内容(VIEW)会实时的更新至数据(MODEL),而不需要用代码去监听input 的变化
⭐Vue 组件化

4.其它特性:

1. 绑定元素特性

 <div id="app-2">             <span v-bind:title="message">                     鼠标悬停几秒钟查看此处动态绑定的提示信息！             </span> </div>  var app2 = new Vue({     el: '#app-2',     data: {         message: '页面加载于  ' + new Date().toLocaleString()       } }) 

2. 条件与循环

条件    
 <div id="app-3">  
   		<p v-if="seen">现在你看到我了</p> 
  </div> 
   var app3 = new Vue({ 
       el: '#app-3',   
         data: {         seen: true     } 
    }) 

循环        
 <div id="app-4">  
    <ol>        
     <li v-for="todo in todos">   
               {{ todo.text }}        
      </li>    
    </ol> 
 </div> 
 var app4 = new Vue({ 
     el: '#app-4',    
     data: {       
       todos: [          
          { text: '学习  JavaScript' },       
          { text: '学习  Vue' },   
          { text: '整个牛项目' }         
               ]    
            } 
   })

3. 处理用户输入
   为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app-5"> 
    <p>{{ message }}</p>   
    <button v-on:click="reverseMessage">反转消息</button> 
</div> 
var app5 = new Vue({
     el: '#app-5',    
     data: {         message: 'Hello Vue.js!'     }, 
     methods: {     
         reverseMessage: function () {     
                 this.message =this.message.split('').reverse().join('') 
         }  
     } 
   })