update Vue.js

2018-03-29 21:36:22 +08:00 · 2018-03-29 21:36:22 +08:00 · 822caa0056
commit 822caa0056
parent 56bfc02fae
7 changed files with 671 additions and 24 deletions
--- a/00-前端工具/02-Atom在前端的使用.md
+++ b/00-前端工具/02-Atom在前端的使用.md
@ -63,3 +63,13 @@ apm install --check
 - <https://atom-china.org/t/atom/984>

 - <https://zhenyong.github.io/2016/08/03/starting-atom/>
+
+
+
+
+## 相关设置
+
+### 显示缩进线
+
+settings -->Editor --> Show Indent Guide
+
--- a/03-JavaScript/07-面向对象、作用域和this.md
+++ b/03-JavaScript/07-面向对象、作用域和this.md
@ -270,4 +270,7 @@

 打印结果：`vae`。

+**箭头函数中this的指向**：
+
+ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定（无论this绑定到什么）。

--- a/03-JavaScript（二）/07-call、apply、bind的区别.md
+++ b/03-JavaScript（二）/07-call、apply、bind的区别.md
@ -8,6 +8,7 @@

 ## call()和apply()

+### 介绍

 这两个方法都是函数对象的方法，需要通过函数对象来调用。

@ -19,7 +20,43 @@
 - 第一个参数都是this要指向的对象（函数执行时，this将指向这个对象），后续参数传实参。


-**call()和apply()的区别：**
+
+### 显式绑定this
+
+JS提供的绝大多数函数以及我们自己创建的所有函数，都可以使用call 和apply方法。
+
+它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象，因此我们称之为显式绑定。
+
+
+例1：
+
+```javascript
+    function foo() {
+        console.log(this.a);
+    }
+
+    var obj = {
+        a: 2
+    };
+
+    foo.apply(obj);//打印结果：2
+```
+
+
+### 第一个参数的传递
+
+1、thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。
+
+2、传递一个别的函数名时，函数中的this将指向这个**函数的引用**。
+
+3、传递的值为数字、布尔值、字符串时，this会指向这些基本类型的包装对象Number、Boolean、String。
+
+4、传递一个对象时，函数中的this则指向传递的这个对象。
+
+创建函数创建函数bar的奶鹅绒和变量的创建的ffunciont
+
+
+### call()和apply()的区别


 call()和apply()方法都可以将实参在对象之后依次传递，但是apply()方法需要将实参封装到一个**数组**中统一传递。
@ -80,16 +117,6 @@ call()和apply()方法都可以将实参在对象之后依次传递，但是appl
 - 实现继承。Father.call(this)


-## 参数的传递
-
-1、使用call的时候，thisObj不传或者为null、undefined时，函数中的this会指向window对象。
-
-2、传递一个别的函数名时，函数中的this将指向这个**函数的引用**。
-
-3、传递的值为数字、布尔值、字符串，this会指向这些基本类型的包装对象Number、Boolean、String。
-
-4、传递一个对象，函数中的this则指向传递的这个对象。
-

 ## bind()

--- a/19-基础/00-基础.md
+++ b/19-基础/00-基础.md
@ -3,4 +3,211 @@

 ## 20180323

