Vue教程：框架简介及环境搭建

内容纲要

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架，Vue.js官网地址：Vue官网。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。本教程将通过介绍如何搭建Vue环境，带你走向Vue的编程之旅。

1.vue 介绍及环境搭建

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

使用Vue.js可以通过cdn引入vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

3.通过vue-cli创建vue项目

首先安装nodejs, 其次将vue注入全局

npm install --global vue-cli

然后通过以下命令来创建和运行vue项目。

vue create demo-app
cd demo-app
npm run serve

4.数据绑定

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。


<div id="app-2">
    <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span>
</div>


var app2 = new Vue({ 
    el: '#app-2', 
    data: { 
        message: '页面加载于 ' + new Date().toLocaleString()
    } 
})

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
a. v-bind 缩写：一般用于属性绑定

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

b. v-on 缩写: 一般用于事件绑定

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

例如：可使用 :class="flag: red: white"通过flag的值来动态改变class的名称
或者： :style="background:black" 来改变样式。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

这里面的一个重要的思想就是mvvm双向数据绑定：即改变数据的同时视图也发生变化，视图内容发生变化，同样修改绑定的数据。

5.MVVM简单介绍

MVVM分为三个部分：分别是M（Model，模型层），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负责视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；