VUE基础学习笔记——02常用特性

一、表单操作

1、基于Vue的表单操作

• input 单行文本
• textarea 多行文本
• select 下拉多选
• radio 单选框
• checkbox 多选框

<div id="app">
	<form>
		<div>
			<input type="radio" id="male" value="1" v-model="gender">
			<label for="male">nan</label>
			<input type="radio" id="female" value="2" v-model="gender">
			<label for="female">nv</label>
		</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="ball">唱歌</label>
			<input type="checkbox" id="code" value="3" v-model="hobby">
			<label for="ball">写代码</label>
		</div>
		<div>
			<span>职业</span>
			<select v-model='occupation' multiple="true">
				<option value="0">请选择职业：</option>
				<option value="1">讲师</option>
				<option value="2">软件工程师</option>
				<option value="3">律师</option>
			</select>
		</div>
		<div>
			<span>个人简介：</span>
			<textarea></textarea>
		</div>
		<div>
			<input type="submit" value="提交" @click.prevent="handle"></div>
		</div>
	</form>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			uname:'list',
			gender:2,
			hobby:['2','3'],
			occupation:['2','3'],
		},
		methods:{
			handle:function(){
				console.log(this.hobby.toString())
			}
		}		
	})
</script>

2、表单域修饰符

---

• .number

---

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

---

• .trim

---

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<input v-model.trim="msg">

---

• .lazy

---

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步

<input v-model.lazy="msg">

二、自定义指令

1、自定义一个 全局指令 v-focus （当页面加载时，该元素将获得焦点）

<script type="text/javascript">
	Vue.directive('focus'{
		inserted: function(el){			//inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
			//获取元素的焦点
			el.focus();
		}
	})
</script>

2、带参数的自定义指令（改变元素背景色）

<script type="text/javascript">
	Vue.directive('color',{
		inserted: function(el,binding){
			el.style.backgroundColor=binding.value.color;
		}
	});
	var vm=new Vue({
		el:'#app',
		data:{
			msg:{
				color:'orange'
			}
		},
		methods:{
			handle:function(){
			}
		}
	})
</script>

3、自定义局部指令

如果想注册局部指令，组件中也接受一个 directives 的选项

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

4、钩子函数（参考官方文档）

三、计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

<div>{{reverseString}}</div>

var vm=new Vue({
	el:'#app',
	data:{
		msg:'hellow'
	},
	/************************/
	computed:{
		reverseString:function(){
			return this.msg.split('').reverse().join('');		// `this` 指向 vm 实例 反转字符串
		}
	}
});

四、侦听器

var vm=new Vue({
	el:'#app',
	data:{
		firstName:'Jim',
		lastName:'Green',
		fullName:'Jim Green'
	},
	//侦听器
	watch:{
		firstName:function(val){					//当firstName变化时，调用函数
			this.fullName=val+' '+this.lastName;	
		}
	}
})；

五、过滤器

//自定义过滤器
Vue.filter('过滤器名称',function(value){
	//过滤器业务逻辑
})

//过滤器使用
<div>{{msg|过滤器名称}}</div>
<div>{{msg|过滤器名称1|过滤器名称2}}</div>
<div v-bind：id="id|过滤器名称"></div>

//带参数的过滤器
Vue.filter('format',function(value,arg){
	
})

//使用
<div>{{data|fomat('yyyy-MM-dd')}}</div>

六、生命周期

选项 / 生命周期钩子