Vue一周学习总结（一）
动画（transtion）
1.Vue自带的动画效果，第一种是最普通的隐藏与现实，也称为无动画效果
<h1 v-show = flag>这是无动画效果 </h1>
<input type="button" value="切换" @click = "change()">
methods: {
change(){
this.flag = !this.flag
}
2.第二种是transiton设置动画效果
<style>
.my-enter,.my-leave.to{
transform:translate(100px,100px)//xy轴各100px;
color:red;
}
.my-enter-active,.my-leave.active{
transtion:all 1s ease
}
</style>
<input type="button" value="切换" @click = "change()">
<transiton name="my">
<h1 v-show = flag>这是有动画效果 </h1>
</transiton>
methods: {
change(){
this.flag = !this.flag
}
Vue的组件
Vue的组件 ：
组件的出现,是为了拆分Vue实例的代码里的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化： 是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
组件的注意事项
如果使用驼峰命名，在 引用组件的时候，需要把大写的驼峰改成小写的字母，同时，两个单词之间要用 - 来连接
如果不适用驼峰，则直接使用
组件可以有自己的data，但是组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法；
组件中的data除了必须为一个方法之外，这个方法内部还必须返回一个对象才可以
组件中的data数据，使用方式和实例中的data使用方式完全一样
定义组件的方法：
<!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>
</head>
<body>
<div id="app">
<demo></demo>
<demo2></demo2>
<demo3></demo3>
</div>
</body>
<template id="demo3">
<h1>这是另外一种方法定义的一个全局组件</h1> <!-- 这是另外一种全局组件的定义方式 -->
</template>
<script src="../lib/vue-2.4.0.js"></script>
<script>
Vue.component('demo', { //这是全局组件的定义
template: '这是一个全局组件
'
})
Vue.component('demo3', {
template: '#demo3'
})
new Vue({
el: '#app',
data() {
return {
}
},
methods: {
},
components: {
'demo2': { //私有组件的定义
template: '这是一个私有组件
'
}
}
})
</script>
</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>
</head>
<body>
<div id="app">
<demo :parentmsg="msg"></demo>
</div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
Vue.component('demo', {
props: ['parentmsg'],
template: '{{parentmsg}}
',
methods: {
change() {
this.parentmsg = '修改后的父组件'
}
},
})
new Vue({
el: '#app',
data() {
return {
msg: "这是父组件"
}
},
methods: {
},
})
</script>
</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>
</head>
<body>
<div id="app">
<demo @change="parentmsg"></demo>
</div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {}
},
methods: {
parentmsg(msg) {
alert(msg)
}
},
components: {
demo: {
template: '',
data() {
return {
msg: "这是传递过后的方法"
}
},
methods: {
myclick() {
this.$emit('change', this.msg)
}
},
}
}
})
</script>
</html>
使用component在组件之间的切换
<!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>
</head>
<body>
<div id="app">
<button @click="comName='login'">登陆</button>
<button @click="comName='registered'">注册</button>
<component :is="comName"></component>
</div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
Vue.component('login', {
template: "这是{{msg}}
",
data() {
return {
msg: "登陆"
}
},
})
Vue.component('registered', {
template: "这是{{msg}}
",
data() {
return {
msg: '注册'
}
},
})
new Vue({
el: '#app',
data() {
return {
comName: 'login'
}
},
methods: {}
})
</script>
</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>
<link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
<div id="app" v-cloak>
<combox @func="getlist"></combox>
<ul class="list-group">
<li class="list-group-item" v-for="item in list">
<span class="badge">发布者：{{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="com-box">
<div>
<input placeholder="发布者姓名" v-model="user">
<input placeholder="请输入发布内容" v-model="content">
<input type="button" value="发布" @click="add">
</div>
</template>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
list: []
}
},
methods: {
getlist() {
let p1 = localStorage.getItem("user")
let p2 = localStorage.getItem("content")
let addlist = {
user: p1,
content: p2
}
this.list.push(addlist)
window.localStorage.setItem("list-json", JSON.stringify(this.list))
}
},
created() {
if (window.localStorage.getItem("list-json")) {
this.list = JSON.parse(localStorage.getItem("list-json"))
}
},
components: {
combox: {
template: '#com-box',
data() {
return {
user: "",
content: ""
}
},
methods: {
add() {
localStorage.setItem("user", this.user)
localStorage.setItem("content", this.content)
this.$emit('func')
}
},
}
}
})
</script>
</html>