<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<form>
用户名：<input type="text" v-model="msg"><br>
性 别：<input type="radio" name="sex" value="0" v-model="gender">男 <input type="radio" name="sex" v-model="gender" value="1">女<br>
<!-- multiple属性是一个布尔属性。 .multiple属性规定可同时选择多个选项 -->
职 业：<select name="perfession" v-model="perfession" multiple>
<option value="1">老师</option>
<option value="2">警察</option>
<option value="3">军人</option>
</select><br>
爱 好：<input type="checkbox" value="足球" v-model="hobby">足球
<input type="checkbox" value="蓝球" v-model="hobby">篮球
<input type="checkbox" value="网球" v-model="hobby">网球<br>
简 介：<textarea name="interduce" v-model="interduce"></textarea><br>
<input type="submit" value="提交" @click.prevent="handle">
</form>
<div>
<!-- v-model.trim 去除字符串前后的空格，中间的空额去不掉 -->
<!-- v-model.number 转化为数值 -->
<!-- v-model.lazy （失去焦点的时候触发） 将input事件换成change事件 -->
<input type="text" v-model.lazy="msg1">{{msg1}}<br>
<button @click="handle1">点1</button>
</div>
<div>
获得焦点<input type="text" v-color="color"><br>
<!-- <button @click="handle2">点2</button> -->
</div>
{{info}}
<!-- {{info.split('').reverse().join('')}} -->
{{reverseString}}
{{reverseString}}
{{reversehandle() }}
{{reversehandle() }}
<div>
<div>
<!-- 侦听当前的姓 -->
<input type="text" v-model="firstname"><br>
<input type="text" v-model="lastname"><br>
{{watchDemo}}
</div>
</div>
</div>
<script type="text/javascript">
/*Vue.directive('fouce',{
// el代表着所使用指令的本身 谁使用指令，el就代表谁
inserted:function(el,binding){
el.focus();
}
}
)
Vue.directive('color', {
inserted:function(el,binding){
// binding.value 拿使用这个指令 的参数值，在此，就是拿获得焦点的文本框里面指令的color的值
el.style.backgroundColor=binding.value;
}
})*/
new Vue({
el:"#app",
data:{
msg:"hehehe",
gender:"1",
perfession:['1','2'],
hobby:['足球','篮球'],
interduce:"sb",
msg1:"",
color:"red",
info:"hehehe",
firstname:"周",
lastname:"图图",
name:"周"+"---"+"图图"
},
methods: {
handle:function(){
console.log(this.interduce);
},
handle1:function(){
console.log(this.msg1+12);
},
reversehandle:function(){
console.log("methods");
return this.info.split('').reverse().join('')
}
},
directives: {
color:{
inserted: function(el,binding){
//el:指令绑定的元素
//binding.name指令名 binding.value绑定值 bingding.expression绑定至(字符串形式)
el.style.backgroundColor=binding.value;
}
}
},
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
reverseString:function(){
console.log("methods");
return this.info.split('').reverse().join('')
},
watchDemo:function(){
return this.firstname+"------"+this.lastname;
}
},
watch: {
// 要观察的对象(一般为非DOM事件):
//这里val代表着你侦听的数据
firstname:function(val){
this.fullname=val+"----"+this.lastname;
},
lastname:function(val){
this.fullname=this.firstname+"---"+val
}
},
})
</script>
</body>
</html>
|
