vue基础

什么是vue？
是当前最受推崇的三大前端框架之一，采用MVVM设计模式进行开发。
M：model，数据层，也叫模型层
V：view，视图层，也叫页面层
VM：viewmodel，数据状态层
M层通常情况下是后台程序，用来提供数据。
V层通常情况下就是前端程序，用来展示页面的效果，也就是HTML程序。
VM就是连接M层是V层的桥梁，也就是项目用到的JS文件，用来向M层获取数据，同时将数据进行保存。

MVVM项目与普通模式开发的项目区别在哪里，就在V层和VM层数据的交互上。
MVVM项目获取后台数据，然后将数据直接保存，保存以后页面的数据自动更新，省去了复杂的dom操作。（面试题）

如何使用vue
1、直接引用vue.js文件，就类似使用jq方法。主要用在学习的过程中。
2、使用node运行vue项目的环境，然后通过node来是实现vue组件化的开发，一般情况在项目开发时模式。

使用vue步骤：
1、下载vue.js文件
2、创建html文件，并且在html文件新建一个div元素，给div元素设置id值。
3、在项目引入vue.js文件，并且实例化一个vue对象。
4、在vue对象实例中设置各种选项。
5、使用vue提供的语法将数据展示出来。

vue选项
el选项：确定vue项目生效位置，值为选择器。
data选项：设置vue项目使用的数据，数据以json形式保存。
methods选项：设置vue项目用到的函数。
computed选项：用来设置计算的函数。
components：用来设置组件。

vue指令

用来操作html中的dom,例如设置html内容，设置标签属性，设置事件，生成html结构。
在对应的标签中使用v-xxxx=“”方式设置对应的指令。

v-html用来设置html内容
v-text用来设置文本内容
v-on用来设置事件，v-on:click=“alertabc”
@符号实现v-on指令简写
简写：@click=“alertabc”
v-bind用来设置标签的属性
v-bind:class=“myabc”
简写：:class=“myabc”

如果需要设置多个class值，可以将class对应的变量设置成json，json中的键名表示class的值，键值为布尔类型，表示该class值是否生效。

v-model：获取表单的输入数据
v-model可以实现页面的数据双向绑定
数据双向绑定原理：
（1）对标签设置的输入事件，感知表单值的变化，让值发生改变的时候，数据状态层中的对应数据也发生变化。
（2）通过js去改变了数据状态层中的数据，也会触发对应更新页面的函数，将新的数据渲染的页面中。

作业：

三大前端框架：vue,angular,react
vue优点：1.比较轻量级，功能封装得比较少，代码比较短，如果要拓展功能，需要使用地方前端库。
2.语法非常简单，3天就能入门。
3.vue是中国人开发的。文档就是中文写的，非常容易看懂。（面试）

v-if和v-else ：判断指令
判断某个变量的值是否为真，如果为真就渲染该指令所在的html标签。

v-show：显示指令
判断某个变量值是够为真，如果为真显示该html标签，否则隐藏该标签。display样式属性来实现。

v-if和v-show的区别：（面试题）
v-if直接确定标签是够加载，v-show都会将标签给渲染出来，只不过通过样式让起显示或者隐藏。

v-for:直接将数据中的数据进行变量，然后循环成结构相同的html

{{a}}

案例：员工信息录入系统
逻辑：
（1）将所有表单的输入值绑定到一个json，使用v-model指令。
（2）在添加按钮上设置点击事件，点击事件中将用户的信息添加到新的名单数据中。
（3）使用v-for循环名单数组，生成重复的html结构。
（4）在删除按钮中添加点击，使用数组的下标做为参数，执行splice方法，删除掉对应的数组元素。
注意：在函数中使用data中的数据，需要使用this关键字，例如this.name