Vue.js入门级教程、十大指令、

一，vue是什么，和其他前端框架有什么区别，优势在哪里

摘自官网：Vue.js（读音 /vjuː/，类似于view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue主要是用来做什么的，相比于其他框架有什么优势？

近几年来得益于手机设备的普及和性能的提升，移动端的web需求大量增加产生了一种叫webApp的东西，他们的功能越来越复杂，交互效果也越来越酷炫，几乎接近原生的APP，也就是移动端的网页应用，比如：知乎，饿了么，汽车之家，百度外卖等等。相信他们强大的功能大家一定是体验过的。

如果我们在PC端，切换视图我们要请求数据进行跳转可能需要等待3-5秒甚至更长，在这个浪费时间就等于浪费生命的年代、相信很多人都不想等吧。这个时候我们就需要一个MVVM框架来解决这些问题

那么问题来了，首先我们要了解什么MVVM框架

MVVM可以拆分为View--viewModel----Model 三部分

本文实例请跳转：https://zhuanlan.zhihu.com/p/27773500

View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码，比如Mustache，比如jstl类似的模板伪代码

ViewModel层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModel里面了负责监控两边的数据

Model就更简单了，就是对于纯数据的处理，比如增删改查

这就是MVVM框架（至于还有MVC/MVP大家可以自行查阅其中的区别），属于MVVM的JS框架除了JS还有React.js/Angular.js.这里我们不去分析这三个框架哪个更好，关于技术选型，每个开发团队的情况都不一样，我们找工作时会用一个框架基本就够了。

现在我们开始正式进入Vue.js部分

二、Vue的核心

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

这句话有两个关键词：

1.响应式的数据绑定

通俗的讲比如我们之前做过的静态页面什么都是写死的都是不动的，传统的做法你得手动改变DOM来改变我们的视图，Vue.js只需要列好框架改变数据就可以自动更新，再也不用你去操心DOM的更新了而通过我们的vue绑定，不需要你再去操作DOM，

2.组合的视图组件

把整个页面我们可以拆分成一个个小的区块，而每个区块我们可以看成一个个组件，上节中我们所提到的webApp都是由多个组件拼接或者嵌套组成，看下图；

具体在开发当中我们怎样实现一个组件，到底哪些区块我们可以划分一个组件，后面我们再一一介绍，你只需要知道，在Vue.js中页面是由多个组件组成即可。而这些功能模块的组件我们可以重复使用，可以单独拿出来做更改、替换。

好了，在进入Vue之前我们还是先了解一下使用Vue的面向对象的三种创建方式吧

类和对象是 面向编程中最重要的两个概念，一定要理清

类 : 是一个抽象概念(不是实际存在),(属性,行为)

对象 : 是实际存在的，是对象的实例化，看过几个例子你就会明白。

在ES6之前：1、内置的构造函数；2、自定义的构造函数；3、字面量

1、

2、

3、

学完了这三种创建方式之后我们就可以正式进入vue部分，通过几个代码我们初步了解一下

三、创建Vue实例

首先要确保你的项目引入了Vue.js，需要用他的框架就必须要引用！

创建一个vue实例非常简单

<div id= "app">{{name}}<div>

new Vue({

el : '#app',

data : {

name : '王宝强'

} })

data相当于一个储存器，储存了我们的数据之后然后以{{ }}的方式把结果渲染都页面，储存之前我们首先要绑定你相对应的HTML，el ：“”的形式绑定

我们来看下一个例子

打印结果：20

想必大家也能看出来{{ }}是可以进行一些简单的表达式的，复杂的就不要这样写了容易造成逻辑混乱、复杂的表达式后面再说。

现在我们知道了{{ }}内可以用来绑定属性、绑定JS的表达式，那能不能绑定标签呢，那我们来试一下。 <div id = "app">{{name}}<div>

打印结果<span>王宝强</span>

连标签一同渲染出来，这显然不是我们想要的结果。那怎么样能够去掉这些标签的，前面说过Vue主要是由2大块组成：指令、组件

下面我们就开始学习Vue.js的指令，他们是如何绑定的，会有什么样的效果

1、v-html 如上面这个例子

我们只需要在div里加入v-html或者v-text 把刚才{{name}}写在这个div里就可以了，大家可以试一下。v-html用来绑定带有标签的可以，v-text,绑定文本

<div v-html= "name"><div>

打印结果：王宝强

当你看控制台的时候你会发现在div下面多了一个span标签包裹着王宝强。想想如果要用DOM操作的话你要怎么添加，这样是不是很方便。

2、v-model 一般用在表达输入，很轻松的实现表单控件和数据的双向绑定。

这样就实现了一个双向绑定的效果

这个以后经常会用到

3、v-show.听着名字就可以猜出他跟元素的显示和隐藏有关系,v-show指令取值为true/false，分别对应着显示/隐藏，下面、看例子

大家可以看一下，当see的值为false的时候是看不见p标签里的内容的，控制台里p标签默认添加了样式为display ： none。给隐藏掉了，当我们把false改为true的时候，就可以看见了。

4、v-if 大家是不是想起了JS里的if else，没错vue里也有v- if、v-else，下面看例子

通过点击事件点击按钮来变换颜色

这里用了三个指令，v-if,v-else,v-on:click和一个methods方法。这个方面后面再讲，下面我们来单独了解一些这三个指令

v-if ：大家会发现当我把f2改为false的时候，看不见内容了，再看控制台，第二个p标签被注释掉了，大家回想一下v-show这个例子，当时控制台显示的是display这就是这两个指令的区别。记住一点：如果需要频繁切换显示/隐藏的，就用v-show，如果运行后不太可能切换的就用v-if。

v-if指令

5.v-else指令，在编程语言里if 和else一般都是成对出现的,vue也不例外，v-else没有绝对的值，但是要求前面一个兄弟节点必须要使用v-if指令，记住，没有if就没有else。

6.v-on : click 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数这里就不再做演示

7.v-once，由于p标签有了初始值，第一次渲染时Input 和p都有内容，我们给p加了v-once之后，我们再更新mg的值时，p标签不会发生改变

once顾名思义，一次，也可以加给点击事件，默认只能点击一次

8.v-bind: 可以直接简写为 ： 这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。以后这个指令大家会经常用到

a标签的href的值成功渲染

9.v-for 有时候我们data里存放的数据不只是简单的数字或者字符串，而是数组类型或者对象，这个时候我们就要把数组的值展现到视图上，来看栗子

这里用了for in 学过JS应该不会陌生

（1）数组写法：是不是觉得和for循环挺像的，没错，原本js也一个for循环需要很多代码，这样是不是特别简单明了，原本一个li现在变成了三个

（2）对象写法 ： 我这样写是为了说明v-for不仅只可以获取值还可以获取下标，属性，

对象要用JSON色写法。v-if和v-for一起使用时v-for具有更高的优先级

到这里十大指令已经全部学完了，当然这些看着是非常简单，需要我们牢牢掌握。把他们转化到实际运用当中去。 今天先写到这下期更新