本文共 5917 字，大约阅读时间需要 19 分钟。
Vue
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
Vue的基本认识
大家只要进入到Vue官网，就会知道一个信息：
何为渐进式？Vue的库分为核心库以及相关的插件，核心库比较小，能实现一些基本的功能。显然做项目时，只有核心库肯定不够，需要时就要用其他相关的插件。 所以渐进式就是：我们先只用核心库，当我们需要用到某些特定的功能时，我们就添加我们所需要的这些插件。 Vue的作用：动态构建用户界面。即将后台的数据，在前台的界面上动态渲染显示出来。
与其它前端 JS 框架的关联
Vue的特点简介
Vue扩展插件简介
Vue的基本使用 ※
这里用的Vue版本是2.x版本，目前大部分情况用的也是2.x版本。
如何下载：
（在这里需要说的是，Vue的中文官网也是配有教程讲解的，如果遇到什么问题查阅官方文档很方便）
Vue.js存放的目录：
在这里，如果之前学了AngularJS，那么对这里的理解就很方便了，而且语法也十分相近，比如，在Angular中，用的是ng-model，这里用的就是v-model。同时可以用{ {}}来获取属性。 数据绑定： 数据从一个位置自动流向另一个位置。
View–>Model Model–>View单向数据绑定： 只支持一个方向。
双向数据绑定：数据可以从View(视图层)流向Model(模型)，也可以从Model流向View。
和Angular中一样，v-model是双向数据绑定, 而{ {}}是单向数据绑定。如果有需要，可以去我之前的AngularJS博文简单的看一看数据绑定部分，因为很好理解且是很简单的语法。
test.html
01_HelloWorld hello {
{msg}}
MVVM：
model：模型，数据对象（data） view：视图，模板页面 viewModel：视图模型（Vue的实例）在代码中的体现：
模板语法 ※
02_模板语法
计算属性和监视 ※
03_计算属性和监视 姓: 名: 姓名1(单向): 姓名2(单向): 姓名3(双向):{
{fullName1}}{
{fullName1}}
class与style的绑定 ※
04_class与style绑定 1. class绑定: :class='xxx'
xxx是字符串
xxx是对象
xxx是数组
2. style绑定
:style="{ color: activeColor, fontSize: fontSize }"
条件渲染 ※
05_条件渲染 成功
失败
成功
失败
列表渲染 ※
06_列表渲染 测试: v-for 遍历数组
- { {index}}--{ {p.name}}--{ {p.age}} -- --
测试: v-for 遍历对象
- { {key}}={ {item}}
- { {key}}={ {item}}
列表的搜索和排序 ※
06_列表渲染_过滤与排序
- { {index}}--{ {p.name}}--{ {p.age}}
事件处理 ※
07_事件处理
表单输入绑定 ※
08_表单输入绑定
生命周期 ※
根据图示，我们可以看到Vue生命周期的几个阶段。首先，当建立了一个Vue实例后，马上就会调用beforeCreate，之后Vue做一些准备工作：监视属性值的变化用来实现数据绑定以及初始化事件。之后调用created。
接着就进行判断，就是判断我们用的el有没有设置。当我们设置了，也就指定了Vue会为谁服务，假如我们不设置，也可以通过手动设置（显然，我们没必要手动设置，使用el很简单）。然后判断是否设置了template，像我们之前没有设置过，那它就会以el指定的区域作为模板，来进行解析。在这里有一个概念叫批量处理。即在解析的时候并不是在页面上直接进行解析，而是先在内存中对所有内容进行解析处理（批量处理），编译好之后再一次性全部送回到页面。而送回之前就是beforeMount，送回之后就是mounted。 到这里为止是生命周期的第一个阶段，初始化显示。
生命周期的第二个阶段：更新。在数据发生改变之前就是beforeUpdate,更新后就是updated。
生命周期的第三个阶段：销毁 / 死亡。当调用到了vm.$destroy()就意味着要开始进行销毁了。通常使用beforeDestroy来做一些销毁前的工作，比如清除定时器。在Vue里销毁会把组件移除掉，页面中也许还会有显示，但是会失去绑定，失去交互。销毁后就是destroyed。
09_Vue实例_生命周期 hello
09_Vue实例_生命周期 hello
阶段输出示意图：（当点击了按钮才会触发销毁，否则肯定会更新无数次）
过渡&动画 ※
对于Vue里的过渡和动画，实际上操作的就是css的trasition或animation。
当我们想使用的时候，我们需要在在目标元素外包裹<transition name="xxx"> （注意：这个name可以为任何值）。 先看一个简例，完整代码在下面。 hello
在这里想实现的效果就是hello的消失与出现。简单来看，这段代码貌似没有什么办法可以触发过渡和动画效果，实际上Vue帮我们做了一个事：给目标元素添加/移除特定的class。比如它的效果应该是这样的：<p v-show="show" class="xxx-enter">
就像下图中展示的过程，在这里就以出现和消失举例，其他效果也是同理的。
当最开始的时候，元素是隐藏的状态，即Opacity:0，它会给元素加一个类名： xxx-enter，也就是通过xxx-enter来指定了元素隐藏时候的样式。元素要出现时（出现的过程），就会给它加xxx-enter-active的类名，过渡/动画 效果结束的时候，就会给它加xxx-enter-to的类名。 对于消失部分也是同样的，在要消失前是xxx-leave，消失的过程是
xxx-leave-active，消失后就是xxx-leave-to，同时通过xxx-leave-to来指定了元素隐藏时候的样式。 （当然 过渡/动画 效果不仅限于出现和消失，也会有其他效果，在这里以出现和消失举例，并不意味着这种方法只能实现出现和消失或者必须实现出现和消失）
所以通过整个过程的分析，也就不难看出，对于该元素来将：
xxx-enter和xxx-leave-to，都用来指定隐藏时的样式，只不过一个是出现前，一个是出现后，通常一起实现。 xxx-enter-active和xxx-leave-active，分别用来记录出现的过程和消失的过程，即用它们来指定过渡效果。 在这里需要注意的是，xxx-enter-to和xxx-leave只代表着 过渡/动画 效果结束时和元素准备实现动画效果这两个瞬间，即这两个类名不会长时间存在。所以通常也不实现它们。
xxx-enter-to加一些css样式就会在 过渡/动画 效果实现后触发，只要不触发leave操作，这个类名就可以长时间存在。但是只要尝试后就会发现，确实是不行。） 
10_过渡&动画1 hello
hello
10_过渡&动画2 Lorem
过滤器 ※
对于具体moment.js的使用，大家可以去moment查看官方文档查看，这里就展示一下格式：
11_过滤器 显示格式化的日期时间
{
{time}}最完整的: {
{time | dateString}}年月日: {
{time | dateString('YYYY-MM-DD')}}
指令 ※
12_指令_内置指令 {
{content}}abcd
在这里需要说一下v-cloak：其实这些指令有一种特性就是：就是在页面被解析后，这些指令就消失了，如下图所示。而v-cloak正是用了这样的特性，在没被解析之前，因为这个指令的存在，设置了css样式display:none，所以指定的标签就不会出现，当页面被解析后，因为指令的消失从而让标签内容出现。
为什么需要这么用？当你去掉v-cloak后，如果你第一次进网页（网页还没被解析时），你会看到它的表达式形式，即：{ {content}}。正常看大家可能看不出效果，可以在新建Vue对象前，加一个alert，看一下效果。也就是说，为了避免这种情况，我们就可以使用v-cloak 
自定义指令 ※
显然，Vue提供的指令可能不能满足所有需求，所以自定义指令的存在就格外重要了。
12_指令_自定义指令
做一个简单插件
以后当我们想用其他人的插件的时候，就也需要用Vue.use()
17_插件
vue-myPlugin.js
(function (window) { const MyPlugin = { } MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的myGlobalMethod()') } // 2. 添加全局资源 Vue.directive('my-directive',function (el, binding) { el.textContent = 'my-directive----'+binding.value }) // 3. 添加实例方法 Vue.prototype.$myMethod = function () { console.log('vm $myMethod()') } } window.MyPlugin = MyPlugin})(window) 转载地址：http://ulyki.baihongyu.com/