VS Code插件推荐
This commit is contained in:
qianguyihao
parent
f4dbef94dd
commit
eea26d809f
@ -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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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的概念
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -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')
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
155
21-Vue基础/04-Vue动画.md
Normal file
155
21-Vue基础/04-Vue动画.md
Normal file
@ -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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user