<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<div id="app">
<!-- Vue表单 -->
<form>
用户名：<input type="text" v-model="msg"/><br/>
性别：<input type="radio" value="0" v-model="gender"/>男 <input type="radio" value="1" v-model="gender">女<br/><br/>
<!--multiple 规定可同时选择多个选项 -->
<!-- 职业<select name="perfession" v-model="perfession" multiple> -->
职业<select name="perfession" v-model="perfession" multiple>
<option value="1">老师</option>
<option value="2">警花</option>
<option value="3">护士</option>
<option value="4">空姐</option>
</select><br/><br/>
爱好
<input type="checkbox" value="1" v-model="hobby"/>足球
<input type="checkbox" value="2" v-model="hobby"/>篮球
<input type="checkbox" value="3" v-model="hobby"/>台球
<input type="checkbox" value="4" v-model="hobby"/>网球
<input type="checkbox" value="5" v-model="hobby"/>羽毛球<br/><br/>
<!-- textarea 文本域 -->
简介<textarea name="intreduce" v-model="intreduce"></textarea><br/>
<!-- 取消默认事件 -->
<input type="submit" value="提交" @click.prevent="handle"/><br/><br/><br/>
</form>
<div>
<!-- 转换为数值 -->
<input type="text" v-model.number="msg1" /><br/>
<!-- 去除空格，不能去除中间的，只能取出两边的 -->
<input type="text" v-model.trim="msg1" /><br/>
<!-- 转换为change事件 失去焦点的时候触发-->
<input type="text" v-model.lazy="msg1" />{{ msg1 }}<br/>
<button @click="handle1">点我1</button>
</div>
<div>
<!-- 页面刷新获取焦点 -->
焦点在这<input type="text" v-fouce /><br/>
背景<input type="text" v-color="color" /><br/>
</div>
<div>
{{ info }}<br/>
<!-- 反转 -->
{{ info.split('').reverse().join('') }}<br/>
计算属性会缓存，第二次会执行第一次执行的结果<br/>
{{ reverseString }}<br/>
{{ reverseString }}<br/>
方法没有缓存，会执行两次<br/>
{{ reversehandle() }}<br/>
{{ reversehandle() }}
</div>
<div>
<input type="text" v-model="surname" />{{ surname }}<br/>
<input type="text" v-model="lastname" />{{ lastname }}<br/>
{{ name }}<br/><br/>
{{ watchDemo }}
</div>
</div>
<script type="text/javascript">
// 全局指令
Vue.directive('fouce', {
// 代表你所使用指令的本事 谁使用该指令el就代表谁
inserted:function(el){
el.focus();
}
})
// Vue.directive('color', {
// // 代表你所使用指令的本身 谁使用该指令el就代表谁
// inserted:function(el, binding){
// //bing.value拿使用这个指令的参数的值。在此，就是拿获得焦点的文本框里面指令里的color的值
// el.style.backgroundColor=binding.value;
// }
// })
new Vue({
el:"#app",
data:{
msg:"zhf",
gender:"1",
perfession:['1','2'],
hobby:['1','2'],
intreduce:"一句话介绍不了我",
msg1:"",
color:"blue",
info:"hello",
surname:"涂",
lastname:"图图",
name:"涂"+"---"+"图图"
},
methods: {
handle:function(){
console.log(this.intreduce)
},
handle1:function(){
// console.log(this.msg1+12)
console.log(this.msg1.length)
},
reversehandle:function(){
console.log("methods")
return this.info.split('').reverse().join('')
}
},
//局部 带参自定义指令
directives:{
color:{
inserted:function(el, binding){
//bing.value拿使用这个指令的参数的值。在此，就是拿获得焦点的文本框里面指令里的color的值
el.style.backgroundColor=binding.value;
}
}
},
// 计算属性 可以是模板更加简洁
computed: {
// 直接当做普通属性调用不加括号
// 任何data中数据变化立即重新计算
// 计算属性会缓存
reverseString:function(){
console.log("computed")
return this.info.split('').reverse().join('')
},
// 在计算属性里边 侦听
watchDemo:function(){
return this.surname+"---"+this.lastname
}
},
// 侦听器
watch: {
surname:function(val){//这里val代表你侦听的数据
this.name=val+"----"+this.lastname;
},
lastname:function(val){
this.name=this.surname+"-----"+val;
}
}
})
</script>
</body>
</html>
|
