生命周期
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
//生命周期函数就是vue实例再某一个时间点会自动执行的函数
var vm = new Vue({
el: "#app",
template: "<div>{{message}}</div>",
data: {
message: "hello word"
},
beforeCreate: function() {
console.log('beforeCreate')
},
created: function() {
console.log('created')
},
beforeMount: function() {
console.log('beforeMount')
},
mounted: function() {
console.log('mounted')
},
beforeDestroy:function() {
console.log('beforeDestroy')
},
destroyed:function() {
console.log('destroyed')
},
beforeUpdate:function() {
console.log('beforeUpdate')
},
updated:function() {
console.log('updated')
},
})
</script>
</body>
</html>
计算属性、方法、侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性、方法、侦听器</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 计算属性 -->
<!-- {{fullName}} -->
<!-- 方法 -->
<!-- {{fullName()}} -->
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Tom",
fullName: "Dell Tom"//监听器使用
},
//计算属性
// computed: {
// fullName: function () {
// return this.firstName + " " + this.lastName;
// }
// }
//方法
// methods: {
// fullName: function () {
// return this.firstName + " " + this.lastName;
// }
// }
// 监听器
watch: {
firstName: function () {
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function () {
this.fullName = this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
</html>
计算属性的setter和getter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性的setter和getter</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstName: "Dell",
lastName: "Tom"
},
computed: {
// fullName: function () {
// return this.firstName + " " + this.lastName;
// }
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (value) {
var arr = value.split(" ");
this.firstName = arr[0];//computed中，当他依赖得值发生改变时，他就会重新计算
this.lastName = arr[1];//this.firstName发生变化时，恰好是fullName依赖得值。所以重新计算，页面就变化
}
}
}
});
</script>
</body>
</html>
Vue中的样式绑定
无论通过class还是style绑定，都可以用对象或者数组形式绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的样式绑定</title>
<script src="vue.js"></script>
</head>
<style>
.activated {
color: red;
}
</style>
<body>
<div id="app">
<!-- 【class样式】 -->
<!-- 方式一 div上有个class【activated】,它是否显示取决于isActivatied-->
<!-- <div @click="handleDivClick" :class="{activated: isActivatied}">
hello word
</div> -->
<!-- 方式二 class和一个数组绑定，里面内容是一个变量-->
<!-- <div @click="handleDivClick" :class="[activated]">
hello word
</div> -->
<!-- 【内链样式】 可以对象形式定义，也可以通过数组形式定义 -->
<!-- 方式一，对象 -->
<!-- <div @click="handleDivClick" :style="styleObj">
hello word
</div> -->
<!-- 方式二，数组 -->
<div @click="handleDivClick" :style="[styleObj,{fontSize: '20px'}]">
hello word
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
//isActivatied: false //方式一
//activated: "" //方式二
styleObj: {
color: "black"
}
},
methods: {
handleDivClick: function () {
//方式一
//this.isActivatied = !this.isActivatied;
//方式二
// this.activated = this.activated == "activated" ? "" : "activated";
this.styleObj.color = this.styleObj.color == "black" ? "red" : "black";
}
}
});
</script>
</body>
</html>
组件使用中得细节点
- 使用【is】解决H5标签上得小bug
- 子组件中，定义data。data必须是一个函数
- ref的使用
父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子组件传值</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="0" @inc="handleIncrease"></counter>
<counter :count="0" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
// 定义局部组件
//1、父组件通过属性的形式向子组件传递数据
//2、组件中通过props接收
var counter = {
props: ['count'],
data: function () {
//（2）、如果子组件要修改传递过来的内容，就先赋值一份
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>', //实现点击加1
methods: {
handleClick: function () {
//this.count++;//（1）、不能这样使用，Vue中有单项数据流概念，子组件只能去用父组件传过来的内容，不能去修改
this.number++
//子组件向父组件传值，通过事件的方式
this.$emit('inc', 1); //通过【this.$emit】向外触发一个inc事件,并可以携带一个或多个参数
}
}
}
var vm = new Vue({
el: "#app",
data: {
total: 0
},
components: { //使用局部组件需要先注册
counter: counter
},
methods: {
handleIncrease: function (step) {
this.total += step
}
}
});
</script>
</body>
</html>
组件参数校验与非Props特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件参数校验与非Props特性</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child content="he"></child>
</div>
<script>
Vue.component('child', {
// props:['content'],
// 1、组件参数校验
props: {
//content: String //传入字符串
//content:[Number, String] //传入字符串或数字
// content: {
// type: String, //类型
// required: true, //是否必传
// default: "default value", //非必传时，默认值
// validator: function (value) { //参数长度校验
// return (value.length > 5)
// }
// }
},
template: '<div>{{content}}</div>'
})
// 1、Props特性：要求父组件传，子组件接，可以在组件中直接用父组件传过来的数据，同时不会显示在DOM标签中
// 2、Props特性：父组件传，子组件不接，那么在子组件中不能使用父组件传递过来的内容，对应的属性值会显示在子组件最外层的标签中
var vm = new Vue({
el: "#app"
});
</script>
</body>
</html>
给组件绑定原生事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>给组件绑定原生事件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 【1、】这里的click事件是一个自定义事件，不是原生的事件 -->
<!-- <child @click="handleClick"></child> -->
<!-- 给组件绑定原生事件，只要在事件绑定的后面加一个原生修饰符就行 -->
<child @click.native="handleClick"></child>
</div>
<script>
// Vue.component('child', {
// //template: "<div>Child</div>"
// //【2、】在子组件元素中使用click（原生）事件触发点击事件
// //【3、】在div元素上绑定的事件是原生的事件，在child上绑定的事件是自定义事件
// template: "<div @click='handleChildClick'>Child</div>",
// methods: {
// handleChildClick: function () {
// alert('child click')
// //逻辑：点click的时候。子组件的会监听自身div元素被点击了，
// //然后向外触发一个自定义事件
// this.$emit('click') //触发自定义事件
// }
// }
// })
Vue.component('child', {
template: "<div>Child</div>",
})
var vm = new Vue({
el: "#app",
methods: {
handleClick: function() {
alert('click')
}
}
})
</script>
</body>
</html>
非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
//实现：点击其中一个将值传入下一个组件【非父子组件】
//1、实例化一个Vue，赋值给Vue.prototype.bus
// 在Vue.prototype上挂载一个bus属性，bus属性指向Vue的实例
// 只要后面new Vue()或者创建一个组件的时候，每一个组件上都会有bus属性
// 所以每一个Vue的实例上都会有bus属性，都指向同一个Vue的实例
Vue.prototype.bus = new Vue();
Vue.component('child', {
props: {
content: String
},
data: function() {
return {
selfContent: this.content
}
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function () {
this.bus.$emit('change', this.selfContent)
}
},
mounted: function() {
var this_ = this;
this.bus.$on('change', function (msg) {
this_.selfContent = msg;
})
}
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
Vue中的作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的作用域插槽</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <child></child> -->
<child>
<!-- 1、父组件调用子组件的时候，给子组件传一个插槽（作用域插槽） -->
<!-- 2、作用域插槽必须以template开头和结尾的内容 -->
<!-- 3、同时这个插槽声明，我要从子组件接收的数据都放在props中 -->
<!-- 4、以<h1>标签的形式进行展示 -->
<template slot-scope="props">
<h1>{{props.item}}</h1>
</template>
</child>
</div>
</body>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
// template: `<div>
// <ul>
// <li v-for='item of list'>{{item}}</li>
// </ul>
// </div>`
//作用域插槽应用场景
//1、当子组件作循环或者某一部分的DOM结构应该由外部传递进来的时候
//2、使用作用域插槽，子组件插槽可以向父组件的插槽传递数据
//3、父组件传递过来的插槽想接收这个数据必须在外层使用template
// 同时使用slot-scope对应的属性名字接收传递过来的数据
// 子组件中传递了item过来，在父组件的作用域插槽里面就可以接收到item，并使用
template: `<div>
<ul>
<slot
v-for="item of list"
:item=item
></slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#app"
})
</script>
</html>
动态组件与v-once指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态组件与v-once指令</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- <child-one></child-one>
<child-two></child-two> -->
<!-- 实现：点击按钮显示不同的组件 -->
<!-- 动态组件会根据is里面的数据变换自动加载不同的组件 -->
<!-- 一开始进来type='child-one'就会显示child-one组件，点击按钮type='child-two'，则显示child-two组件 -->
<cpmponent :is='type'></cpmponent>
<button @click='handleBtnClick'>change</button>
</div>
</body>
<script>
Vue.component('child-one', {
template: '<div>child-one</div>'
//在Vue中，通过v-once指令可以有效提高一些静态内容展示效率
//使用v-once时，会将其放在内存中，使用时直接从内存中拿出，不需要重新创建
//template: '<div v-once>child-one</div>'
})
Vue.component('child-two', {
template: '<div>child-two</div>'
})
var vm = new Vue({
el: "#app",
data: {
type: 'child-one'
},
methods: {
handleBtnClick: function () {
this.type = (this.type === 'child-one' ? 'child-two' : 'child-one');
}
}
})
</script>
</html>
Vue中的CSS动画原理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的CSS动画原理</title>
<script src="vue.js"></script>
<style>
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: opacity 3s;
;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: opacity 3s
}
</style>
</head>
<body>
<div id="app">
<!-- 当一个元素被 transition 包裹之后，Vue会自动分析元素的css样式，然后构建一个动画的过程 -->
<!-- Vue中的CSS动画是通过在某一时刻自动往一些标签上增加样式来实现的 -->
<transition>
<!-- 它包裹得到内容里面会有一个过度的效果 -->
<div v-if="show">hello word</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
});
</script>
</body>
</html>
Vue中使用animate.css库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中使用animate.css库</title>
<script src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style>
</style>
</head>
<body>
<div id="app">
<transition
enter-active-class="animate__animated animate__swing"
leave-active-class="animate__animated animate__headShake"
>
<div v-if="show">hello word</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
});
</script>
</body>
</html>
Vue中同时使用过度和动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中同时使用过度和动画</title>
<script src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<!-- 1、appear-active-class【刷新页面的动画效果】 -->
<!-- 2、type="transition"【动画时长以transition为准--3s】 -->
<!-- 或【:duration="{enter:5000, leave: 10000}"】自定义时长 -->
<!-- 3、使用appear和appear-class设置页面初始动画 -->
<transition
type="transition"
name="fade"
appear
enter-active-class="animate__animated animate__swing fade-enter-active"
leave-active-class="animate__animated animate__headShake fade-leave-active"
appear-active-class="animate__animated animate__swing"
>
<div v-if="show">hello word</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
});
</script>
</body>
</html>
Vue中的JS动画与velocity.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的JS动画与velocity.js</title>
<script src="vue.js"></script>
<script src="velocity.min.js"></script>
</head>
<body>
<div id="app">
<!-- 入场动画对应的出场动画分别是 -->
<!-- before-leave -->
<!-- leave -->
<!-- after-leave -->
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-if="show">hello word</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
},
handleBeforeEnter: function (el) {
// el.style.color = "red"
el.style.opacity = 0
},
handleEnter: function (el, done) {
// setTimeout(() => {
// el.style.color = "green"
// //当动画结束之后，手动调用一下done()函数
// //相当于告诉Vue动画执行完了
// //当done()被调用之后又会触发after-enter
// done();
// }, 2000)
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
},
handleAfterEnter: function(el) {
// setTimeout(() => {
// el.style.color = "black"
// }, 2000)
console.log("动画结束")
}
}
});
</script>
</body>
</html>
Vue中多个元素或组件的过度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中多个元素或组件的过度</title>
<script src="vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition mode="out-in">
<component :is="type"></component>
<!-- <child v-if="show"></child>
<child-one v-else></child-one> -->
<!-- <div v-if="show" key="hello">hello word</div>
<div v-else key="bye">Bye word</div> -->
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</child>'
})
Vue.component('child-one', {
template: '<div>child-one</child>'
})
var vm = new Vue({
el: '#app',
data: {
// show: true
type: "child"
},
methods: {
handleClick: function () {
// this.show = !this.show
this.type = this.type === "child" ? "child-one" : "child"
}
}
});
</script>
</body>
</html>
Vue中同时使用过度和动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中同时使用过度和动画</title>
<script src="vue.js"></script>
<style>
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<transition-group>
<div v-for="item in list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<!-- 上面的<transition-group>相当于给每一个div外部加了一个transition -->
<!-- <transition>
<div>hello world</div>
</transition>
<transition>
<div>hello world</div>
</transition>
<transition>
<div>hello world</div>
</transition> -->
<button @click="handleBtnClick">add</button>
</div>
<script>
var count = 0;
var vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
handleBtnClick: function () {
this.list.push({
id: count++,
title: "hello world"
})
}
}
});
</script>
</body>
</html>
Vue中的动画封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中的动画封装</title>
<script src="vue.js"></script>
<style>
.v-enter {
opacity: 0;
}
.v-enter-active {
transition: opacity 3s;
;
}
.v-leave-to {
opacity: 0;
}
.v-leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<div id="app">
<fade :show="show">
<div>hello word</div>
</fade>
<fade :show="show">
<h1>hello word</h1>
</fade>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('fade', {
props: ["show"],
template: `
<transition @before-enter="handleBeforeEnter" @enter="handleEnter">
<slot v-if="show"></slot>
</transition>
`,
methods:{
handleBeforeEnter:function(el) {
el.style.color = "red";
},
handleEnter:function(el, done) {
setTimeout(() => {
el.style.color = 'green'
done()
}, 2000)
}
}
})
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
});
</script>
</body>
</html>
需要视频资料的老哥请留言
网友评论