一、表单修饰符
1.lazy
不再对元素实时改变，而是change时才会实现双向绑定的效果
2.number
它并不限制用户的输入，而是强制指定数据类型为number
3.trim 过滤输入内容前后的空格
<div id="app">
<input type="text" v-model.lazy="msg" @input="input" @change="change">
<p>{{msg}}</p>
<hr>
<input type="number" v-model.number="num">
<button @click="getType">获取元素类型</button>
<hr>
<input type="text" v-model.trim="msg" @input="input">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'hello',
num:100
},
methods:{
input(){
// console.log('输入了内容')
console.log(this.msg)
},
change(){
console.log('changed')
},
getType(){
alert(typeof this.num)
}
}
})
</script>
二、过滤器
1.定义
（1）局部定义
在vue实例上通过filters来进行过滤器的定义
语法格式：
filters:{
过滤器名称(参数[,参数n...]){
return 对参数处理之后的结果
}
}
（2）全局定义
在实例化vue之前通过Vue.filter(过滤器名称,function(形参){...})
语法格式：
Vue.filter('过滤器名称',function(形参){
//对接收到的数据进行处理
return 返回处理之后的结果;
}
2.使用方式
在需要对数据进行处理时，通过|（管道符）过滤器名称来进行使用
3.注意事项
(1)时间戳的数据类型是数字而非字符串
(2)全局定义过滤器，注意过滤器名称是字符串，而非变量
(3)日期函数 new Date ，不是 new Data，其中new Date()不传参数时，是获取当前时间的日期信息，传参数时是获取指定时间戳的日期信息。
三、过渡动画
1.vue内置过渡动画类名
离开
v-leave 定义离开过渡的开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 定义离开过渡的结束状态
进入
v-enter 定义进入过渡的开始状态
v-enter-active 定义进入过渡生效时的状态
v-enter-to 定义进入过渡的结束状态
其中“v-“只对页面中没有name属性的标签起作用，如果指定了name属性，那么“v-”就应该换成"name属性-"
示例代码：
<style>
.box{
width: 100px;
height: 100px;
background: #f00;
position: relative;
left:100px;
top:50px;
}
.v-leave{
left:100px;
}
.v-leave-active{
transition:all 2s;
}
.v-leave-to{
left:1000px;
}
.v-enter{
left:800px;
}
.v-enter-active{
transition:all 2s;
}
.v-enter-to{
left:200px;
top:300px;
}
</style>
<div id="app">
<button @click="isShow=!isShow">点击我有惊喜</button>
<transition>
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:true
}
})
</script>
2.animate.css的使用
(1)下载并引入animate.css
(2)在需要使用动画的标签外面包含transition标签，在transition的开始标签上通过：
leave-active-class来控制标签离开时的动画效果
enter-active-class来控制标签进入时的动画效果
这两个属性的属性值中必须有animated属性值，这样动画才会有效果，具体需要用什么动画效果，只需要在animated后面跟上指定的动画效果名称即可。
示例代码：
<link rel="stylesheet" href="animate.css">
<body>
<div id="app">
<button @click="isShow=!isShow">点击我有惊喜</button>
<transition leave-active-class="animated fadeOutDown" enter-active-class="animated fadeInUp">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
new Vue({
el:"#app",
data:{
isShow:true
}
})
</script>
</body>
四、生命周期
钩子函数，满足一定场景会自动执行的函数
渲染期：
beforeCreate 创建之前 创建vue实例之前
created 创建完成 创建vue实例完成
beforeMount 挂载之前，把vue实例挂载到挂载点之前
mounted 挂载完成，把vue实例挂载到挂载点之后
更新期：
beforeUpdate 更新之前，对数据进行更新之前
updated 更新完成，对数据更新完成之后
beforeDestroy 销毁之前，销毁vue实例之前
destroyed 销毁完成，销毁vue实例完成，销毁之后，vue的语法就失效了。
示例代码：
<div id="app">
<input type="text" v-model.lazy="msg">
<h1>{{msg}}</h1>
</div>
<button class="xiaohui">销毁</button>
<button class="guazai">挂载</button>
<script>
var vue = new Vue({
el:"#app",
data:{
msg:'命是强者的谦辞，运是弱者的借口'
},
//渲染期
//创建完成
created(){
console.log("--------创建完成--------");
console.log(this.$el);
console.log(this.$data)
},
//创建之前
beforeCreate(){
console.log("--------创建之前--------");
console.log(this.$el);
console.log(this.$data)
},
//挂载之前
beforeMount(){
console.log("--------挂载之前--------");
console.log(this.$el);
console.log(this.$data)
},
//挂载完成 *****
mounted(){
console.log("--------挂载完成--------");
console.log(this.$el);
console.log(this.$data)
},
//更新期
beforeUpdate(){
console.log("--------更新之前--------");
console.log(this.$el);
console.log(this.$data)
},
//更新完成
updated(){
console.log("--------更新完成--------");
console.log(this.$el);
console.log(this.$data)
},
//销毁之前
beforeDestroy(){
console.log("--------销毁之前--------");
console.log(this.$el);
console.log(this.$data)
},
//销毁完成
destroyed(){
console.log("--------销毁完成--------");
console.log(this.$el);
console.log(this.$data)
}
})
var btn = document.querySelector(".xiaohui");
btn.onclick = function(){
//销毁vue实例
vue.$destroy();
}
var guazai = document.querySelector(".guazai");
guazai.onclick = function(){
vue.$mount('#app')
}
</script>
五、组件
组件是vue中的一个核心概念，主要作用是来显示页面内容，并提高组件的复用性。
(1)局部定义
在vue实例中通过components属性来注册组件
基本语法：
components:{
组件名称:{
template:'模板内容'
}
}
示例代码：
<div id="app">
<!-- 使用自定义组件 -->
<one></one>
</div>
<script>
new Vue({
el:"#app",
components:{
one:{
template:'<h1>这是第一个自定义组件</h1>'
}
}
})
</script>
注意：
组件的模板内容中只能有一个根标签
组件名称不能包含系统内容的关键词
需要先注册组件，然后才能在vue挂载点中使用
(2)结合template模板标签来定义组件
在vue中提供了一个template标签来承载组件的内容
示例代码：
<div id="app">
<two></two>
</div>
<template id="two">
<div>
<h1>这是第二个自定义组件</h1>
<!-- 使用组件的初始数据 -->
<p>{{msg}}</p>
</div>
</template>
<script>
new Vue({
el:"#app",
components:{
two:{
template:'#two',
data(){
return{
//组件的初始数据
msg:'hello'
}
}
}
}
})
</script>
