VS Code插件推荐

00-前端工具/02-VS Code.md

@@ -151,6 +151,48 @@ Sass 文件格式化。
 20180611_2235.png
 
 
+### open in browser
+
+在浏览器中打开。
+
+
+### Auto Rename Tag
+
+适用于 JSX、Vue、HTML。在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键。
+
+
+###Project Manager
+
+项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢。
+
+
+
+### highlight-icemode：选中相同的代码时，让高亮显示更加明显
+
+VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。
+
+所用了这个插件之后，VS Code自带的高亮就可以关掉了：
+
+在用户设置里添加`"editor.selectionHighlight": false`即可。
+
+
+参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164)
+
+
+### highlight-words：全局高亮（跨文件多色彩）
+
+
+参考链接：[Visual Studio Code全局高亮着色插件(跨文件多色彩)经验纪要](https://zhuanlan.zhihu.com/p/31163793)
+
+
+
+
+
+
+
+
+
+
 
 ## Vue 相关的插件
 
@@ -218,3 +260,22 @@ Sass 文件格式化。
 问题1
 
 解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
+
+
+
+
+## 参考链接
+
+- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://zhuanlan.zhihu.com/p/30976584)
+
+
+### 某网友的VS Code 插件截图
+
+20180611_2255.png
+
+
+
+
+
+
+

20-前端综合/2018年-前端日记.md

@@ -83,7 +83,7 @@ Vue.component('my-div', $.extend({
 
 ### 2018-05-08
 
-- sku的概念
+- sku、spu的概念
 
 ### 2018-05-09
 
@@ -163,6 +163,11 @@ v-on:keyup="querysku = querysku.replace(/\D/,'')"
 - jingwen推荐的iconMoon图标网站。网址：<https://icomoon.io/>
 
 
+### 2018-06-01
+
+- `PingFangSC`字体是iOS独有的字体。`PingFangSC-Regular`是常规字体，`PingFangSC-Semibold`是加粗字体。如果我在代码里设置了这个字体，那么，ios上可以看到效果，但是Android上看不到效果，仍然会采用Android系统默认的字体。
+
+
 
 ### 2018-06-04
 
@@ -193,9 +198,7 @@ git cherry-pick myLog
 
 相当于是，我现在是**并行**开发两个功能了，要怎么通过git来进行协作呢？
 
-目前考虑到有几种答案。
+目前考虑到的姣好的方式是：
-
-方式1:
 
 - 从master拉分支`branch1`，此分支专门用来开发功能1，改功能1的bug。
 
@@ -221,7 +224,17 @@ git cherry-pick myLog
 
 - 通过 jQuery 获取Dom的时候，比如`$('#topNavTop').css('background','red')`记得要指明是 id 还是 class。
 
-- 每次开发一个新的需求，每次开发一个新的需求，记得要问清楚：“H5和”
+- 每次开发一个新的需求，记得要问清楚：“H5和小程序”都要做吗？要做的话，工作量基本乘以2。
+
+
+### 2018-06-14
+
+- pv、uv的概念
+
+
+
+
+
 
 
 

21-Vue基础/03-Vue中的Ajax请求.md

@@ -270,7 +270,7 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
 
                     this.pname = '';
 
-                    // 3、直接将列表数据重新加载一次，即可刷新页面上的数据
+                    // 3、添加完成后，只需要手动再调用一次getlist（将列表数据重新加载一次），即可刷新页面上的数据
                     this.getlist();
 
                 });
@@ -481,3 +481,71 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
 
 除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
 
+
+## 通过Vue全局配置api接口的url地址
+
+api接口的url地址包括：绝对路径+相对路径。
+
+我们在做Ajax请求的时候，所填写的url建议填**相对路径**，然后把**绝对路径**放在全局的位置。
+
+Vue就提供了这个功能。举例如下：
+
+```html
+
+  <script>
+    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
+    Vue.http.options.root = 'http://smyhvae/';
+    // 全局启用 emulateJSON 选项
+    Vue.http.options.emulateJSON = true;
+
+    var vm = new Vue({
+      el: '#app',
+      data: {
+        name: '',
+        list: [ // 存放所有品牌列表的数组
+        ]
+      },
+      created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
+        this.getAllList()
+      },
+      methods: {
+        getAllList() { // 获取所有的品牌列表
+          // 分析：
+          // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
+          // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
+          // 3. this.$http.get('url').then(function(result){})
+          // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
+          // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
+
+          this.$http.get('api/getprodlist').then(result => {
+            // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
+            var result = result.body
+            if (result.status === 0) {
+              // 成功了
+              this.list = result.message
+            } else {
+              // 失败了
+              alert('获取数据失败！')
+            }
+          })
+        }
+      }
+    });
+  </script>
+
+```
+
+如上方代码所示，第一步是在全局的位置写**绝对路径**：
+
+```javascript
+    Vue.http.options.root = 'http://smyhvae/';
+```
+
+第二步是在Ajax请求的url中写**相对路径**：（注意，前面不要带`/`）
+
+```javascript
+this.$http.get('api/getprodlist')
+```
+
+
+

21-Vue基础/04-Vue动画.md

@@ -0,0 +1,155 @@
+04-Vue动画.md
+
+
+
+## 前言
+
+动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
+
+
+## 使用过渡类名实现动画
+
+### 官方文档的解释
+
+过渡类名如下：
+
+
+
+动画进入：
+
+- v-enter：动画进入之前的**初始**状态
+
+- v-enter-to：动画进入之后的**结束**状态
+
+- v-enter-active：动画进入的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+动画离开：
+
+- v-leave：动画离开之前的**初始**状态
+
+- v-leave-to：动画离开之后的**结束**状态
+
+- v-leave-active：动画离开的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+
+### 使用举例
+
+温馨提示：`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。
+
+
+现在我们来做个例子：点击按钮时，让div显示/隐藏。
+
+**1、引入**：
+
+如果我们不使用动画，应该是这样做：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <h3 v-if="flag">这是一个H3</h3>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+**2、使用动画**：（通过Vue的过渡类名来实现）
+
+现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
+    <style>
+        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
+
+        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+        }
+
+        /* v-enter-active 【入场动画的时间段】 */
+
+        /* v-leave-active 【离场动画的时间段】 */
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
+        <!-- transition 元素，是 Vue 官方提供的 -->
+        <transition>
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+
+
+
+
+
+
+