+### 什么是闭包，闭包有什么作用。
+
+### ES6的新特性有哪些。
+
+作用域、函数扩展（扩展运算符、默认参数、箭头函数）、异步promise、模块化。
+
+### 追问：const常量有什么作用？确定不能修改吗？修改之后会报错吗？你有没有试过？
+
+当时我的答案是斩钉截铁地说不能改，其实我说错了。后来查了一下，准确答案是：
+
+- 如果是值类型，值不可变
+
+- 如果是引用类型，地址不可变
+
+所以说，虽然我不能修改引用类型的指向，但是我可以修改引用类型里的属性值。
+
+
+参考链接：<https://segmentfault.com/q/1010000012836140?sort=created>
+
+
+### 追问：const的原理是什么？
+
+
+面试官问：如果你定义了const，什么是常量？是它的值还是引用？比如说，我定义了一个const 的array，那我能往里面插入数据吗？
+
+
+
+
+### 箭头函数和匿名函数有什么区别吗？
+
+箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
+
+普通函数的this指向是动态作用域；箭头函数的this指向是依据词法作用域。
+
+
+参考链接：<https://zhuanlan.zhihu.com/p/25093389>
+
+
+### 可以讲一下promise的状态吗？
+
+
+
+
+### 追问：如果我写setTimeout（0），再写一个promise，哪个先执行？
+
+我回答错了。
+
+正确答案是：任务队列可以有多个，promise的任务队列，优先级更高。具体答案还需要再仔细看看。
+
+
+### http有了解吗？
+
+
+- 可以讲一下它的握手过程吗？
+
+- http的缓存有了解吗？
+
+- get和post区别
+
+
+### 做过CDN吗？
+
+答得不具体。
+
+百度百科的解释是：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
+
+
+### Vue相关
+
+- vue的双向绑定怎么实现的？我是说怎么实现？
+
+我当时是回答MVVM模式。其实还需要答出Object.defineProperty( )的细节。
+
+
+- Vue里还有什么呢？
+
+数据驱动、组件化。
+
+
+### 事件绑定：onClick和addEventListener的区别
+
+
+
+### 说一下DOM里的事件冒泡
+
+
+### 用Webpack做过哪些功能？
+
+### 追问：ES6转成ES5，改动代码，发现页面自动刷新。你说一下整个流程。
+
+问的是webpack 自动刷新的流程。我没回答好。
+
+
+### 追问：既然webpack可以用来配置服务器，如果我要联调，怎么办？
+
+问：启动了webpack，就可以直接连接到后端吗？
+
+
+### 说一下跨域
+
+
+### gzip压缩有了解吗
+
+### 你做过什么项目？说一下？
+
+答：我做过电商网站。
+
+追问：遇到过什么问题吗？
+
+答：我遇到了性能的问题。
+
+追问：那你说一下性能的问题
+
+我就答出了性能相关的五大点。
+
+
+
+### node和express有了解吗？
+
+### 追问requireJS，是异步的吗？
+
+是异步的。
+
+
+
+### Vue你是怎么用的？是把所有的代码都写在一个页面里的吗
+
+答：我是模块化写的。
+
+问：怎么分类？
+
+
+追问：vuex的的作用
+
+
+
+### 移动端的触摸事件了解吗？
+
+- touchstart touchmove touchend touchcancel（touchcancel当触点由于某些原因被中断时触发）
+
+- 模拟 swipe 事件：记录两次 touchmove 的位置差，如果后一次在前一次的右边，说明向右滑了。
+
+### 移动端的浏览器和电脑浏览器的 touch事件，有区别吗？
+
+
+我说我没了解过。
+
+追问：移动端默认会有0.2秒的延迟。
+
+我后来查了一下：
+
+点击延迟：是指移动端浏览器在 touchend 和 click 之间存在 300ms ～ 350ms 的延迟。
+
+
+为了判断用户是否是进行双击操作。因为移动端双击是放大文字的手势操作。
+
+主要是从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。这是因为浏览器想看看你是不是要进行双击（double tap）操作。
+
+解决方法：
+
+- 将click事件换成touch end事件
+
+- FastClick：FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉。
+
+事件发生顺序：在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click。
+
+
+### 如何自定义事件
+
+自定义事件的代码如下：
+
+
+```javascript
+    var myEvent = new Event('clickTest');
+    element.addEventListener('clickTest', function () {
+        console.log('smyhvae');
+    });
+
+	//元素注册事件
+    element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
+
+```
+
+
+
+
+
+### 说一下状态码
+
+### 手机端的web开发，怎么和原生做交互？
+
+
+问：比如web网页，想调用手机的拍照功能，怎么做？再比如怎么分享到朋友圈？
+
+
+
+### vue的生命周期，有了解吗
+
+create和mount有什么区别吗
+
+什么时候执行update
+
+
+
+
+
+

