VS Code插件推荐
This commit is contained in:
qianguyihao
@@ -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>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user