vue控制div显示隐藏菜鸟
可以使用Vue的v-show指令来控制div显示隐藏：div v-show="showOrHide"要显示或隐藏的内容/div。然后在Vue中定义一个变量，比如：data(){return { showOrHide: true }},根据你的需要来改变变量的值true或false来实现div的显示和隐藏操作。
Vue.js入门教程（三）双向绑定和数据渲染
既然清楚了原理，那么，接下来进入正题——我知道了vue怎么安装，那么我怎么使用呢？
在告诉你基础用法之前，我还是要先告诉你一个情况。
可能要令你有点失望。vue主要是侧重于数据端的。他的目的就是渲染数据和在前端调整一下数据逻辑。
他不是像jquery那样让你用来做特技的。就算你要做特技。你也应该通过css3/canvas而不是dom。
所谓的双向绑定，你可以理解就是把view。（你还不清楚mvc的话，请看第一章）
和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。
vue是通过解析{{文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。
列表输出使用 v-for，这些v开头加横杠的叫做命令
这些命令是可以自定义的。但是那都属于高级操作，我们不用它也完全足够支撑做一个大型项目了。
其实你回发现，这里无论是v-for或者是v-什么其他玩意
它都深刻的遵循了es6的语法。这里不就是一个典型的for in 循环吗。不过我们现在都用for of了。
你记住这个用法，它就长这样。
前后端分离开发的关键在于：后台只提供接口。
我们获得的数据多数情况下，仅仅是一个json，而mvvm的关键就再于解析数据在前端完成了。如果你了解jsp或者php你会了解，数据的解析在mvc中，
是由后端完成的，而html只负责显示。
所以，当你了解了数据绑定和渲染以后，你可以第一时间先把数据输出到页面了。
我们前端最厉害的地方不就是处理能看得见的东西吗？
Vue.js 入门
BootCDN（国内）
unpkg
cdnjs
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
进入项目，安装并运行：
打开localhost：8080
vue实例：
选项API：
组件化应用构建
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
指令邦定
指令
指令 (Directives) 是带有 v- 前缀的特殊属性
v-bind：
v-on：
v-if
v-for：
v-model：
数据，方法，计算属性，侦听器
生命周期
组件
全局注册
局部注册
组件组合
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。
prop 向下传递，事件向上传递
子组件要显式地用 props 选项 声明它预期的数据：
动态邦定prop
单项数据流
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
自定义事件
每个 Vue 实例都实现了 事件接口 ，即：
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
这里有一个如何使用载荷 (payload) 数据的示例：
官方支持的 vue-router 库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
零基础怎么学前端？要学哪些内容？
首先要学习前端页面重构。包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局等等，打好前端开发的基础。
然后要学JavaScript高级程序设计、PC端全栈开发的知识。包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。
前面的知识都掌握了，就可以学框架、混合开发了。包括Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架等等。学习前端一定要有清晰的学习路线，掌握有效率的学习方法。
Vue.js入门教程（十五）：如何创建自己的插件
通常，我们不会去接触vue底层的东西，又或者我们突发奇想需要自己创造一套框架。可回头看看我们使用最多的，其实还是插件。
插件，你也可以理解为就是一套方法的集合，当我们需要调用它的时候，引入一下就行了。
举个例子，比如说，swiper和elementui。
一般来说，我们每个项目都会安装一大堆的插件。用于处理各种交互效果和逻辑，但是，网上能搜到了插件不一定能解决我们所有的问题。也就是说，我们剩下30%左右的逻辑部分是需要自己处理的，比如说，转化时间，处理字符串等等。
这些东西网上是没有现成插件的，需要我们自己来写。此时，如果你每一个组件里面都去定义方法就显得太low了。
我们需要自己写一个插件，事半功倍！
一般来说，我们自己的js通常会写成下面的两种形式：
第一种，声明多个方法。这个做法也叫函数声明，这样做的好处是，声明到全局，你只要引用了它，在页面任意地方都可以使用。但是同样的缺点也很明显，容易引起全局污染，浪费浏览器资源。而且当我方法多的时候，调用起来很不方便。
第二种，这是我们最长使用的声明方式，函数表达式。目的就是加载了这个js以后，当我需要使用的时候，直接调用str.xxx()，就可以返回我需要的内容了。并且，方法封装在变量内部，不会引起全局污染，也符合模块化的规则。
ok，ok。我们接下来，就要把我们自己的方法定义到vue上去使用。
我首先把js放到了项目文件夹中，然后在main.js中引入。
调用起来是完全没有问题的。
但是，又好像哪里不太对？是的，这样我们仅仅是引入了一个js，并没有把它形成一个js的插件。
我们来看看一个标准的js插件的调用形式：
为什么他这个可以直接从this上面调用？？？
个人理解他的方法应该是被定义到全局的vue对象上面了，这里的this应该指的就是vue本身！
如果你看过龙哥前面的教程，你应该知道，当我们引入的插件，是一个对象的时候，应该使用：
use方法，可以把一个符合vue标准的对象加载到vue本体上。
首先给我们的main.js下面增加一行。
然后打开我们自己的js文件，按照下面的方式书写：
最后在页面中调用的时候：
到此我们的插件已经跟vue融为一体！其实插件本身还支持更多参数和写法，请各位同学自行研究吧！
Vue.JS入门篇--列表渲染
查看一下效果，应该很容易得到结果
有时我们可能需要重复一个包含多个节点的块，这时可以用 template 标签包裹这个块。这里的 template 标签只起到语义上的包裹作用，其本身不会被渲染出来。例如：
简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组，你可用 $value 直接访问值:
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:
Vue.js 内部对被观察数组的变异方法 (mutating methods，包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截，因此调用这些方法也将自动触发视图更新。
下面是一个演示的例子，点击按钮的时候数据项会被移除
Vue.js 给被观察数组添加了两个便捷方法：$set() 和 $remove() 。
你应该避免直接通过索引来设置数据绑定数组中的元素，比如 demo.items[0] = {}，因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:
$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时，$remove() 将在数组中搜索该值并删除第一个发现的对应元素。
当你使用非变异方法，比如filter(), concat() 或 slice()，返回的数组将是一个不同的实例。在此情况下，你可以用新数组替换旧的数组:
你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心，Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例， 并尽可能地进行有效复用。
在某些情况下，你可能需要以全新的对象（比如 API 调用所返回的对象）去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性，那么你可以使用 track-by 特性参数给 Vue.js 一个提示，这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如：你的数据是这个样子的
那么你可以像这样给出提示:
在替换 items 数组时，Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象，它就会知道可以直接复用有同样 _uid 的已有实例。 在使用全新数据重新渲染大型 v-repeat 列表时，合理使用 track-by 能极大地提升性能。
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值，你也可以象访问数组中的简单值那样使用 $value 属性。
在 ECMAScript 5 中，对于给对象添加一个新属性，或是从对象中删除一个属性时，没有机制可以检测到这两种情况。针对这个问题，Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回，所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。
v-repeat 也可以接受一个整数。在这种情况下，它将重复显示一个模板多次。 下面的例子将迭代3次。
有时候我们只需要显示一个数组的过滤或排序过的版本，而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求： filterBy 和 orderBy。