--- a/21-Vue基础/00-Vue的介绍和vue-cli.md
+++ b/21-Vue基础/00-Vue的介绍和vue-cli.md
@ -27,7 +27,7 @@ AngularJS 提供更多的是一套解决方案，更像是一个生态。

 ![](http://img.smyhvae.com/20180302_1636.png)

-国内的很多开发者喜欢 Vue；国外的开发者更喜欢 React，可以做大型网站。
+国内的很多开发者喜欢 Vue；国外的开发者更喜欢 React，适合做大型网站。

 ### 什么是虚拟 DOM

--- a/21-Vue基础/01-Vue基础语法：系统指令.md
+++ b/21-Vue基础/01-Vue基础语法：系统指令.md
@ -35,7 +35,7 @@

 显示效果：

-20180313_0955.png
+![](http://img.smyhvae.com/20180313_0955.png)

 如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。

@ -44,6 +44,8 @@

 ## v-on：注册事件

+### v-on 的用法举例
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@ -73,6 +75,7 @@
    data: { //data就是MVVM中的 module
      name: 'smyhvae'
    },
+    //注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
    methods: {
      change: function() { //上面的button按钮的点击事件
        this.name += '1';
@ -88,6 +91,133 @@
 上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。


+### `v-on`的简写形式
+
+例如：
+
+```html
+    <button v-on:click="change">改变name的值</button>
+```
+
+可以简写成：
+
+```html
+    <button @click="change">改变name的值</button>
+```
+
+
+### v-on的常用事件
+
+- v-on:click
+
+- v-on:keydown
+
+- v-on:keyup
+
+- v-on:mousedown
+
+- v-on:mouseover
+
+- v-on:submit
+
+- ....
+
+### v-on的事件修饰符
+
+`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
+
+- `.stop`  阻止冒泡。本质是调用 event.stopPropagation()。
+
+`.prevent`  阻止默认事件。本质是调用 event.preventDefault()。
+
+`.capture`  添加事件监听器时，使用 capture 模式。
+
+`.self`  只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
+
+``.{keyCode | keyAlias}`   只当事件是从侦听器绑定的元素本身触发时，才触发回调。
+
+``.native` 监听组件根元素的原生事件。
+
+写法示范：
+
+```html
+          <!-- click事件 -->
+        <button v-on:click="doThis"></button>
+
+        <!-- 缩写 -->
+        <button @click="doThis"></button>
+
+        <!-- 内联语句 -->
+        <button v-on:click="doThat('hello', $event)"></button>
+
+        <!-- 阻止冒泡 -->
+        <button @click.stop="doThis"></button>
+
+        <!-- 阻止默认行为 -->
+        <button @click.prevent="doThis"></button>
+
+        <!-- 阻止默认行为，没有表达式 -->
+        <form @submit.prevent></form>
+
+        <!--  串联修饰符 -->
+        <button @click.stop.prevent="doThis"></button>
+```
+
+
+**举例**：（`.prevent`的用法举例）
+
+现在有一个form表单：
+
+```html
+    <form action="http://www.baidu.com">
+      <input type="submit" value="表单提交">
+    </form>
+```
+
+
+我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
+
+现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    <!-- 阻止表单中submit的默认事件 -->
+    <form @submit.prevent action="http://www.baidu.com">
+      <!-- 执行自定义的click事件 -->
+      <input type="submit" @click="mySubmit" value="表单提交">
+    </form>
+
+  </div>
+</body>
+
+<script>
+  new Vue({
+    el: '#app',
+    data: {
+    },
+    methods: {
+      mySubmit: function() {
+        alert('ok');
+      }
+    }
+  });
+</script>
+
+</html>
+```
+
+上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
+

 ## 插值表达式 {{}}

@ -160,7 +290,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 结果：


-20180313_1645.png
+![](http://img.smyhvae.com/20180313_1645.png)

 ## v-html

@ -217,7 +347,6 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 ```


-
 ## v-bind

 `v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
@ -284,7 +413,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：

 效果：

-20180313_1745.png
+![](http://img.smyhvae.com/20180313_1745.png)



@ -338,13 +467,251 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 ```


-
-
-
-
-
-
-
+此时，便可实现我们刚刚要求的双向数据绑定的效果。
+
+## v-for：for循环
+
+**作用**：根据数组中的元素遍历指定模板内容生成内容。
+
+### 引入
+
+比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：
+
+
+```html
+<body>
+  <div id="app">
+    <ul>
+      <li>{{list[0]}}</li>
+      <li>{{list[1]}}</li>
+      <li>{{list[2]}}</li>
+    </ul>
+  </div>
+</body>
+
+<script>
+  var vm = new Vue({
+    el: '#app',
+    data: {
+      list: [1, 2, 3]
+    }
+
+  });
+</script>
+```
+
+效果：
+
+![](http://img.smyhvae.com/20180329_1713.png)
+
+为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：
+
+
+```html
+<body>
+  <div id="app">
+    <ul>
+      <!-- 使用v-for对多个li进行遍历赋值 -->
+      <li v-for="item in list">{{item}}</li>
+    </ul>
+  </div>
+</body>
+
+<script>
+  var vm = new Vue({
+    el: '#app',
+    data: {
+      list: [1, 2, 3]
+    }
+
+  });
+</script>
+```
+
+接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
+
+
+### 数组的遍历赋值
+
+针对下面这样的数组：
+
+
+```html
+<script>
+  new Vue({
+    el: '#app',
+    data: {
+      arr1: [2, 5, 3, 1, 1],
+    }
+  });
+</script>
+```
+
+
+将数组中的**值**赋给li：
+
+```html
+      <li v-for="item in arr1">{{item}}</li>
+```
+
+
+将数组中的**值和index**赋给li：
+
+
+```html
+      <!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
+      <li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
+```
+
+
+效果如下：
+
+![](http://img.smyhvae.com/20180329_1856.png)
+
+
+
+### 对象的遍历赋值
+
+
+针对下面这样的对象：
+
+```html
+<script>
+  new Vue({
+    el: '#app',
+    data: {
+      obj1: {
+        name: 'smyhvae',
+        age: '26',
+        gender: '男'
+      }
+    }
+  });
+</script>
+```
+
+将上面的`obj1`对象的数据赋值给li，写法如下：
+
+
+```html
+<body>
+  <div id="app">
+    <ul>
+      <!-- 括号里如果写两个参数：则第一个参数代表value，第二个参数代表key -->
+      <li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>
+
+      <h3>---分隔线---</h3>
+
+      <!-- 括号里如果写三个参数：则第一个参数代表value，第二个参数代表key，第三个参数代表index -->
+      <li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
+    </ul>
+  </div>
+</body>
+
+```
+
+效果如下：
+
+![](http://img.smyhvae.com/20180329_1850.png)
+
+
+## v-if：设置元素的显示和隐藏
+
+**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
+
+在切换时，元素和它的数据绑定会被销毁并重建。
+
+举例如下：（点击按钮时，切换和隐藏盒子）
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <script src="vue.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    <button v-on:click="toggle">显示/隐藏</button>
+    <div v-if="isShow">我是盒子</div>
+  </div>
+</body>
+
+<script>
+  new Vue({
+    el: '#app',
+    data: {
+      isShow: true
+    },
+    methods: {
+      toggle: function() {
+        this.isShow = !this.isShow;
+      }
+    }
+  });
+</script>
+
+</html>
+```
+
+效果如下：
+
+![](http://img.smyhvae.com/20180329_1920.gif)
+
+
+## v-show：设置元素的显示和隐藏
+
+**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
+
+举例如下：（点击按钮时，切换和隐藏盒子）
+
+我们直接把上一段代码中的`v-if`改成`v-show`就可以了：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <script src="vue.js"></script>
+</head>
+
+<body>
+  <div id="app">
+    <button v-on:click="toggle">显示/隐藏</button>
+    <div v-show="isShow">我是盒子</div>
+  </div>
+</body>
+
+<script>
+  new Vue({
+    el: '#app',
+    data: {
+      isShow: true
+    },
+    methods: {
+      toggle: function() {
+        this.isShow = !this.isShow;
+      }
+    }
+  });
+</script>
+
+</html>
+
+```
+
+效果如下：
+
+![](http://img.smyhvae.com/20180329_2040.gif)
+
+**v-if和v-show的区别**：
+
+`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`是添加/删除DOM元素，而`v-show`是在这个元素上添加/移除`style="display:none"`属性。



--- a/21-Vue基础/生命周期.md
+++ b/21-Vue基础/生命周期.md
@ -0,0 +1,33 @@
+
+
+
+
+
+
+- beforeCreate和created。
+
+created之后，就拿到了数据和方法。create一般用来**获取ajax，初始化操作**
+
+- beforeMount和mounted。
+
+mounted之后，表示**真实DOM渲染完了，可以操作DOM了**。
+
+
+- beforeUpdate和updated
+
+数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
+
+- beforeDestory和destoryed
+
+可以在beforeDestory里**清除定时器、或清除事件绑定**。
+
+
+
+
+
+
+
+
+
+
+