本章学习vue，东西很多，我也不知道我能不能讲明白，我刚开始一直就没搞明白是咋回事，到了后面才感觉渐渐入门，入门后你就会发现Vue真的好用。这两天要达到的是能够自己通过vue完成一些基本的网页动态就行。官网的文档写的明明白白，入门之后就可以靠读官方文档来进行后面的学习。
Vue和jQuery是同一种东西，都是大佬们对JavaScript进行优秀的操作，操作过后我们这种萌新就拿来这些大佬的优秀操作进行使用，方便我们更加简单的去编写JavaScript。但是Vue和jQuery完全是两种不同思想的方法。
一、认识Vue
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。他认为，未来App的趋势是轻量化和细化，能解决问题的应用就是好应用。而在移动互联网时代大的背景下，个人开发者的机遇在门槛低，成本低，跨设备和多平台四个方面。
上面是百度的，大概意思和jQuery一样，方便前端工作者，值得一提的是这个大佬是中国人，现在加盟阿里巴巴Weex团队。
二、如何使用Vue
要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。
官网提供了Vue.js源码下载的地方：（https://github.com/vuejs/vue/releases）
同样可以不使用本地包，可以直接引用网上资源（https://cdn.jsdelivr.net/vue/2.1.3/vue.js）
我们学习Vue主要学习10几种常用指令，和一些方法。
三、数据驱动视图
我们在使用jQuery时，还是按照文档树进行操作，先是用选择器从从文档树上选择标签，然后进行修改，而Vue提供了一种完全不同的操作。
引入之后，我们就可以把它用起来。它最牛逼的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。
如上图所示viewmode充当着监控者的角色，加入他监控到了mode数据发生变化，便会通知view试图进行更新，这个过程并不需要你参与其中。
假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。
现在，在Vue.js中，你需要这样做：
我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app'或者类名)，表明这个实例是关联指定的DOM节点。
el：一个对象就是想要对这个id或者类的标签里的所有元素进行修改
在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的meassage属性的值“python全栈日记”就会被渲染到页面中，替换{{ meassage }} 显示效果为：“python全栈日记”。
其实vue充当一个中介的角色，我们在vue中设置参数，对参数进行修改，然后vue帮我们完成一系列复杂的内容，然后把结果直接给我们。
四、双向绑定
更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。
例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。
这里我们学习第一个指令v-model
这是一个最重要最常用的指令，一般用在表单输入，它帮助我们轻易地实现表单控件和数据的双向绑定，不需要手动更新DOM，
只要给input控件添加 v-model 指令，并指定关联的数据message，我们就可以轻松把把用户输入的内容绑定在message上，然后再通过{{message}}实时显示出来，当然还可以做很多事，不光是显示出来，后面你会看到的
五、组件
上面的我们演示了Vu.jse的数据驱动， Vue.js还有一个重要的核心，就是：组件化。
组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。就是重复的东西用一个函数进行封装，用的时候直接调用。
例子：假设，页面上有多个一样的卡片：
我们平时做这样3个盒子，就需要把html中的代码写三遍，但是使用vue我们可以把一模一样的进行封装，然后需要几个调用几次。
我们用Vue.component(tagName, options)注册了一个名字叫card的组件，必须使用template：后面的内容可以直接复制粘贴html重复的其中一个，他会自动添加换行和字符拼接号（+）的。
这样，在需要复用这个组件的地方，我们只需要使用<card></card>就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。
六、filters过滤器
过滤器filters选项。正如它的名字，通过我们自定义一些内容来对我们的数据进行过滤，留下需要的，扔了没用的。举个例子，假设我们有一组数字，都是小数，如下：
num1，num2，num3都是Vue实例vm的小数，我们把它展示在视图上：
利用双大括号{{ }}渲染出来（红色框是因为我加了css）
这时候我不想显示小数，我想展示整数，这就需要Vue的filters过滤器了，
其实是在filters中定义了一个名字为toInt，参数为a的函数，函数功能是返回转为整型后的a，既然是函数，那肯定需要去调用，
这里需要用到管道符（ | ）（shift加‘顿号’），管道符左边命令的输出就会作为管道符右边命令的输入，也就是把管道符左边的传入右边，这是linux的东西，下个阶段会学的。
在标签中把数字传入过滤器函数，得到结果：
同理我们可以在过滤器中设置多个函数，例如显示小数点后2位
我们做个案例练习，有一个url为：
我们需要获取用户信息（？后的）如何用过滤器去做?
七、computed计算属性
有时候，我们拿到一些数据，需要经过处理计算后得到的结果，才是我们要展示的内容。
例如上面那个例子的三个数，我现在需要展示的是三个数字之和。这种情况，就适合用我们的计算属性computed。
计算属性computed的定义语法和过滤器filters类似：
计算属性computed用法更简洁，仅需{{ sum }}就能读取到它的计算结果。
八、methods 方法
在methods中，我们可以定义一些方法，供组件使用。
比如，我们定义一个数据a，当用户点击按钮的时候，a的值加1。这种情况，我们可以利用methods来实现。
其实和过滤器、计算属性是一个意思，只是那两个更具体是干啥的，而methods就是你想些啥功能都是ok的包括过滤器和计算属性的功能。
先练习个简单的，
学第二个指令v-on: （缩写为@，例如鼠标点击事件，v-on:click或者@click）专门用来使用鼠标点击事件的，你看那个开头的on就应该反应过来是onclick、onmousedown等等等一系列。
鼠标点击按钮后变文字。
写一个输入框，当输入一个数后，显示这个数是不是素数（质数）。
我们要想直到文本框输入的是啥，就需要用的我们的第一个指令v-model
我们之前学JavaScript和jQuery都是先学习，文本修改，属性修改，样式修改，Vue也不例外。
九、文本指令（v-text，v-html）
你一看这两名字应该就直到这是干啥的了肯定是和innertext和innerhtml一个功能
1、v-text 指令·
v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。
2、v-html 指令
它帮助我们绑定一些包含html代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符串包含了<b>标签，要想<b>不被当作普通的字符串渲染出来，就得用 v-html 指令。
看一个例子你就懂了
十、属性指令
绑定属性v-bind：（简写：）
有时候，html标签的属性需要修改，比如：<a>标签的href属性，<img/>标签的src属性等。Vue中如何将data中的数据绑定为这些属性的值呢？还是用双大括号{{ }}的写法吗？
当然不是，这里不需要用双大括号{{ }}，我们用v-bind指令，如下：
效果：
再控制台中我们可以发现，所有属性都已经绑定在html中。
十一，样式修改
对于修改css的标签样式，我们还是使用v-bind：，通过v-bind：来绑定clsaa属性，通过对class增加或者减少来实现对样式的修改。
再class中css属性如果是false就是不使用该样式，如果为true，就是使用css中的这个类样式。
如下案例：点击图片隐藏文字边框
Css：
Vue：
效果：
十二、练习：点击按钮隐藏图片边框，再次点击显示边框，并使按钮文字在隐藏和显示之间切换。
这个是对第十一节案例的扩展，当我们点击隐藏按钮后isborder属性变为false，这里其实可以加一个判断，如果是false变为true，如果是true变为false，这样就能实现按钮点击，当然我们写的时候有更加简洁的语句表达。
Css：border样式留着切换用
Vue：
这里有个方法一定要记住
this.isys = !this.isys，这个在点击按钮重复操作经常使用这种逻辑的。
效果：
十二、v-show 指令
v-show ，听这名字就可以猜测它跟元素的显示/隐藏，它就是用来控制元素的display css属性的。
v-show 指令的取值为true/false，分别对应着显示/隐藏。
我们继续扩充上面的例子，点隐藏图片也进行隐藏，点显示图片显示。
先去思考，我们要想让图片隐藏就得在图片里添加v-show：false
但是这样，是静态的，无法随着按钮变化，我们必须让v-show的值在false和true中随着按钮来回切换，回忆一下上面的案例，哪个变量是会在true和false来回切换？
对吧，是isys这个变量，所以我们让v-show=‘isys’，这样v-show就实现了false和true的来回切换。所以我么你只需要在上面的案例中加入一条v-show指令就可以实现图片隐藏和显示。
效果：
十三、v-for指令
一看见for我就知道绝对和循环有关系
如果在正常的html中wo们要输出一串名字是这样的
我们能看出来li是重复的，但是里面名字不同，所以名字就是一个变量
这时候，我们把data中的存放的简单的数字或者字符串改为数组Array类型，这个时候，我们要把数组的元素展示在视图上，就需要用到vue提供的 v-for 指令，来实现列表的渲染。
v-for有两个参数：索引index和元素item
效果：
我们同样可以这样对字典进行v-for：这时候index就算不是索引了，而是key的值，item为value的值。
十四、vue实现选项卡
还记得我们在学JavaScript时实现了选项卡，现在用vue实现一下。
原理是有四个大的选项卡叠在一起，第一个按钮第一个选项卡显示，其他的隐藏，以此类推，所以我们会用到v-show，鼠标触发效果，而且当前选项卡是深色所以还要用到v-on：和v-bind：class
静态这个我相信大家都看到这了应该都会写
Css：
vue通常是和我们的html绑定的
我说一下思路：
我们设置一个变量flag，当鼠标放在第一个标签时，flag等于0。
当flag=0时，我们让第一个选项卡显示，其他的隐藏，而v-show的值只有true和fasle。
所以当flag=0时，第一个选项卡v-show为true，其他的为false。
同理，我们在css中有个样式为on，控制被选中选项卡颜色，而:class={'on':?},?同样也只有true和false两个值。
所以当flag=0时，第一个选项卡？为true，其他的为false。
思路就是这样，代码实现很简单。
效果：
十五、v-if、v-else指令
1、v-if指令
v-if 指令的取值也是为true或false，它控制元素是否需要被渲染出来，我们拿两个元素设置不用的值，对比一下看效果就知道了。
设置为true的<p>标签，成功渲染出来，而设置为false的<p>标签，并没有被解析渲染出来。
那v-show 和 v-if 都能控制元素显示或者隐藏，这两个怎么区别使用呢？
如果需要频繁切换显示/隐藏的，就用 v-show ；如果运行后不太可能切换显示/隐藏的，就用 v-if 。
2、v-else指令
if和else在编程语言一般都是结对出现的，在vue里面也不例外。它没有对应的值，但是要求前一个兄弟节点必须要使用 v-if 指令。
只有第二个<p>标签被渲染出来，第一个<p>标签由于 v-if 指令的值为false，直接被忽视了，不渲染。
同理，一旦第一个标签的 v-if 指令的值为true，被忽视的就是第二个<p>标签了。 v-if 和 v-else 只有一个会被渲染出来。
有兴趣的同学，可以继续去了解一下 v-else-if 指令，同样很简单。
十六、总结
今天一共学的指令：
v-text v-html ：文本
v-bind: ：属性修改
v-on:click ：鼠标键盘事件
v-model ：获取值，双向绑定
v-if v-else：判断
v-show ：隐藏显示
v-for ：循环
