进阶Vue.js第二讲
11, 使用transition-group元素实现列表动画
<style>
li{
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 13px;
}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
/* 删除动画
下面的v-move和v-leave-active配合使用，能够实现列表后续的元素，渐渐的漂上来的效果
*/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- <ul> -->
<!-- 在实现列表过渡的时候，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用transitino包裹
需要使用transition-group -->
<!-- 给transition-group标签添加appear属性，实现入场时候的效果 -->
<!-- 通过设置tag属性，指定transition-group渲染为指定的元素，如果不指定tag属性，默认渲染为span标签 -->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
<!-- </ul> -->
</div>
<script>
var app=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=""
},
del(i){ //删除也要实现动画
this.list.splice(i,1)
}
}
});
</script>
</body>
12, 为什么组件的data必须是一个function
<div id="app">
<test></test>
</div>
<template id="temp">
<div>
<input type="button" value="加一" v-on:click="increment">
{{count}}
</div>
</template>
<script>
//计数器组件，点击按钮，数量加一
var dataObj={count:0} //创建一个对象
Vue.component("test",{
template:"#temp",
data:function(){
return dataObj;
},
methods:{
increment(){
this.count+=1
}
}
})
var app=new Vue({
el:"#app"
});
</script>
13, 自定义按键修饰符
<div id="app">
<!-- 给input框绑定kekyup.enter事件，是输入值以后点击回车触发事件
keyup.13(键码)
-->
<!-- 输入框中输入信息回车弹出输入的信息 -->
<!-- <input type="text" v-model="message" v-on:keyup.enter="add()"> -->
<!-- 自定义全局按键修饰符 -->
<input type="text" v-model="message" v-on:keyup.f2="add()">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"12345"
},
methods:{
add:function(){
alert(this.message)
}
}
});
Vue.config.keyCodes.f2=113
</script>
14, 自定义全局指令让文本框获取焦点
<div id="app">
<!-- 设置颜色指令的第一种方式 -->
<!-- <input type="text" v-focus v-color> -->
<!-- 设置颜色指令的第二种方式 -->
<input type="text" v-focus v-color="'yellow'">
</div>
<script>
// 使用Vue.directive()定义全局的指令 v-focus
// 其中参数一：指令的名称，在定义的时候，指令名称前面不需要加“V-”前缀，但是，在调用的时候必须加上“V-”前缀来进行调用。
// 参数二：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段执行相关的操作。
Vue.directive("focus",{
bind:function(el){
// 每当指令绑定在元素上时，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数永远时el，表示被绑定了指令的那个元素，这个el参数，是个原生的js对象
//在元素刚绑定指令的时候，还没有查到dom中去，这时候调用focus方法不起作用
//因为一个元素只有插入dom之后才能获取焦点
// alert("我先出来然后才让你聚焦")
},
inserted:function(el){ //inserted表示元素插入到dom的时候会执行inserted函数（触发一次）
el.focus()
},
updated:function(){ //当vNode更新的时候会执行updated，可能会触发多次
}
})
//自定义一个设置字体颜色的指令
// 设置颜色指令的第一种方式
// Vue.directive("color",{
// bind:function(el){
// el.style.color="red" //和样式相关的操作，一般都可以在bind中执行
// }
// })
// 设置颜色指令的第二种方式
// 使用钩子函数的第二个参数binding拿到传递的值
Vue.directive("color",{
bind:function(el,binding){
el.style.color=binding.value
}
})
new Vue({
el:"#app"
});
</script>
15, 组件-创建组件的方式1
<div id="app">
<my-com1></my-com1>
</div>
<script>
//1.1 使用Vue.extend来创建全局的Vue组件
var com1=Vue.extend({
template:"<h3>这是使用Vue.extend创建的组件</h3>" //通过template属性，指定了组件要展示的html结构
})
//1.2 使用Vue.component("组件的名称",创建出来的组件模板对象)
//Vue.component定义全局组件的时候，组件名如果使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写，同时两个单词之间用“-”链接
Vue.component("myCom1",com1)
// 还可以这样写
// Vue.component("mycom",Vue.extend({
// template:"<h3>这是使用Vue.extend创建的组件</h3>"
// }))
var app=new Vue({
el:"#app"
});
</script>
16, 组件-创建组件的方式2
<div id="app">
<my></my>
</div>
<script>
Vue.component("my",{
//注意：不论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
template:"<div><h3>这是直接使用Vue.component创建出来的组件</h3><span>123</span></div>"
})
var app=new Vue({
el:"#app"
});
</script>
17, 组件-创建组件的方式3
<div id="app">
<mycom3></mycom3>
</div>
<div id="app2">
<login></login>
</div>
<!--在被控制的div外面使用template元素定义组件的html模板结构 -->
<template id="temp">
<div>
<h2>这是组件</h2>
<span>123</span>
</div>
</template>
<script>
Vue.component("mycom3",{
template:"#temp"
});
var app=new Vue({
el:"#app"
});
// 使用components属性定制私有组件
new Vue({
el:"#app2",
components:{
login:{
template:"<h3>定制私有组件</h3>"
}
}
});
</script>
18, 组件切换-方式1
<div id="app">
<a href="" @click.prevent="isShow=true">登陆</a>
<a href="" @click.prevent="isShow=false">注册</a>
<login v-if="isShow==true"></login>
<register v-if="isShow==false"></register>
</div>
<script>
Vue.component("login",{
template:"<h3>登陆模块</h3>"
});
Vue.component("register",{
template:"<h3>注册模块</h3>"
});
var app=new Vue({
el:"#app",
data:{
isShow:true
}
});
</script>
19, 组件切换-方式2
<div id="app">
<a href="" @click.prevent="comName='login'">登陆</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- vue提供了component 来展示对应的组件
component是一个占位符，:is属性可以用来指定展示的组件的名称-->
<component :is="comName">
</component>
</div>
<script>
Vue.component("login",{
template:"<h3>登陆模块</h3>"
});
Vue.component("register",{
template:"<h3>注册模块</h3>"
});
var app=new Vue({
el:"#app",
data:{
comName:"login" //当前component中的:is绑定的组件的名称
}
});
</script>
20, 组件切换动画
<style>
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登陆</a>
<a href="" @click.prevent="comName='register'">注册</a>
<!-- 实现动画就使用transition把组件包裹起来就好了，使用transition就需要上面那两组style样式 -->
<!-- 通过mode属性，设置组件切换时候的模式 -->
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
<script>
Vue.component("login",{
template:"<h3>登陆模块</h3>"
});
Vue.component("register",{
template:"<h3>注册模块</h3>"
});
var app=new Vue({
el:"#app",
data:{
comName:"login"
}
});
</script>
来源：https://blog.csdn.net/weixin_44001965/article/details/98752509