什么是Vue？

Vue.js（读音 /vjuː/, 类似于 view）是一个渐进式JavaScript框架Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

创建Vue实例

要使用Vue这个框架，肯定需要先引入Vue
我们打开vue的官网https://cn.vuejs.org/v2/guide/

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

在这里插入图片描述 vue实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

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

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: 'hello vue'
            }
        },
    })
</script>

</html>

我们通过new Vue()来实例化一个Vue对象，其中el:"#app"是挂载点，el后面跟着的是css选择器，其作用是确定vue实例作用于那个节点上，我们一般使用ID。在data里面定义的字段，在HTML中需要显示message的值的话，用{{message}}即可，是不是很方便？

MVVM模型

MVVM是Model、View、View-Model模型，他将我们的数据和视图绑定在一起，当模型数据发生变化时对应的视图数据也会相应的改变，同样的，当绑定的属兔数据发生变化时，模型数据也会发生改变。
我们直接上代码解释，这里我们模拟一个需求，在文本框输入的内容即时显示在旁边。
在这里插入图片描述
在使用原生JS或者JQuery的时候，我们要先给input框定义一个change事件，然后获取这个input框的值，然后在获取下面这个标签的Text，之后再把文本框的值复制给这个标签。
但是在vue里我们只需这样做

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="message">
        </div>
        {{message}}

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: 'hello vue'
            }
        },
    })
</script>

</html>

我们在input框使用v-model来双向绑定数据，这样input的value值就和message绑定在一起了。

Vue指令

vue的指令一般是绑定某些值，我们上面用到的v-model也是指令中的一种
接下来介绍下vue常用的指令

条件渲染

v-if

v-if指令也叫条件渲染，如果值为true则显示元素，false则不显示元素

<div id="app">
  <p v-if="isShow">现在你看到我了</p>
</div>

new Vue({
        el: '#app',
        data(){
            return{
                isShow:true
            }
        },
    })

运行结果：
现在你看到我了

v-else

v-else是在v-if指令为false的时候执行的语句块

<div id="app">
  <p v-if="isShow">这是v-if</p>
  <p v-else>这是v-else</p>
</div>

new Vue({
        el: '#app',
        data(){
            return{
                isShow:false
            }
        },
    })

运行结果：
这是v-else
v-else必须要跟在v-if之后

v-else-if

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show指令

v-show指令是控制元素是否显示，v-if的区别是：

v-show只是控制元素是否显示，元素还是会被渲染出来，占用文档流，只是不显示了而已
v-if如果为false，则元素不会被渲染出来

听说你还不会vue？