From 0caa6890ed2c3e51c65998ceb4e0c77a04ced8b6 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 17 Jun 2018 16:44:13 +0800 Subject: [PATCH] =?UTF-8?q?add=20Vue=202.x:=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 20-前端综合/2018年Web前端自学路线.md | 26 +- 21-Vue基础/01-01.Vue的系统指令.md | 10 +- 21-Vue基础/01-03.Vue的系统指令(二).md | 6 +- .../01-05.自定义过滤器：时间格式化举例.md | 14 +- .../01-06.自定义按键修饰符&自定义指令.md | 6 +- 21-Vue基础/02-Vue实例的生命周期函数.md | 13 +- 21-Vue基础/04-Vue动画.md | 490 +++++++++++++++++- 21-Vue基础/其他.md | 8 - 21-Vue基础/生命周期.md | 33 -- 9 files changed, 494 insertions(+), 112 deletions(-) delete mode 100644 21-Vue基础/其他.md delete mode 100644 21-Vue基础/生命周期.md diff --git a/20-前端综合/2018年Web前端自学路线.md b/20-前端综合/2018年Web前端自学路线.md index 6c783b9..bcfed60 100644 --- a/20-前端综合/2018年Web前端自学路线.md +++ b/20-前端综合/2018年Web前端自学路线.md @@ -11,7 +11,7 @@ > 新手入门前端，需要学习的**基础内容**有很多，如下。 一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。 - + 二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。 三、jQuery、Ajax等。 @@ -68,32 +68,8 @@ PS：上面这三个链接，指向的的是同一个学习资源。 PS：上面这两个链接，指向的的是同一个学习资源。 - 尚硅谷的视频里，讲JS语法和ES6的部分很不错。 -### Vue相关 - -**1、传智黑马 | 2018年Vue.js深入浅出教程**： - - -我在网上找了很多 Vue2.0 入门的视频，但是一直没有找到满意的。但这套视频还不错，可惜官方一直都只公布了一小部分。终于在2018-05-03的时候，更新了11天的全部视频，真实太激动了。 - -上面这个视频资源，相关链接如下： - - -- 在线视频链接： - -- 视频资源： - -- 源码和笔记： 密码：8v9c - - - - - - - - ## 推荐的技术博客 diff --git a/21-Vue基础/01-01.Vue的系统指令.md b/21-Vue基础/01-01.Vue的系统指令.md index 5d7ef04..c4d1448 100644 --- a/21-Vue基础/01-01.Vue的系统指令.md +++ b/21-Vue基础/01-01.Vue的系统指令.md @@ -24,7 +24,6 @@ - ## Vue初体验 新建一个空的项目，引入vue.js文件。写如下代码： @@ -138,7 +137,8 @@ Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在 运行结果： -20180506_2240.png + +![](http://img.smyhvae.com/20180506_2240.png) ## v-cloak @@ -255,7 +255,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： 上方代码的演示结果： -20180506_2320.png +![](http://img.smyhvae.com/20180506_2320.png) 其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。 @@ -304,7 +304,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如： 运行结果： -20180506_2330.png +![](http://img.smyhvae.com/20180506_2330.png) ## v-bind：属性绑定机制 @@ -612,7 +612,7 @@ v-on 提供了click 事件，也提供了一些其他的事件。 if (this.intervalId != null) return; //【注意】这个定时器的this，一定不要忘记了 //添加定时器：点击按钮后，让字符串连续滚动 - this.intervalId = setInterval(() => { + this.intervalId = setInterval(() => { // 获取 msg 的第一个字符 var start = this.msg.substring(0, 1); // 获取 后面的所有字符 diff --git a/21-Vue基础/01-03.Vue的系统指令(二).md b/21-Vue基础/01-03.Vue的系统指令(二).md index f54461e..50924b1 100644 --- a/21-Vue基础/01-03.Vue的系统指令(二).md +++ b/21-Vue基础/01-03.Vue的系统指令(二).md @@ -269,7 +269,7 @@ 演示效果如下： -20180509_1058.png +![](http://img.smyhvae.com/20180509_1058.png) ### 写法二：在数组中使用三元表达式 @@ -560,7 +560,7 @@ 效果如下： -20180509_1500.png +![](http://img.smyhvae.com/20180509_1500.png) ### 方式三：对象的遍历 @@ -619,7 +619,7 @@ 效果如下： -20180509_1505.png +![](http://img.smyhvae.com/20180509_1505.png) ### v-for中key的使用注意事项 diff --git a/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md b/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md index d9f16ca..4c826de 100644 --- a/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md +++ b/21-Vue基础/01-05.自定义过滤器：时间格式化举例.md @@ -112,7 +112,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 网页显示效果如下： -20180522_1240.png +![](http://img.smyhvae.com/20180522_1240.png) ### 给过滤器添加多个参数 @@ -169,7 +169,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 ``` -20180525_2135.png +![](http://img.smyhvae.com/20180525_2135.png) 注意代码中那行重要的注释：括号里的参数代表 function中的 arg2。 @@ -220,7 +220,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 效果如下： -20180525_2150.png +![](http://img.smyhvae.com/20180525_2150.png) **改进3：同时使用多个过滤器** @@ -277,7 +277,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 效果如下： -20180525_2200.png +![](http://img.smyhvae.com/20180525_2200.png) 上方代码中，添加了多个过滤器，实现的思路是：**将 msg 交给第一个过滤器来处理，然后将处理的结果交给第二个过滤器来处理** 。 @@ -341,7 +341,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 运行效果： -20180525_2230.png +![](http://img.smyhvae.com/20180525_2230.png) ### 举例2：时间格式化 @@ -402,7 +402,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 运行结果： -20180526_2319.png +![](http://img.smyhvae.com/20180526_2319.png) 【荐】**举例2的改进**：（字符串的padStart方法使用） @@ -467,7 +467,7 @@ Vue也提供了一个接口用来供程序员定义属于自己的特殊逻辑 运行效果如下： -20180526_2323.png +![](http://img.smyhvae.com/20180526_2323.png) `pattern`参数的解释： diff --git a/21-Vue基础/01-06.自定义按键修饰符&自定义指令.md b/21-Vue基础/01-06.自定义按键修饰符&自定义指令.md index 0825d95..097a244 100644 --- a/21-Vue基础/01-06.自定义按键修饰符&自定义指令.md +++ b/21-Vue基础/01-06.自定义按键修饰符&自定义指令.md @@ -80,7 +80,7 @@ Vue内置的按键修饰符： 代码的位置： -20180527_2340.png +![](http://img.smyhvae.com/20180527_2340.png) 但我们不建议这样做。我们可以通过Vue中的自定义指令来实现这个例子。步骤如下。 @@ -289,7 +289,7 @@ Vue内置的按键修饰符： 效果： -20180610_1323.png +![](http://img.smyhvae.com/20180610_1323.png) **自定义全局指令的简写形式**： @@ -350,7 +350,7 @@ Vue内置的按键修饰符： 效果： -20180610_1400.png +![](http://img.smyhvae.com/20180610_1400.png) 注意， el.style.fontWeight设置属性值，至少要600，否则看不到加粗的效果。 diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/21-Vue基础/02-Vue实例的生命周期函数.md index 7ab7e82..4203c61 100644 --- a/21-Vue基础/02-Vue实例的生命周期函数.md +++ b/21-Vue基础/02-Vue实例的生命周期函数.md @@ -24,11 +24,11 @@ - beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 -- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 +- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。 - beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 -- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 +- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示**真实DOM渲染完了，可以操作DOM了**） **举例**： @@ -89,7 +89,7 @@ 打印结果： -20180610_1500.png +![](http://img.smyhvae.com/20180610_1500.png) ### 运行期间的生命周期函数 @@ -97,6 +97,7 @@ - updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。 +PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。 **举例**： @@ -160,7 +161,7 @@ 当我们点击按钮后，运行效果是： -20180610_1528.png +![](http://img.smyhvae.com/20180610_1528.png) 可以看出： @@ -176,12 +177,12 @@ - destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 - +PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。 ## 生命周期函数图解 -20180610_2130.png +![](http://img.smyhvae.com/20180610_2130.png) PS：图片来自网络。 diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md index 4b1aa7a..eabbf32 100644 --- a/21-Vue基础/04-Vue动画.md +++ b/21-Vue基础/04-Vue动画.md @@ -9,11 +9,11 @@ ## 使用过渡类名实现动画 -### 官方文档的解释 +### 官方文档的截图 过渡类名如下： -20180616_1555.png +![](http://img.smyhvae.com/20180616_1555.png) 动画进入： @@ -38,7 +38,7 @@ PS：第一、第二个是时间点；第三个是时间段。 ### 使用举例（通过Vue的过渡类名来实现） -温馨提示：`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。 +`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。 现在我们来做个例子：点击按钮时，让div显示/隐藏。 @@ -150,7 +150,7 @@ PS：第一、第二个是时间点；第三个是时间段。 运行效果如下： -20180615_2200.gif +![](http://img.smyhvae.com/20180615_2200.gif) **3、再加一个tramsform属性进行位移**： @@ -159,10 +159,6 @@ PS：第一、第二个是时间点；第三个是时间段。 我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下： -效果如下： - -20180615_2205.gif - ```html @@ -225,6 +221,10 @@ PS：第一、第二个是时间点；第三个是时间段。 ``` +效果如下： + +![](http://img.smyhvae.com/20180615_2205.gif) + ### 修改过渡类名的前缀 在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用``进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。 @@ -320,7 +320,7 @@ PS：第一、第二个是时间点；第三个是时间段。 - +
这是一个H6
 @@ -344,7 +344,7 @@ PS：第一、第二个是时间点；第三个是时间段。 运行效果如下： -20180616_1513.gif +![](http://img.smyhvae.com/20180616_1513.gif) ## 使用第三方animate.css类库实现动画 @@ -402,7 +402,7 @@ animate.css网址： 注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。 -注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到

标签里，效果是一样的，如下： +注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到`

`标签里，效果是一样的，如下： ```html @@ -415,7 +415,7 @@ animate.css网址： 运行效果如下： -20180616_1538.gif +![](http://img.smyhvae.com/20180616_1538.gif) **改进1**：（统一设置入场、出场动画的持续时间） @@ -473,7 +473,7 @@ animate.css网址： 我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。 -如果要定义半场动画，做法是：直接在methods中写入场函数，不写离场动画即可。 +如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。 ### 举例：使用钩子函数模拟小球半场动画 @@ -550,7 +550,7 @@ animate.css网址： 运行效果如下： -20180616_1618.gif +![](http://img.smyhvae.com/20180616_1618.gif) 上面的代码中，有两个地方要注意： @@ -559,7 +559,7 @@ animate.css网址： `el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来： -20180616_1620.gif +![](http://img.smyhvae.com/20180616_1620.gif) 当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。 @@ -568,7 +568,7 @@ animate.css网址： `enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数： -20180616_2145.gif +![](http://img.smyhvae.com/20180616_2145.gif) Vue官方文档的解释是这样： @@ -580,11 +580,11 @@ Vue官方文档的解释是这样： ## 使用transition-group元素实现列表动画 -现在的场景是：在一个`
    `列表中，如果我想给指定的某个`li`添加动画效果，该怎么做呢？需要声明的是，这些`li`是用v-for循环进行遍历的。 +现在的场景是：在一个`
      `列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的） 如果我们用``把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。 -那该怎么做呢？这里我们就可以用到`transition-group`。 +那该怎么做呢？这里我们就可以用`transition-group`进行包裹。 **代码举例1**：点击添加按钮后，给新增的 item 加个动画 @@ -646,10 +646,8 @@ Vue官方文档的解释是这样： - - -
    • +
    • {{item.id}} --- {{item.name}}
      • @@ -686,19 +684,467 @@ Vue官方文档的解释是这样： 运行效果如下： -20180616_2240.gif +![](http://img.smyhvae.com/20180616_2240.gif) + + +**改进1**：添加删除item的功能 + +基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写： + + +```html + + + + + + + + Document + + + + + +
      + +
      + + + + + +
      + + + + + +
    • + {{item.id}} --- {{item.name}} +
      • +       + + +
      + + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180617_1555.gif) + +**改进2:**： + +上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下： + +```html + + + + + + + + Document + + + + + +
      + +
      + + + + + +
      + + + + + +
    • + {{item.id}} --- {{item.name}} +
      • +       + + +
      + + + + + +``` + +运行效果如下： + +![](http://img.smyhvae.com/20180617_1556.gif) + +### transition-group中appear和tag属性的作用 + +我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。 + +```html + + + + + + + + Document + + + + + +
      + +
      + + + + + +
      + +
        + + + + + +
      • + {{item.id}} --- {{item.name}} +
        • +         +
      + +
      + + + + + +``` + +![](http://img.smyhvae.com/20180617_1600.gif) + +**改进**：`transition-group`的`tag`属性 + +上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层``： + +![](http://img.smyhvae.com/20180617_1620.png) + +这个``虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`
        `，然后把现有的`
          `注释掉，就可以了。最终代码如下： + +```html + + + + + + + + Document + + + + +
          +
          + + + +
          + + + + + + +
        • + {{item.id}} --- {{item.name}} +
          • +           + +
          + + + + +``` + +这样的话，审查元素的效果如下： + +![](http://img.smyhvae.com/20180617_1621.png) diff --git a/21-Vue基础/其他.md b/21-Vue基础/其他.md deleted file mode 100644 index 1fd5e3b..0000000 --- a/21-Vue基础/其他.md +++ /dev/null @@ -1,8 +0,0 @@ - - -## - -Vue.component： - - -帮助我们创建全局组件。 \ No newline at end of file diff --git a/21-Vue基础/生命周期.md b/21-Vue基础/生命周期.md deleted file mode 100644 index 6c741d6..0000000 --- a/21-Vue基础/生命周期.md +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - -- beforeCreate和created。 - -created之后，就拿到了数据和方法。create一般用来**获取ajax，初始化操作** - -- beforeMount和mounted。 - -mounted之后，表示**真实DOM渲染完了，可以操作DOM了**。 - - -- beforeUpdate和updated - -数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。 - -- beforeDestory和destoryed - -可以在beforeDestory里**清除定时器、或清除事件绑定**。 - - - - - - - - - - -