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 ：

                <!-- 开发环境版本，包含了有帮助的命令行警告 -->

                <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

                <!-- 生产环境版本，优化了尺寸和速度 -->

                <script src="https://cdn.jsdelivr.net/npm/vue"></script>

方法 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('')

                }

        }

})