Vue入门基础

1. VUE简介

MVVM思想

M：Model，模型，包括数据和一些基本操作
V：View，视图，页面渲染结果
VM：即View-Model，模型与视图之间的双向操作（无需开发人员干涉）
个人理解，像是消息中间件的原理，subscriber和publisher通过VM进行自动交互.

在MVVM之前，先要从后端获取数据模型，然后要通过DOM操作Model渲染到View中.
然后当用户操作视图，还要通过DOM获取View中的数据，然后同步到Model中.
而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间如何互相影响的,
只需要将他们都与VM关联起来即可.

双向绑定：
·只要Model发生了变化，View上自然就会表现出来
·当用户修改了View，Model中的数据也会跟着改变

中文官网地址：

cn.vuejs.org

2. 安装

首先，Vue的运行需要Node.js的支持，就像Java需要JDK一样.
所以我们需要

1. 先安装Node.js

http://nodejs.cn/download/

查看版本号，以确定是否安装成功

npm -v

2. 初始化环境

安装 好Node.js后，新建一个目录，来作为我们学习的工作目录

E:\VueDemo

进入此目录，进行环境初始化，

npm init -y

执行成功后会再目录中生成一个package.json的文件，npm安装时候回根据此文件来下载依赖，根maven原理类似.

3. 执行安装

npm install vue

执行成功后会生成一个node_modules目录

4. 引入vue.js

这里可以使用自己喜欢的工具来操作，我这里用的是vscode

<script src="./node_modules/vue/dist/vue.js"></script>

当然你也可以忽略上面的所有安装操作，仅仅引入官方提供的js即可

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

3. Hello Word

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

 let vm = new Vue({
   
    el: "#app",
    data: {
   
        message: "Hello World"
    }
});

这样我们就完成了一个Vue的Hello World，下面来解释一下.

首先上面的代码分为2部分，

1. html部分，即View
2. JavaScript部分，这其中的Vue实例，是vm，而数据data可以想成是Model.

vm通过el与id为"app"的页面元素实现关联，通过data属性来与数据进行关联，这样我们只需要将数据拿到交给vm即可，整个数据的显示过程都由vm来控制，免去了我们认为的操作.使得我们可以真正的将注意力集中在View上.

{ {message}}是vue的插值表达式，它将vm的data中key为message的数据的value显示在页面上.
{ {}}可以支持js语法，可以支持函数调用，但是必须是有返回结果的，但不能声明变量(let a = 2)

4. v-text命令：

功能和插值表达式{ {}}类似，都是用来显示内容的.

<div id="app" v-text="message"></div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        message: "Hello World With v-text"
    }
});

建议使用v-text，原因是插值表达式在页面被完全渲染前会显示{ {message}}这种样子，而v-text在完全渲染前不会显示内容.

可以在浏览器按F12，找到NetWork，选择Slow 3G，就会出现下列状态.

v-html：
与v-text类似的命令，只不过它是用来将内容按照html标签的形式来解析的，而v-text只是显示文本内容.

<div id="app" v-text="h1"></div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        h1: "<h1>Hello World!!!</h1>"
    }
});

使用v-html的效果：

<div id="app" v-html="h1"></div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        h1: "<h1>Hello World!!!</h1>"
    }
});

5. v-bind

vue几乎为html标签的任何原生属性都提供了v-bind的支持，比如title属性，可以用来在鼠标悬停时显示信息.(v-bind:xxx，通常简写为:xxx，即v-bind可以省略，只留一个:+属性即可)

<div id="app" v-bind:title="msg">鼠标来来来</div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        msg: "悬停中~~~~~~~~~"
    }
});

v-bind还特别为class，和style进行了进一步的支持.

.active {
   
    font-size :xx-large
}

<div id="app" v-text="msg" v-bind:class="{active: isActive}"></div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        msg: "v-bind演示用",
        isActive: true
    }
});

当isAvtive为true时，class为active，否则class为空.
v-bind:class="{active: isActive}"

让我们在F12的Console手动的更改一下isAvtive的值，可以看到更改之后的值立即被响应到了页面的组件上，这就是前面说过的，我们只需要将view和data都绑定到vm即可，其他的vm都会帮我们来完成.

6. v-model

v-model指令，是用来实现双向绑定的.前面我们见识过了从data的变化到view的动态响应，而要在次基础上实现从view的改变动态响应到data，则需要使用v-model

<div id="app">
    <input type="text" v-model="msg"/>
    <br>
    <span v-text="msg"></span>
</div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        //message: "Hello World With v-text"
        msg: "v-mode演示用"
    }
});

当我们在input中输入内容，下面的展示内容也会跟着发生变化，此时的vm.msg变成了input框中的内容.

而当我们改变vm.msg的值时，发现input框中的内容也会跟着改变，这就是双向绑定的含义.

7. v-on

v-on指令监听DOM事件，比如onclick事件的监听：

<div id="app">
    <button v-text="'我被点击了'+num+'次'" v-on:click="num++"></button>
</div>

let vm = new Vue({
   
    el: "#app",
    data: {
   
        num: 1
    }
});

每次点击都会触发num++
v-on:xxx通常简写为@xxx

7.1 事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求
尽管我们可以在方法中轻松实现这单，但更好的方式是：
方法只有纯粹的数据逻辑，而不是去处理DOM事件细节

为了解决这个问题，Vue.js为v-on提供了事件修饰符

修饰符是由点开头的指令后缀来标示的：

.stop: 阻止事件冒泡到父元素
.prevent: 阻止默认事件发生
.capture: 使用事件捕获模式
.self: 只有元素自身触发事件才执行（冒泡或捕获的都不执行）
.once: 只执行一次

7.2 按键修饰符

vue还为我们提供了特殊按键修饰符.常用的有如下内容

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

举个简单的例子，上键++，下键–；

<div id="app">
    <input type="text" @keyup.up="num++" @keyup.down="num--" :value=