Vue的简介

Vue.js 是一套构建用户界面的渐进式框架。关于渐进式，指的是使用可以从简单到复杂，简单的可以只是为一个页面渲染数据，而复杂的是利用组件、路由等构建一个大型的应用。

相比于Angular和React，Vue的限制相比之下就少了很多，不需要使用指定的依赖注入、模块以及组件定义。Vue可以使用其他优秀的库，并且可以和已经开发的应用进行融合，而不需要重新开始。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。这使得Vue容易上手，学习成本比较低。

Vue采用的是MVVM模式
MVVM模型

ViewModel是Vue的一个实例，其DOM Listeners帮助监听DOM元素的变化，将变化传递给Model进行相应的改变，Data Bindings则监听Model中数据的改变，然后将改变传递给View层，对DOM进行相应的改变。这样就完成了View和Model的双向绑定。

Vue的引入

Vue可以通过cdn上面的文件引入

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

也可以通过

npm install vuejs

然后在文件中引入本地的vuejs即可。

Vue的简单使用

引入vuejs文件后，在js文件中创建一个Vue实例

var vm = new Vue({ 
    el:"#el", 
    data:{
        hello:"Hello Vuejs!"
    } 
});

然后在html文件中将这个实例挂载到一个元素上面，这里不推荐挂载到body元素上，Vue会对这种情况进行报错。

<div id="el">
    <div>{{hello}}</div>
</div>

这样这段html会被渲染成Hello Vuejs！的文本。

Vue的常用指令

v-model

可以在input、textarea等元素上创建双向绑定。

<div id="el">
    <p>{{message}}</p>
    <input type="text" v-model="message">
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            message: "Hello Vuejs!"
        }
    })
</script>

这里写图片描述
初始时会显示Hello Vuejs！，在改变输入框的内容后，显示的内容会根据输入框中的内容进行同样的改变。
而在控制台中如果输入

vm.message = "Hello World!"

这里写图片描述
则显示的内容与输入框的内容都会改变为Hello World！。这是Vue双向绑定的一种使用。

v-if

v-if是条件渲染指令，根据表达式的真假对元素进行插入或者删除。

<div id="el">
    <p v-if="yes">YES</p>
    <p v-if="no">NO</p>
    <p v-if="age <= 25">age <= 25</p>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true,
            no: false,
            age: 25
        }
    })
</script>

这里写图片描述
渲染出来后YES和age <= 25都会显示，而NO不会显示。

同时通过控制台可以看到第二个p元素是没有渲染出来的。

v-show

v-show和v-if类似，都是条件渲染语句，不同在于v-show即使条件为false也是会被渲染在html文本中，只是style中的display属性改为了none。
这里写图片描述
v-show的使用与v-if类似。

v-else

v-else必须跟在v-if或者v-show后面，当条件不符合时，会显示v-else中的元素，而是否渲染在文本中则取决于前面使用的是v-if还是v-show。

v-for

v-for是一个遍历渲染，语法与js中遍历语法类似。

<div id="el">
    <div v-for="i in arr">
        <p>{{i}}</p>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            arr: [1, 2, 3]
        }
    })
</script>

渲染后显示为
这里写图片描述
这里需要注意的是，由于vue的监听机制，如果改变数组序号或者直接给数组赋值的话，vue是不会监听到这种变化的，需要通过push、pop、split等方法改变数组，vue才会监听到变化并进行相应的渲染。

v-on

v-on用于监听DOM事件，然后监听到事件时调用相应的函数进行处理。

<div id="el">
    <p v-if="yes">YES</p>
    <div v-on:click="convert()">Convert</div>
</div>
<script>
    var vm = new Vue({
        el: "#el",
        data: {
            yes: true
        },
        methods: {
            convert: function() {
                yes = !yes;
            }
        }
    })
</script>

当点击Convert时，YES的文本会在显示和隐藏中不断切换。

Vue简单入门