vue1-day3

发表于 | 分类于 ， ， ， ， | 本文总阅读量 次
字数统计: 1.1k | 阅读时长 ≈ 4

get

步骤：
1、导入vue-resource包，所以可以直接通过this.$http来发起数据请求
2、根据接口API文档，知道获取列表的时候，应该发起一个get请求
3、this.$http.get（’url’）.then（function（result）{}）
4、当通过then指定回调函数之后，再回调函数中，可以拿到数据服务器返回的result（数据格式是json）
5、先判断result.status是否等于0，如果等于0，就成功了，可以把result是一个对象，result.body.massage赋值给this.list；如果不等于0，可以弹框提醒，获取数据失败！

只有返回数据中的result.body.status=0，才说明这个请求成功。result.body.massage是返回结果里面的所有 信息，就会把所有能获取到的信息都返回给一个数组，进行储存或者显示

post

步骤分析：
1、经过查看数据API接口，要发送一个post请求，this.$http.post()
2、this.$http.post()中接受三个参数

  • 第一个参数：要请求的url地址
  • 第二个参数：要提交给服务器的数据，要以对象形式提交到服务器（name：this.name）
  • 第三个参数：是一个配置对象，要以哪种表单数据类型提交过去，{emulateJSON：true}，以普通表单格式，将数据提交给服务器application/x-www-form-urlencoded，这个参数一般是必须的，如果不传入的话，也可能会出问题。
    3、再post方法中，使用.then来设置成功的回调函数，如果想要拿到成功的结果，需要result.body。

注意：第二个参数和第三个参数都是以对象形式进行传参，所以都要加{xxx}，{xxx}

对{emulateJSON：true}进行全局配置，

1
2
在Vue实例之前进行添加一句
Vue.http.options.emulateJSON = true;

这样的话，会全局启用emulateJSON

如果我们通过全局配置了，请求的数据接口 根域名，则再每次单独发起http请求的时候，请求的url路径，应该以相对路径开头，强调，后面的相对路径前面不能带/，否则就不是相对路径。

vue中的动画

使用过渡类名

1、html结构

1
2
3
4
5
6
7
<div id="app">
<input type="button" value="动起来" @click="myanimate">
<!-- 使用transition将需要过渡的元素包裹起来 -->
<transition name="fade">
<div v-show="isshow">动画</div>
</transition>
</div>

transition中的name=“”中的值是自定义的前缀，如果如上所示，则用fade-enter来进行动画控制。不自定义的话，直接就是v-enter。

2、vm实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//创建vue实例，得到viewmodel
var vm = new Vue({
	el:'#app',
	data:{
		isshow:false
	},
	methods:{
		myanimate(){
			this.isshow = !this.isshow
		}
	}
	});
~~~ 



步骤分析：
1、使用transition元素，把需要被动画控制的元素包裹起来。transition元素，是vue官方提供的
2、自定义两组样式，来控制transition内部的元素实现动画。v-enter：进入之前，元素的起始状态，此时还没有进入【这是一个时间点】；v-leave-to：是动画离开之后，离开的终止状态，此时元素已经结束了。v-enter-active：入场动画时间段，v-leave-active：离场时间段。


### 使用第三方animate.css类库实现动画
animate.css，可以直接在百度进行搜索该网页，进行动画展示
在对transition进行添加我们所选择的类样式之外，还需要再样式前面加一个一个基本类样式animated
动画
 
1
2

或者使用这种方式
动画
 
1
2
3
4
5
6
7
8
9

再transition标签后面添加```:duration="200"```表示该动画所需要的时长。
如果改成在transition标签后面添加```:duration="{enter:200,leave:400}"```表示分别给入场和离场设置时间。即如果用一个对象来设置duration的话就是分别给两个动画来设置动画时长。


### 钩子函数实现半场动画
即只有进入没有离开的动画，我们叫做半场动画。用上述的两种方法和自定义的函数方法都不能够实现半场动画，所以这个时候就需要使用钩子函数来实现。

可以在属性中声明javascript钩子
v-on:before-leave=”beforeLeave”
v-on:lever=”leave”
v-on:after-leave=”afterLeave”
v-on:leave-cancelled=”leaveCancelled”

 
1
都可以称作动画的生命周期函数，前一部分是进入，后一部分是离开。上述有八个事件，那么对应的在methods中也有对应的八个函数方法。来对此进行定义。如果只需要半场函数的话，那我们就只需要前面一部分的事件，而不需要后面一部分的事件。
methods:{ //进入中 beforeEnter:function(el){},

}

