Vue.js入门知识day3
Vue.js入门知识day3
- Vue-resource改造品牌列表案例
- 源码
- 获取所有的品牌
- 添加品牌
- 删除品牌
- 全局配置数据接口的根域名
- 全局配置emulateJSON选项
- Vue中的动画
- 使用过渡类名
- 修改v-前缀:给transition加一个name属性
- 使用第三方类实现动画
- 设置动画执行的时间
- 动画-使用钩子函数模拟小球的半场动画
- 使用transition-group
- 实现列表删除和删除时候的动画效果
- 动画transition-group中appear和tag属性的使用
- Vue组件
- 定义Vue组件：
- 创建组件的方式1
- 创建组件的方式2
- 创建组件的方式3
- 使用components定义私有组件
- 组件中的data和methods
- 组件中的data为什么必须是一个function
- 组件切换:使用v-if和v-else结合flag进行切换
- 组件切换:方式2
- 组件切换-切换动画和mode方式
Vue-resource改造品牌列表案例
源码
Document
添加品牌
Id
Name
Ctime
Cperation
{{item.id}}
{{item.name}}
{{item.ctime}}
删除
获取所有的品牌
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('http://vue.studyit.io/api/getprodlist').then(result=>{
var result = result.body
//注意：通过$http获取到的数据，都在result.body中放着
if (result.status === 0) {
//成功了
this.list = result.message
}else{
//失败了
alert('获取数据失败!');
}
添加品牌
add(){
//添加品牌列表到后台服务器
//分析
//1、听过查看 数据API接口，发现，要发送一个 Post 请求，this.$http.post
//2、this.$http.post()中接受三个参数:
// 2.1 第一个参数:要请求的URL地址
// 2.2 第二个参数:要提交给服务器的数据，要以对象形式提交给服务器 {name:this.name}
// 2.3 第三个参数:是一个配置对象，要以哪种表单数据形式提交过去，{emulateJSON:true}，以普通表单格式，将数据提交给服务器 application/x-www-form-urlencoded
this.$http.post('http://vue.studyit.io/api/addproduct',{name:this.name},{emulate:true}).then(result=>{
if(result.body.status === 0){
//成功了
// 添加完成后，只需要手动，再调用一下getAllList 就能刷新品牌列表了
this.getAllList()
//清空 name
this.name = ''
}else{
//失败了
alert('添加失败!')
}
})
}
删除品牌
del(id){
//删除品牌
this.$http.get('http://vue.studyit.io/api/delproduct'+id).then(result=>{
if(result.body.status === 0){
// 删除成功
this.getAllList();
}else{
alert('删除失败')
}
})
}
全局配置数据接口的根域名
注意：如果我们通过全局配置了请求的数据接口的根域名，则在单独发起http请求的时候，请求的url路径应该以相对路径开头，前面不能带 /，否则 不会启用根路径做拼接
Vue.http.options.root = 'http://vu.studyit.io/'
add(){
this.$http.post('api/addproduct',{name:this.name},{emulate:true}).then(function(){})
}
全局配置emulateJSON选项
Vue.http.options.root = 'http://vu.studyit.io/'
Vue.http.options.emulateJSON = true;
add(){
this.$http.post('api/addproduct',{name:this.name}).then(function(){})
}
Vue中的动画
（http://cn.vuejs.org/v2/guide/transitions.html）
为什么要有动画：动画能够提高用户的体验，帮助用户更好地理解页面中的功能
使用过渡类名
1、html结构
这是一个h3
2、css样式
3、JavaScript部分
var vm = new Vue({
el:'#app',
data:{
flag:false
}
})
修改v-前缀:给transition加一个name属性
1、html结构
这是一个h6
2、css样式
.my-enter,
.my-leave-to{
opacity:0;
transform:translateY(200px);
}
.my-enter-active,
.my-leave-active{
transition:all 0.8s ease;
}
使用第三方类实现动画
1、html部分
这是一个h3
2、css部分
设置动画执行的时间
1、使用 :duration=“毫秒值” 来统一设置 入场 和 离场 时候的动画时长
这是一个h3
2、 使用 :duration="{enter:200,leave:400}"来分别设置 入场的时长 和 离场的时长
这是一个h3
动画-使用钩子函数模拟小球的半场动画
1、html部分：v-show很关键，他让小球被动画控制起来
2、css样式：这里主要是设置小球的样式，没有什么实际的作用
2、javaScript部分
var vm = new Vue({
el:'#app',
data:{
flag:false,
},
methods:{
//注意:动画钩子函数的第一个参数:el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
//大家可以认为，el是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
//beforeEnter 表示动画入场之前，此时动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
//设置小球开始动画之前的，起始位置
el.style.transform = "translate(0,0)"
},
enter(el,done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为el.offsetWidth会强制动画刷新
el.offsetWidth
//enter 表示动画 开始之后的样式，这里，可以设置小邱完成动画之后的，结束状态
el.style.transform = "translate(150px,450px)"
el.style.transition = "all 1s ease"
// 这里的done,起始就是 afterEnter这个函数，也就是说:done是afterEnter 函数的引用
done()
},
afterEnter(el){
this.flag = !this.flag
}
}
})
使用transition-group
1、html布局
-
{{item.id}} --- {{item.name}}
2、css样式
3、JavaScript代码
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'赵高'},
{id:2,name:'秦桧'},
{id:3,name:'刘瑾'},
{id:4,name:'魏忠贤'}
]
},
methods:{
add(){
this.list.push({id:this.id,name:this.name})
this.id=this.name=''
}
}
})
实现列表删除和删除时候的动画效果
1、html布局
-
{{item.id}} --- {{item.name}}
