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 相关的插件
|
||||
|
||||
@ -217,4 +259,23 @@ Sass 文件格式化。
|
||||
|
||||
问题1
|
||||
|
||||
解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
|
||||
解决；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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,147 +1,147 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 新建文件时快速生成Html
|
||||
|
||||
**安装如下插件：**
|
||||
|
||||
- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
|
||||
- CSS Format：css格式化。
|
||||
- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
|
||||
|
||||
**开始使用：**
|
||||
|
||||
新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
|
||||
|
||||
|
||||
参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
|
||||
|
||||
|
||||
|
||||
## 常用插件
|
||||
|
||||
### SublimeCodeIntel：JavaScript代码自动提示（不好用）
|
||||
|
||||
安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
|
||||
|
||||
将
|
||||
|
||||
```
|
||||
"codeintel_selected_catalogs": ["jQuery"]
|
||||
|
||||
```
|
||||
|
||||
改为：
|
||||
|
||||
```
|
||||
"codeintel_selected_catalogs": ["JavaScript"]
|
||||
```
|
||||
|
||||
保存后重启软件。
|
||||
|
||||
参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
|
||||
|
||||
|
||||
### javascript complet：JavaScript代码自动提示
|
||||
|
||||
|
||||
- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
|
||||
|
||||
- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
|
||||
|
||||
在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
|
||||
|
||||
|
||||
### JsFormat：JS代码格式化
|
||||
|
||||
|
||||
快捷键是：选中JS代码，然后按ctrl+alt+f。
|
||||
|
||||
或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
|
||||
|
||||
|
||||
### Sublime Server
|
||||
|
||||
我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
|
||||
|
||||
我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
|
||||
|
||||
安装成功之后，使用步骤如下：
|
||||
|
||||
（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
|
||||
|
||||
（2）在html文档里，右键选择 "View in SublimeServer"。
|
||||
|
||||
如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
|
||||
|
||||
|
||||
|
||||
|
||||
## 代码快速生成
|
||||
|
||||
|
||||
（1）`>`符号的技巧：
|
||||
|
||||
|
||||
输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
|
||||
|
||||
```html
|
||||
<div>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## sublime text 快捷键
|
||||
|
||||
| Win快捷键 | Mac快捷键 |作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
|html:5+tab||html结构代码||
|
||||
|tab||补全标签代码||
|
||||
|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`<div></div>`。||
|
||||
| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | |
|
||||
| Ctrl+Shift+K || 快速删除整行 | |
|
||||
|Ctrl+鼠标左键单击||集体输入||
|
||||
|Ctrl+H|Option+Cmd+F|查找替换|||
|
||||
| Ctrl+/ || 注释单行 | |
|
||||
| Ctrl+Shift+/ || 注释多行 | |
|
||||
|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
|
||||
|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
|
||||
|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
|
||||
|F11||全屏||
|
||||
|
||||
|
||||
|
||||
|
||||
## 推荐阅读
|
||||
|
||||
|
||||
- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
|
||||
|
||||
我自己整理的。
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 新建文件时快速生成Html
|
||||
|
||||
**安装如下插件：**
|
||||
|
||||
- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
|
||||
- CSS Format：css格式化。
|
||||
- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
|
||||
|
||||
**开始使用：**
|
||||
|
||||
新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
|
||||
|
||||
|
||||
参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
|
||||
|
||||
|
||||
|
||||
## 常用插件
|
||||
|
||||
### SublimeCodeIntel：JavaScript代码自动提示（不好用）
|
||||
|
||||
安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
|
||||
|
||||
将
|
||||
|
||||
```
|
||||
"codeintel_selected_catalogs": ["jQuery"]
|
||||
|
||||
```
|
||||
|
||||
改为：
|
||||
|
||||
```
|
||||
"codeintel_selected_catalogs": ["JavaScript"]
|
||||
```
|
||||
|
||||
保存后重启软件。
|
||||
|
||||
参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
|
||||
|
||||
|
||||
### javascript complet：JavaScript代码自动提示
|
||||
|
||||
|
||||
- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
|
||||
|
||||
- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
|
||||
|
||||
在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
|
||||
|
||||
|
||||
### JsFormat：JS代码格式化
|
||||
|
||||
|
||||
快捷键是：选中JS代码，然后按ctrl+alt+f。
|
||||
|
||||
或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
|
||||
|
||||
|
||||
### Sublime Server
|
||||
|
||||
我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
|
||||
|
||||
我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
|
||||
|
||||
安装成功之后，使用步骤如下：
|
||||
|
||||
（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
|
||||
|
||||
（2）在html文档里，右键选择 "View in SublimeServer"。
|
||||
|
||||
如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
|
||||
|
||||
|
||||
|
||||
|
||||
## 代码快速生成
|
||||
|
||||
|
||||
（1）`>`符号的技巧：
|
||||
|
||||
|
||||
输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
|
||||
|
||||
```html
|
||||
<div>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
<li>a</li>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## sublime text 快捷键
|
||||
|
||||
| Win快捷键 | Mac快捷键 |作用 | 备注 |
|
||||
|:-------------|:-------------|:-----|:-----|
|
||||
|html:5+tab||html结构代码||
|
||||
|tab||补全标签代码||
|
||||
|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`<div></div>`。||
|
||||
| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | |
|
||||
| Ctrl+Shift+K || 快速删除整行 | |
|
||||
|Ctrl+鼠标左键单击||集体输入||
|
||||
|Ctrl+H|Option+Cmd+F|查找替换|||
|
||||
| Ctrl+/ || 注释单行 | |
|
||||
| Ctrl+Shift+/ || 注释多行 | |
|
||||
|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
|
||||
|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
|
||||
|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
|
||||
|F11||全屏||
|
||||
|
||||
|
||||
|
||||
|
||||
## 推荐阅读
|
||||
|
||||
|
||||
- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
|
||||
|
||||
我自己整理的。
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
|
||||
|
||||
|
||||
|
||||
@ -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