目录
一、什么是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名字随便取一个就行）
<div id="app">
{
{ message }} //设置一个message变量，一会说啥意思
</div>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属性。
双向绑定
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{
{name}}，非常帅！！！有{
{num}}个人为他点赞。
</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 创建 vue 实例
let app = new Vue({
el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "张三",
num: 5 } });
</script>
</body>我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和 视图的关联即可（MVVM）
v-text 和 v-html
- v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染
<div id="app">
v-text:<span v-text="hello"></span> <br />
v-html:<span v-html="hello"></span> </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
hello: "<h1>大家好</h1>"
}
})
</script>效果：
v-bind
html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值； 而且在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。
1) 使用v-bind绑定class
<div class="static" v-bind:class="{ active: isActive, 'text-danger' : hasError }"> </div>
<script>
let vm = new Vue({
el: "#app",
data:
{
isActive: true,
hasError: false
}
})
</script>2) 使用v-bind绑定style
<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz e + 'px' }"></div> <script>
let vm = new Vue({
el: "#app",
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>3) v-bind的缩写
可以使用：进行v-bind的缩写。
<div id="app" :style="{ color: activeColor, fontSize: fontSize + 'px' }"
:user="userName">
</div>v-model
v-text、v-html、v-bind这些指令是单向的绑定，数据影响了视图渲染，但是反过来就不行。而v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue 中的自定义组件）
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br />
<input type="checkbox" v-model="language" value="PHP" />PHP<br />
<input type="checkbox" v-model="language" value="Swift" />Swift<br />
<h1>你选择了：{
{language.join(',')}} </h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
language: []
}
})
</script>通过上述的代码就可以实现一个简单的v-model的效果。
多个`CheckBox`对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是 boolean 类型。radio 对应的值是 input 的 value 值。text` 和`textarea` 默认对应的 model 是字符串。`select`单选对应字符串，多选对应也是数组。
v-on
随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
v-on 指令用于给页面元素绑定事件。 语法： v-on:事件名="js 片段或函数名"
<div id="app">
<!--事件中直接写 js 片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
<button v-on:click="decrement">取消</button>
<h1>有{
{num}}个赞</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
num: 100
},
methods: {
decrement() {
this.num--; //要使用 data 中的属性，必须 this.属性名
}
}
})
</script>另外，事件绑定可以简写，例如`v-on:click='add'`可以简写为`@click='add'`
v-for
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。
语法：v-for="item in items"
-
items ：要遍历的数组，需要在 vue 的 data 中定义好。
-
item ：迭代得到的当前正在遍历的元素
<div id="app"> <ul> <li v-for="user in users"> { {user.name}} - { {user.gender}} - { {user.age}} </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> let app = new Vue({ el: "#app", data: { users: [ { name: '柳岩', gender: '女', age: 21 }, { name: '张三', gender: '男', age: 18 }, { name: '范冰冰', gender: '女', age: 24 }, { name: '刘亦菲', gender: '女', age: 18 }, { name: '古力娜扎', gender: '女', age: 25 } ] }, }) </script>通过上述的代码便可实现对数组中各个元素的遍历，并将其渲染出来。
v-if 和 v-show
<div id="app">
<button v-on:click="show = !show">点我呀</button>
<br>
<h1 v-if="show">
看到我啦？！
</h1>
<h1 v-show="show">
看到我啦？！show
</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true
}
})
</script>v-if 和 v-show的区别：v-if 是“真正”的条件渲染，而v-if 是惰性的：直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
四、结束
本文主要是对Vue的一些基础知识，以及常见指令的介绍。如果想更加深入的学习Vue可以查看官网的教程：简介 | Vue.js