1
2
3
4
5
6
7
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。


## 实现列表动画
样式设计

.v-enter,
.v-leave-to{
opacity: 0;
transform:translateY(80px);
}

.v-enter-active,
.v-leave-active{
    transition:all 0.6s ease;
}
1
在实现列表过度的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transition包裹，需要使用transitionGroup包裹。
  • --- 
1
2
3
4
5

如果要为v-for循环创建的元素设置动画，必须为每一个元素设置：key属性

### 列表删除动画
只需要在上述基础上再添加以下样式就可以了，一般都是固定写法。还要注意的是，需要在li样式中添加width属性值，避免```position：absolute```在起作用的同时，也会将宽度变为最小值。
.v-move{ transition:all 0.6s ease; } .v-leave-active{ position:absolute; } 
1
2
3
4


### transition-group中的appear和tag属性
给transition-group添加apper属性，实现页面刚展示出来入场时候 的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果就直接按照上述规则填写的话，在页面检查元素检查出来会发现页面将transition-group标签渲染成span标签了。
解决办法是去掉ul标签，然后在```<transition-group appear tag="ul">```添加tag="ul"属性值就可以了。

通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签。

## vue组件
什么是组件？组件的出现就是为了拆分vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块。将来我们需要什么样的功能，就去调用对应的组件即可。

组件话和模块化的不同？
+ 模块化是从代码逻辑的角度进行划分的。方便代码的分层开发，保证每个功能模块的职能单一
+ 组件化是从UI界面的角度进行划分的 。前端的组件化，方便UI组建的重用

### 创建组件
#### 方式一：使用Vue.extend来创建全局的Vue组件
这些创建过程是在script标签中创建的
//1、使用Vue.extend来创建全局的Vue组件 var com1 = Vue.extend({ template:'

这是使用Vue.extend创建的组件

'//通过template属性，指定了组件要展示的HTML结构，将来要展示的具体内容 }) //2、使用Vue.component('组件的名称，将来要引用的名称',创建出来的组件模板对象) Vue.component('mycom1',com1) 
1
2

引用组件：
//如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中 
1
2
3
4
5
注意：在创建的时候，可以使用驼峰的方法来书写名称，但是在使用的时候，需要使用带-的方式来写，即把大写的驼峰改成小写的字母带-来表示。如果不写驼峰，直接拿名称就可以了。


直接把上述步骤合成一个步骤即可
Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式来引入它的/第二个参数：Vue.extend（）创建的组件，template就是组件将来要展示的HTML内容。
Vue.component('myCom1',Vue.extend({ template:'' })) 
1
2

#### 方式二创建组件
Vue.component('mycom2',{ template:'

这是直接使用Vue.component创建出来的组件

' }) 
1
2
3
4
5
引用的时候，还是使用标签的形式，引入自己的组件。

注意：无论是哪种方式创建出来的组件，组建的template属性指向的模板内容，必须有且只有唯一的一个根元素。

#### 创建组件方式三
Vue.component('mycom3',{ template:'#temp1' }) 
1
2

使用方式，在被控制的#app外面使用template元素，定义组件的模板结构
//引用组件
//这是vm实例控制部分 
1
2
3

### 使用component定义私有组件
上述的都是全局组件，
var vm = new Vue({ el:'#app2', data:{}, methods:{}, filters:{}, directives:{}, components:{ //定义实例内部私有组件，不和其他公用，在实力内部自己使用 login：'

这是私有的login组件

' } }) 
1
调用，只能在控制的实例上app2上使用
1
2
3
4
5

也可以像上述方式的改进一样，写在template里面，对其进行整合

### 组件中的data
组件中也有一个data，但是跟实例中的data不一样，组件的data必须是一个function并且return一个对象，但实例中的data是一个对象。组件中的data数据使用方式和实例中的data数据使用方式完全一样。
Vue.component('mycom1',{ template:'

这是一个全局组件---

', data:function(){ return{ msg:'这是组件中的data定义的数据' } } }) 
1
2
3

#### 为什么组件中的data中必须是一个function
例如