1.写一个index.html页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>hello world</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var app=new Vue({
el:'#app',//限制vue实例的范围
data:{//定义数据
content:'hello world'
}
})
</script>
</body>
</html>
vue.js：引入js库
el:限制vue实例的范围
data:定义数据
{{content}}：引入绑定数据
2.改变页面内容
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>hello world</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var app=new Vue({
el:'#app',
data:{
content:'hello world'
}
})
setTimeout(function(){
app.$data.content="bye world"
},1000)
</script>
</body>
</html>
app.$data.content
app:vue实例
$data：data的对象
content：data对象里具体的数据
3.实现todolist
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>todolist</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
list:['第一','第二','第三','第四','第五'],
inputValue:"增加一条"
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue),
this.inputValue=""
}
}
})
</script>
</body>
</html>
v-for:将数据进行循环
item：循环的每一项
v-on：绑定事件
methods：事件的方法
v-model：数据双向绑定
4.MVVM模式
MVP：model-presenter-view(数据-逻辑模型-视图)
MVVM：Model-View-ViewModel
5.TodoList的前端组件化及组件之间传值
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>todolist组件之间传值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item
:content="item"
:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete">
</todo-item>
</ul>
</div>
<script>
/*--子组件-*/
var TodoItem={
props:['content','index'],
template:"<li @click='handleItemClick'>{{content}}</li>",
methods:{
handleItemClick:function(){
console.log('222')
this.$emit("delete",this.index)
console.log(this.index)
}
}
}
/*--父组件-*/
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:['第一','第二','第三','第四','第五'],
inputValue:"增加一条"
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=""
},
handleItemDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
注：@delete
Vue.component:创建全局化的组件
<todo-item>：组件的模板
v-bind（:）：传入绑定值
props：接收内容
v-on(@):监听事件
【1】v-for循环list的内容item，并通过v-bind用content绑定item，并传递给<todo-item>,再用props接收content值，在template中以插值表达式{{content}}渲染出来；
$emit:触发事件
5.2.Vue实例
var vm=new Vue({
})
每个组件都是一个实例，vue页面由许多实例组成
6.生命周期函数
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Vue实例生命周期函数</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">Vue实例生命周期函数</div>
<script>
var vm=new Vue({
el:"#app",
template:"<div>{{test}}</div>",
data:{
test:"Vue实例生命周期函数x"
},
beforeCreate:function(){
console.log("beforeCreate")
},
created:function(){
console.log("Created")
},
//数据传递
beforeMount:function(){
console.log(this.$el)
},
mounted:function(){
console.log(this.$el)
},
//vm.$destroy()销毁
beforeDestroy:function(){
console.log("beforeDestroy")
},
destroyed:function(){
console.log("Destroyed")
},
//vm.test="dell"改变数据
beforeUpdate:function(){
console.log("beforeUpdate")
},
updated:function(){
console.log("updated")
},
})
</script>
</body>
</html>
生命周期：vue实例在某一时间点会自动执行的函数
beforeCreate:初始化事件和生命周期创建结束之后
Create:数据的外部注入和双向绑定之后
beforeMount:模板和数据结合，即将加载到页面之前
Mount:页面加载之后
beforeUpdate：数据更改，重新渲染之后
Update：数据更改，渲染完之后
beforeDestroy：组件销毁之前
Destroy：组件销毁之后
7.模板语法
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Vue模板语法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div id="vw" >{{name+" ——id"}}</div>
<div v-text="name+' ——text'"></div>
<div v-html="name+' ——html'"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"<h1>这里是模板语法，注意区分区别</h1>"
},
})
</script>
</body>
</html>
8.计算属性和侦听器
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Vue计算属性，方法与监听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--方法没有缓存-->
<!--fullName()-->
<!--计算属性有缓存-->
{{fullName}}
{{age}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:"周",
lastName:"假伦",
age:"18",
},
//计算属性
computed:{
fullName:function(){
console.log('计算了一次computed')
return this.firstName+""+this.lastName
}
},
//方法
//methods:{
// fullName:function(){
// console.log("计算了1次")
// this.firstName+""+this.lastName
//}
//},
//监听器
watch:{
firstName:function(){
console.log('计算了1次first')
this.fullName=this.firstName+""+this.lastName
},
lastName:function(){
console.log('计算了1次last')
this.fullName=this.firstName+""+this.lastName
}
}
})
</script>
</body>
</html>
computed:计算属性，内置缓存（避免多次计算，优化页面性能）
watch：侦听器，侦听数据改变，则出发方法
watch和computed都有内置缓存属性，computed更加简洁，效率高
9.计算属性setter&getter
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Vue计算属性setter&getter</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstName:"周",
lastName:"假伦",
},
//计算属性--依赖的值变化，就会重新计算
computed:{
fullName:{function(){
get:function(){
return this.firstName+""+this.lastName
},
set:function(value){
var arr=value.splice("")
this.firstName=arr[0]
this.lastName=arr[1]
console.log(value)
}
}
}
},
})
</script>
</body>
</html>
方法中
get：取属性值时候会执行（其所依赖的值变化后，会重新计算）
set：设置属性值时会执行
10.列表渲染
<head>
<meta charset="utf-8" />
<title>列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!--单组数组循环-->
<h1>【单组数组循环】</h1>
<div v-for="(item,index) in list" key="item.id">
[text:]{{item.text}}——[index:]{{index}}——[id:]{{item.id}}
</div>
<!--多组数组循环-template模板占位符-->
<h1>【多组数组循环-template模板占位符】</h1>
<template v-for="(item,index) in list" key="item.id">
<p>[text:]{{item.text}}——[index:]{{index}}</p>
<span>[id:]{{item.id}}</span>
</template>
<!--对象循环-->
<h1>【对象循环】</h1>
<div v-for="(item,key,index) in userInfo">
[item:]{{item}}——[key:]{{key}}——[index:]{{index}}</div>
</div>
<script>
//push pop(删除最后一项) shift(删除第一项) unshift（第一项里加内容）
//splice sort（排序） reverse（取反）
var vm=new Vue({
el:"#app",
data:{
list:[{
id:"001",
text:"你看"
},
{
id:"002",
text:"这碗面"
},
{
id:"003",
text:"又长"
},
{
id:"004",
text:"又短"
},
{
id:"005",
text:"又辣"
},
{
id:"006",
text:"又香"
},
{
id:"007",
text:"又甜"
}
],
userInfo:{
name:"黄李馨萱",
age:"18",
gender:"male",
salary:"$100000"}
},
})
</script>
</body>
</html>
<template>:模板占位符
11.条件渲染
<head>
<meta charset="utf-8" />
<title>条件渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show==='a'" data-test="v-if">用户名<input key="un"/></div>
<div v-else-if="show==='b'" data-test="v-else-if">密码<input key="pw"/></div>
<div v-else data-test="v-else">邮箱<input key="mail"/></div>
<!--<div v-else="show" data-test="v-else">others</div>-->
<div v-show="show" data-test="v-show">{{message}}</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
show:'a',
message:"h w"
},
})
</script>
</body>
</html>
v-if：变量值为false，dom就删除了；
v-else-if
v-else
v-show：变量值为false，dom只是隐藏，并没有删除；所以需要频繁变动，v-show页面性能更高
12.样式绑定
<head>
<meta charset="utf-8" />
<title>样式绑定</title>
<script src="./vue.js"></script>
<style>
.activated{color:#ff0000;}
</style>
</head>
<body>
<div id="app">
<div :class="{activated:isActivated}" @click="handleDivClick">{{content}}
</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
content:"出现吧，神龙！",
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated=true
}
}
})
</script>
</body>
</html>
data:{isActivated:false}
class="{activated:isActivated}"
@click
13.模板中的is属性
虽然符合Vue模板，但不符合H5规则
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件使用中的细节</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<!--<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>-->
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',
{
template: "<tr><td>this is a row</td></tr>"
}
)
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
所以我们需要用到模板中的is属性。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件使用中的细节</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<!--<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<row></row>
<row></row>
<row></row>-->
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',
{
template: "<tr><td>this is a row</td></tr>"
}
)
var vm = new Vue({
el: "#root"
})
</script>
</body>
</html>
<tr is="row"></tr>而非<row></row>
14.模板子组件中的data定义
子组件中，data必须是函数，因为可能被调用多次，函数能避免重复和冲突
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件中赋值方法</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',
{ data: {
content:"this is a row"
}，
template: "<tr><td>{{content}}</td></tr>"
}
)
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
- 通过ref引用来操作dom
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件中ref引用</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div ref="hello" @click="handleClick">ref引用</div>
</div>
<script>
var vm = new Vue({
el: "#root",
methods: {
handleClick: function () {
//vue中所有引用中叫做hello的引用
console.log(this.$refs.hello.innerHTML)
}
}
})
</script>
</body>
</html>
<div ref="hello":引用名为hello的dom
this.$refs.hello.innerHTML：在方法中引用dom节点进行操作
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件中ref引用</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter', {
template: '<div @click="handleClick">{{number}}</div>',
data: function () {
return {
number:0
}
},
methods: {
handleClick: function () {
this.number++
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#root',
data: {
total:0
},
methods: {
handleChange: function () {
// console.log("change")
// console.log(this.$refs.one.number)
this.total=this.$refs.one.number+ this.$refs.two.number
}
}
})
</script>
</body>
</html>
点击后触发handleClick，数字递增并$emit（’change‘）触发change属性，其绑定的handleChange被触发。
然后通过$ref获取dom节点元素，进行total相加减。
16.父子组件之间的传值
父组件通过属性向子组件传值;
子组件通过事件触发向父组件传值；
单项数据流：父组件可以向子组件传递任何数据，
子组件不能改变父组件传递过来的数据，可以通过拷贝副本来实现修改，
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>父子组件传值</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!---加冒号是数字，不加则是字符串--->
<!---父组件监听从子组件传过来的事件inc--->
<counter :count="3" @inc="handleIncrease"></counter>
<counter :count="2" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props: ['count'],
//子组件data必须是函数
data: function () {
return {
//复制父组件传递过来的count数据，命名为number
number:this.count
}
},
//template: '<div @click="handleClick">{{count}}</div>',
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function () {
//子组件不能随意改变父组件的数据，要通过拷贝副本了来实现
// this.count++
// this.number++
this.number=this.number+1
// 子组件通过触发change事件向父组件传值，并传递一个自己决定的参数数字
this.$emit('inc',1)//
}
}
}
var vm = new Vue({
el: '#root',
data: {
total:5
},
components: {
counter: counter
},
methods: {
handleIncrease: function (step) {
console.log(step)
this.total+=step
}
}
})
</script>
</body>
</html>
count="1": 字符串
:count="1": 数字
:count="1"：父组件通过属性向子组件传值
props:子组件接收父组件的值
inc（随机命名）：子组件像父组件传递这个事件，监听后进行传值
step（随机命名）：接收传递来的数据
17.组件参数校验与非props特性
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件参数校验与非props特性</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--String-->
<!--<child content="hello world"></child>-->
<!--Number-->
<!----<child :content="123"></child>-->
<child content="hel"></child>
</div>
<script>
Vue.component('child', {
// props: ['content'],
//组件参数验证
props: {
// content:String限定传递过来的数据类型
// content:Number
// content:[String,Number]
content: {//限定数据类型并限制大小
type: String,
// required: true,是否接受
// default: 'default value',如果不传content，就会给你一个默认值，页面就显示这个default value
validator: function (value) {//要求传入的内容的值必须大于5
return (value.length>5)
}
}
},
template: '<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
</html>
props特性：父组件向子组件传值时，子组件恰好声明了接收；其传递的值不会在dom标签上显示；子组件可以直接使用父组件传来值在模板里面使用。
非props特性：父组件向子组件传值时，子组件没有声明接收；子组件中也无法使用传来的值；其传递的值会在dom标签上显示。
18.给组件绑定原生事件
@click.native直接一次性监听触发handleclick事件
<head>
<meta charset="utf-8" />
<title>给组件绑定原生事件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--@click.native是原生事件-->
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>',
})
var vm = new Vue({
el: "#root",
methods: {
/*监听自定义事件*/
handleClick: function () {
console.log('handleClick')
},
}
})
</script>
</body>
</html>
下面写法要监听两次，甚至可以不看
这样要
<head>
<meta charset="utf-8" />
<title>给组件绑定原生事件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div @click="handleChildClick">child</div>',
methods: {
//监听原生事件
handleChildClick: function () {
console.log('handleChildClick')
//子组件触发父组件自定义事件用$emit
this.$emit('click')
}
}
})
var vm = new Vue({
el: "#root",
methods: {
/*监听自定义事件*/
handleClick: function () {
console.log('handleClick')
},
}
})
</script>
</body>
</html>
@click.native直接一次性监听触发handleclick事件
19.非父子组件之间的传值(Bus/总线、发布订阅模式、观察者模式)
<head>
<meta charset="utf-8" />
<title>非父子组件之间的传值(Bus/总线、发布订阅模式、观察者模式)</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!---这里是两个子组件，它们之间进行传值-->
<child content="Dell"></child>
<child content="Lee"></child>
</div>
<script>
Vue.prototype.bus=new Vue()
Vue.component('child', {
data: function () {
return {
selfContent:this.content
}
},
props: {
content: String
},
template: '<div @click="handleClick">{{selfContent}}</div>',
methods: {
handleClick: function () {
// console.log(this.content)
this.bus.$emit('change',this.selfContent)
}
},
mounted: function () {
var _this=this
//监听change事件
this.bus.$on('change', function (msg) {
console.log(msg)
_this.selfContent=msg
})
}
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
Vue.prototype.bus=new Vue()：在vue的类上挂了bus属性，下面的vue实例就会拥有这个属性。
子组件模板中定义点击事件handleClick，其被点击后，
通过 this.bus.$emit触发change事件并传递this.selfContent的值，
在钩子函数mounted下通过this.bus.$on监听change事件，
触发后返回一个selfContent的值，在子组件data里面接收并拷贝，就可以带入模板，达到了改变内容的目的
20.Vue中的作用域插槽
<head>
<meta charset="utf-8" />
<title>Vue中的作用域插槽</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child>
<!--作用域插槽：template开头结尾，声明从子组件接受的数据放在那里（props）,模板的展示方式（li）；
使用场景：子组件循环或某部分dom结构由外部传递过来时候-->
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3, 4]
}
},
template: '<div><ul><slot v-for="item of list" :item=item>{{item}}</slot></ul></div>'
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
作用域插槽：template开头结尾，声明(slot-scope)从子组件接受的数据放在那里（props）,模板的展示方式（li）；
使用场景：子组件循环或某部分dom结构由外部传递过来时候
<slot>：
21.动态组件与v-once指令
toggle效果
<head>
<meta charset="utf-8" />
<title>动态组件与v-once指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<child-one v-if='type==="child-one"'></child-one>
<child-two v-if='type==="child-two"'> </child-two>
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one', {
template: '<div>child-one</div>'
})
Vue.component('child-two', {
template: '<div>child-two</div>'
})
var vm = new Vue({
el: "#root",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})
</script>
</body>
</html>
【动态组件】
<head>
<meta charset="utf-8" />
<title>动态组件与v-once指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--<child-one v-if='type==="child-one"'></child-one>
<child-two v-if='type==="child-two"'> </child-two>-->
<component :is="type"></component>
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component('child-one', {
template: '<div>child-one</div>'
})
Vue.component('child-two', {
template: '<div>child-two</div>'
})
var vm = new Vue({
el: "#root",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function () {
this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
}
}
})
</script>
</body>
</html>
toggle效果：点击按钮，如果是child-one则把对应的child-one销毁，创建child-two，然后如果是child-two就把它销毁，创建一个child-one；这样非常消耗性能
v-once动态组件：点击按钮，如果是child-one则把对应的child-one放到内存里，等从child-two换回来时候，从内存里拿出来就可以，然后把child-two放入内存，这样比toggle效果的性能要好
22.Vue中的CSS动画原理
<html>
<head>
<meta charset="utf-8" />
<title>Vue中的CSS动画原理</title>
<script src="./vue.js"></script>
<style>
.fade-enter {
opacity: 0
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
.fade-enter {
opacity: 0
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to {
opacity: 0
}
.fade-leave-active {
transition: opacity 3s;
}
23.Vue中使用animate.css
【在Vue中使用keyframes】
<html>
<head>
<meta charset="utf-8" />
<title>Vue中使用animate.css库</title>
<script src="./vue.js"></script>
<style>
@keyframes bounce-in {
0% {
transform: scale(0)
}
50% {
transform: scale(1.5)
}
100% {
transform: scale(1)
}
}
.enter {
transform-origin: left center;
animation: bounce-in 3s;
}
.leave {
transform-origin: left center;
animation: bounce-in 3s reverse;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade" enter-active-class="enter" leave-active-class="leave">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
【Vue中使用animate.css】
<html>
<head>
<meta charset="utf-8" />
<title>Vue中使用animate.css库</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<div id="root">
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
<transition name="fade" enter-active-class="enter" leave-active-class="leave">
在@keyframes中定义名为bounce-in的动画，在下面enter等class中调用
enter-active-class=“enter”们为enter-active命名，可以明确作用域；
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
24.Vue中同时使用过渡和动效
<html>
<head>
<meta charset="utf-8" />
<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 5s;
}
</style>
</head>
<body>
<div id="root">
<!--type设定时长的参照标准type="transition"--:duration直接规定动画秒数:duration="5000"-->
<transition name="fade"
:duration="{enter:5000,leave:10000}"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated shake">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
<transition name="fade"
:duration="{enter:5000,leave:10000}"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated shake">
<div v-if="show">hello world</div>
appear：初始渲染的过度（第一次显示时候的效果，一般第一次就是页面初次渲染的时候）
</transition>
25.Vue中Js动画与velocity.js的结合
<html>
<head>
<meta charset="utf-8" />
<title>Vue中Js动画与velocity.js的结合</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
</head>
<body>
<div id="root">
<transition name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
},
handleBeforeEnter: function (el) {
el.style.opacity = 0
},
handleEnter: function (el, done) {
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
},
handleAfterEnter: function (el) {
console.log('动画结束')
}
}
})
</script>
</body>
</html>
el:被动画包裹的标签
done:一个回调函数
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
complete: done：当 Velocity执行完动画后，complete对应的函数会被执行，即done这个回调函数会被执行
26.Vue中多个元素和组件的过渡
<html>
<head>
<meta charset="utf-8" />
<title>Vue中多个 元素和组件的过渡</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
<style>
.v-enter, .v-leave {
opacity: 0
}
.v-enter-active, .leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
<div id="root" mode="in-out">
<transition>
<div v-if="show" key="'hellow">hellow world</div>
<div v-else track-by="bye">bye world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
26.Vue中多个元素和组件的过渡
【多个元素过渡】
<html>
<head>
<meta charset="utf-8" />
<title>Vue中多个 元素和组件的过渡</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
<style>
.v-enter, .v-leave {
opacity: 0
}
.v-enter-active, .leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
<div id="root" mode="in-out">
<transition>
<child v-if="show"></child>
<child-one v-else></child-one>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>'
})
Vue.component('child-one', {
template: '<div>child-one</div>'
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
【多个组件过渡1】
<html>
<head>
<meta charset="utf-8" />
<title>Vue中多个 元素和组件的过渡</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
<style>
.v-enter, .v-leave {
opacity: 0
}
.v-enter-active, .leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
<div id="root" mode="in-out">
<transition>
<child v-if="show"></child>
<child-one v-else></child-one>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>'
})
Vue.component('child-one', {
template: '<div>child-one</div>'
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
【多个组件过渡2】
<html>
<head>
<meta charset="utf-8" />
<title>Vue中多个 元素和组件的过渡</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
<style>
.v-enter, .v-leave {
opacity: 0
}
.v-enter-active, .leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
<div id="root" mode="in-out">
<transition>
<component :is="type"></component>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child', {
template: '<div>child</div>'
})
Vue.component('child-one', {
template: '<div>child-one</div>'
})
var vm = new Vue({
el: "#root",
data: {
/* show: true*/
type: 'child'
},
methods: {
handleClick: function () {
this.type = this.type === 'child' ? 'child-one' : 'child'
},
}
})
</script>
</body>
</html>
mode="in-out"：in-out 先显示再隐藏，out-in先隐藏 再显示
27.Vue中的列表过渡
<html>
<head>
<meta charset="utf-8" />
<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="root">
<transition-group>
<div v-for="item of list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleBtnClick">add</button>
</div>
<script>
var count = 0;
var vm = new Vue({
el: "#root",
data: {
list: []
},
methods: {
handleBtnClick: function () {
this.list.push({
id: count++,
title: 'hellow world'
})
}
}
})
</script>
</body>
</html>
<transition-group>:过渡包裹标签
28.Vue中的动画封装
[不带样式]
<html>
<head>
<meta charset="utf-8" />
<title>Vue中的动画封装</title>
<script src="./vue.js"></script>
<style>
.v-enter, .v-leave {
opacity: 0
}
.v-enter-active, .v-leave-active {
transition: opacity 1s
}
</style>
</head>
<body>
<div id="root">
<fade :show="show">
<div>hellow world</div>
</fade>
<fade :show="show">
<h1>hellow world</h1>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
//封装
Vue.component('fade', {
props: ['show'],
template: '<transition><slot v-if="show"></slot></transition> '
})
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleBtnClick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
[带样式]
<html>
<head>
<meta charset="utf-8" />
<title>Vue中的动画封装</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<fade :show="show">
<div>hellow world</div>
</fade>
<fade :show="show">
<h1>hellow world</h1>
</fade>
<button @click="handleBtnClick">toggle</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: "#root",
data: {
show: true
},
methods: {
handleBtnClick: function () {
this.show = !this.show
},
}
})
</script>
</body>
</html>
[不带样式] Vue.component写一个组件, 在里面写一个template: '<transition>模板,里面加入插槽<slot v-if="show">，接受变量props:['show']，根据props判断是否被显示；
在页面模板添加<fade show="show">标签。
[带样式] 用js，定义handleBeforeEnter，handleBeforeEnter，在其函数中增加样式效果。
