Vue全家桶笔记03(黑马vue)--Vue常用特性，表单输入绑定，表单域修饰符，自定义指令，计算属性，侦听器，过滤器，局部过滤器，带参数的过滤器，生命周期
1、常用特性概览
- 表单操作
- 自定义指令
- 计算属性
- 过滤器
- 侦听器
- 生命周期
2、表单输入绑定
- 使用v-mode绑定表单数据
- 使用@click绑定提交表单事件
<body>
<div id="app">
<form>
<div>
<span>姓名：</span><span><input type="text" v-model="uname"/></span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="1" v-model="gender"/><label for="male" >男</label>
<input type="radio" id="female" value="2" v-model="gender"/><label for="female">女</label>
</span>
</div>
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model="hobby" /><label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="hobby" /><label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobby" /><label for="code">写代码</label>
</div>
<div>
<span>职业：</span>
<select v-model="ocuupation" multiple="true">
<option value="0">请选择职业……</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea v-model="desc"></textarea>
</div>
<div>
<input type="submit" value="提交" @click="handle" />
</div>
</form>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
uname:"lisi",
gender:2,
hobby:['1','2','3'],
//ocuupation:2
ocuupation:['2'],
desc:'请输入'
},
methods:{
handle:function(index){
console.log(this.desc);
}
}
})
</script>
</body>
3、表单域修饰符
number：转化为数值
trim：去掉开始和结尾的空格
lazy：将input事件切换为change事件
语法：
<input v-model.number="age" type="number"/>
<body>
<div id="app">
<form>
<div>
<input v-model.number="age" type="number"/>
<input v-model.trime="uname" type="text"/>
<input v-model.lazy="uname" type="text"/>
</div>
<div>{
{
uname}}</div>
<div>
<input type="submit" value="提交" @click="handle" />
</div>
</form>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
age:30,
uname:''
},
methods:{
handle:function(index){
console.log(this.age+20);
console.log(this.uname);
}
}
})
</script>
</body>
4、自定义指令
自定义指令语法规则(获取元素焦点)
Vue.directive('focus',{
inserted：function(el){
//获得元素的焦点
el.focus();
}
}
自定义指令用法
<input typ="text" v-focus>
例子
<body>
<div id="app">
<form>
<div>
<input type="text" v-myfocus /><br/>
<input type="text" value="without fcoused"//>
</div>
</form>
</div>
<script type="text/javascript">
Vue.directive('myfocus',{
inserted:function(el){
//el为绑定的当前元素
el.focus();
}
});
var vm=new Vue({
el:"#app",
data:{
age:30,
uname:''
},
methods:{
handle:function(index){
console.log(this.age+20);
console.log(this.uname);
},
}
})
</script>
</body>
5、带参数的自定义指令
<body>
<div id="app">
<div v-mycolor='{mycolor:"orange"}'>带参数的自定义组件</div>
</div>
<script type="text/javascript">
Vue.directive('mycolor',{
//inserted为钩子函数，钩子函数还有bind，inserted，update，componentUpdated，unbind，这些钩子和事件很像
bind:function(el,binding){
//el为绑定的当前元素,赋值是通过第二个binding钩子函数的对象参数vlaue（元素指定的绑定值）值的键名来调用的
el.style.backgroundColor=binding.value.mycolor;
},
});
var vm=new Vue({
el:"#app",
data:{
age:30,
uname:''
},
methods:{
handle:function(index){
console.log(this.age+20);
console.log(this.uname);
},
}
})
</script>
</body>
也可以这么使用
<body>
<div id="app">
<div v-mycolor='mycolorValue'>带参数的自定义组件</div>
</div>
<script type="text/javascript">
Vue.directive('mycolor',{
//inserted为钩子函数，钩子函数还有bind，inserted，update，componentUpdated，unbind，这些钩子和事件很像
bind:function(el,binding){
//el为绑定的当前元素,赋值是通过第二个binding钩子函数的对象参数vlaue（元素指定的绑定值）值的键名来调用的
el.style.backgroundColor=binding.value.color;
},
});
var vm=new Vue({
el:"#app",
data:{
//这里的mycolorValue对应着binding.value
mycolorValue:{
color:'green'
}
},
methods:{
handle:function(index){
},
}
})
</script>
</body>
6、局部自定义指令
- 如果想注册局部指令，组件（vue的一个对象）中也接受一个directives的选项
- 局部组件只能在本组件中使用
directives：{
focus：{
//指定的定义
inserted：function(el){
el.focus();
}
}
}
<body>
<div id="app">
<div v-mynewcolor='mycolorValue'>带参数的自定义组件</div>
<div v-mynewwidth='mywidthValue'>带参数的自定义组件</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
//这里的mycolorValue对应着binding.value
mycolorValue:{
color:'yellow'
},
mywidthValue:{
width:'200px'
}
},
methods:{
handle:function(index){
},
},
//注册局部指令
directives:{
//此处请勿使用大小写混合
mynewcolor:{
//inserted为钩子函数，钩子函数还有bind，inserted，update，componentUpdated，unbind，这些钩子和事件很像
bind:function(el,binding){
//el为绑定的当前元素,赋值是通过第二个binding钩子函数的对象参数vlaue（元素指定的绑定值）值的键名来调用的
el.style.backgroundColor=binding.value.color;
}
}
},
directives:{
//此处请勿使用大小写混合
mynewwidth:{
//inserted为钩子函数，钩子函数还有bind，inserted，update，componentUpdated，unbind，这些钩子和事件很像
inserted:function(el,binding){
//el为绑定的当前元素,赋值是通过第二个binding钩子函数的对象参数vlaue（元素指定的绑定值）值的键名来调用的
el.style.width=binding.value.width;
}
}
}
})
</script>
</body>
7、计算属性–反转字符串
计算属性的用法
compute：{
reversedMessage：function（）{
return this.msg.split('').reversed().join('');
}
}
传统方法：
<body>
<div id="app">
<div>{
{
msg}}</div>
<div>{
{
msg.split('').reverse().join('')}}</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:'hello'
},
})
</script>
</body>
计算属性方式
<body>
<div id="app">
<div>{
{
reverseString}}</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:'hello'
},
computed:{
//这实际就是自定义了一个函数名
**加粗样式** reverseString:function(){
return this.msg.split('').reverse().join('');
}
}
})
</script>
</body>
8、计算属性与方法的区别
- 计算属性是基于他们的依赖（就是依赖的数据data）进行缓存的
- 方法不存在缓存
9、侦听器
- 侦听器的应用场景
数据变化时执行异步或者开销较大的操作
- 侦听器的用法
watch:{
firstName:function(val){
//val表示变化之后的值
this.fullName=val+' '+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+' '+val;
}
}
案例
<body>
<div id="app">
<div>
<input type="text" v-model='firstName'/><br/>
<input type="text" v-model='lastName' /><br/>
<span>{
{
fullName}}</span>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
firstName:'cathlin',
lastName:'wang',
fullName:'cathlin wang'
},
watch:{
//这里监听的名字（firstName）要和数据中的名字（firstName）一致
firstName:function(val){
//val表示变化之后的值
this.fullName=val+' '+this.lastName;
},
lastName:function(val){
this.fullName=this.firstName+' '+val;
}
}
})
</script>
</body>
使用计算属性也可以实现
10、计算属性与方法的区别
- 1、使用侦听器侦听用户名变化
- 2、调用后台接口进行验证
- 3、根据验证结果调整提示信息
- 4、需要修改触发的时间
<body>
<div id="app">
<div>
<!--这里修改了触发的事件，使用了lazy修饰符-->
<input type="text" v-model.lazy='uname'/><br/>
<span>{
{
tips}}</span>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
uname:'',
tips:''
},
methods:{
checkName:function(uname){
//调用接口，使用定时任务的方式模拟接口刁颖
var that = this;
setTimeout(function(){
//模拟接口调用
if('admin'==uname){
that.tips='用户名已经存在了';
}else{
that.tips='用户名可以使用'
}
},2000);
}
},
watch:{
uname:function(val){
//调用后台接口验证用户名的合法性
this.checkName(val);
//修改提示信息
this.tips='正在验证用户名'
}
}
})
</script>
</body>
11、过滤器
- 1、过滤器的作用是什么
格式化数据，比如将字符串格式化为大写字母，将日期格式化为指定格式等
- 2、自定义过滤器
Vue.filter('过滤器名称',function(value){
//过滤器业务逻辑
});
- 3、过滤器的使用
<div>{
{
msg | upper}}</div>//普通方式
<div>{
{
msg | upper |lower}}</div>//级联方式（链式调用）
<div v-bind:id="id | fromateEd"></div>//属性绑定过滤器
- 4、案例
<body>
<div id="app">
<input type="text" v-model="msg"/>
<div>{
{
msg | myUpper}}</div>
<div :abc='msg | myUpper'>测试数据</div>
</div>
<script type="text/javascript">
Vue.filter('myUpper',function(val){
//过滤器业务逻辑
//return val.toUpperCase();
return val.charAt(0).toUpperCase()+val.slice(1);//分割开再串联成一个字符串
});
var vm=new Vue({
el:"#app",
data:{
msg:''
}
})
</script>
</body>
12、局部过滤器
- 1、局部过滤器语法
filters:{
capitalize:function(val){
}
}
- 2、局部过滤器的使用和全局过滤器的使用一致
- 3、案例
<body>
<div id="app">
<input type="text" v-model="msg"/>
<div>{
{
msg | capitalize}}</div>
<div :abc='msg | capitalize'>测试数据</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:''
},
//局部过滤器
filters:{
capitalize:function(val){
return val.charAt(0).toUpperCase()+val.slice(1);//分割开再串联成一个字符串
}
}
})
</script>
</body>
13、带参数的过滤器
- 1、带参的语法
Vue.filter('mytimeFormat',function(value,arg){
//形参存在与arg中,可添加多个形参
if('yyyy-MM--dd'==arg){
var ret='';
ret+=value.getFullYear()+'年'+(value.getMonth()+1)+'月'+value.getDate()+'日';
return ret;
}
return value;
})
- 2、简单案例
<body>
<div id="app">
<div>{
{
date | mytimeFormat('yyyy-MM--dd')}}</div>
</div>
<script type="text/javascript">
Vue.filter('mytimeFormat',function(value,arg){
//形参存在与arg中,可添加多个形参
if('yyyy-MM--dd'==arg){
var ret='';
ret+=value.getFullYear()+'年'+(value.getMonth()+1)+'月'+value.getDate()+'日';
return ret;
}
return value;
})
var vm=new Vue({
el:"#app",
data:{
date:new Date()
},
})
</script>
</body>
14、生命周期
生命周期的主要阶段
- 1、挂载（初始化相关属性）
①beforeCreate
②created
③beforeMount
④mounted - 2、更新（元素或组件的变更操作）
①beforeUpdate
②updated - 3、销毁（销毁相关属性）
①beforeDestory
②destoryed