什么是VUE?

一、什么是VUE?

1.是一个前端框架，让前端的业务逻辑和赋值分离。关注点就着落在了逻辑代码编写上。

2.为什么我们要使用vue？

其实跟jquery差不多，都是简化我们的开发。例如我们可以用vue实现像后端模板渲染的功能，可以更加便捷的绑定dom事件，可以把一些页面的组件打包重复使用。

3.Vue的MVVM设计模式是什么？导致了和jQuery的那些区别？

如果你对前端有过了解的话一定知道MVVM和MVC这两种设计模式，而且很有可能对mvp也有一些了解。
MVC即model，view，control，jQuery就是采用的这种设计模式，熟悉jQuery的同学恐怕早就对$()深通恶绝了吧。

MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，而尽量避免操作dom树。

换句话说，我们不关注dom的结构，而是考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对dom的繁琐操作，而是专心于对用户的操作进行处理，避免了MVC中control层过厚的问题。

二、语法

1.使用步骤

引入vue.js
定义html的区域，该区域一定需要有id
书写vue的代码
- el：表示被vue接管的区域，写法 #id
- data：表示数据集合，是一个JSON形式的数据

<!-- 引入vue库 -->
<script src="js/vuejs-2.5.16.js"></script>

<!-- 定义被Vue接管的区域，必须要定义id属性 -->
<div id="app">
    <!-- 定义插值表达式，从Vue对象中获取数据 -->
    {{message}}
</div>

<!-- Vue代码 -->
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message: "Hello Vue!" 
        }
    });
</script>

2.语法

插值表达式

格式：{{ 表达式 }}

位置：在html的标签体部分书写

三、vue 指令基本使用