Vue前端基础知识，一文打通
目录
一、什么是Vue
二、MVVM思想
三、快速上手Vue
Vue的声明式渲染
双向绑定
v-text 和 v-html
v-bind
v-model
v-on
v-for
v-if 和 v-show
一、什么是Vue
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上 手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
（说白了，vue的出现使得我们的前端开发变得更加简单快捷。懒惰才是第一生产力呀！！！）
二、MVVM思想
- M：即Model也就是模型，包括了一些基础的操作
- V：即视图，也就是页面渲染的结果
- VM：即View-Model，模型与视图的双向操作
换而言之，框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象。
三、快速上手Vue
前面的铺垫已经结束，下面开始Vue的相关操作说明。
Vue的声明式渲染
声明式编程是一种编程范型，与命令式编程相对立。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。
具体操作也非常的简单：
1、设置一个div标签id为app（id名字随便取一个就行）
{{ message }} //设置一个message变量，一会说啥意思
2、使用Vue声明式渲染这个div标签，并给message赋值
var app = new Vue({
el: '#app', //通过id确定声明式渲染的对象（傻瓜式教学：要绑定哪个就把那个app该成其他的id）
data: {
message: 'Hello Vue!' //通过这个data给什么的message变量渲染
}
})其实这一段代码稍微有点了解过Vue的朋友，应该都知道是啥意思。就是Vue通过id绑定了那个div标签，并把message这个变量给渲染了上去。
- el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个 div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
- message：这里我们指定了一个 name 属性
- 页面中的`h2`元素中，我们通过{{message}}的方式，来渲染刚刚定义的 message属性。
双向绑定
{{name}}，非常帅！！！有{{num}}个人为他点赞。
我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和 视图的关联即可（MVVM）
v-text 和 v-html
- v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染
v-text:
v-html:
效果：
v-bind
html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值； 而且在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。
1) 使用v-bind绑定class
2) 使用v-bind绑定style
3) v-bind的缩写
可以使用：进行v-bind的缩写。
v-model
v-text、v-html、v-bind这些指令是单向的绑定，数据影响了视图渲染，但是反过来就不行。而v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue 中的自定义组件）
Java
PHP
Swift
你选择了：{{language.join(',')}}
通过上述的代码就可以实现一个简单的v-model的效果。
多个`CheckBox`对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是 boolean 类型。radio 对应的值是 input 的 value 值。text` 和`textarea` 默认对应的 model 是字符串。`select`单选对应字符串，多选对应也是数组。
v-on
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
v-on 指令用于给页面元素绑定事件。 语法： v-on:事件名="js 片段或函数名"
有{{num}}个赞
另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`
v-for
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。
语法：v-for="item in items"
-
items ：要遍历的数组，需要在 vue 的 data 中定义好。
-
item ：迭代得到的当前正在遍历的元素
- {{user.name}} - {{user.gender}} - {{user.age}}
通过上述的代码便可实现对数组中各个元素的遍历，并将其渲染出来。
v-if 和 v-show
看到我啦？！
看到我啦？！show
v-if 和 v-show的区别：v-if 是“真正”的条件渲染，而v-if 是惰性的：直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
四、结束
本文主要是对Vue的一些基础知识，以及常见指令的介绍。如果想更加深入的学习Vue可以查看官网的教程：简介 | Vue.js