初学vue2
1.表单基本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<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="hobbies">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="hobbies">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobbies">
<label for="code">写代码</label>
</div>
<div>
<span>职业:</span>
<select multiple v-model="occupation">
<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="提交" v-on:click.prevent="handle">
</div>
</form>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
//
/*
表单基本操作
*/
var vm = new Vue({
el: '#app',
data: {
uname: 'lisi',
gender: 2,
hobbies: ['1', '2', '3'],
occupation: ['1', '2', '3'],
desc: '你好'
},
methods: {
handle() {}
}
});
</script>
</body>
</html>
2.表单域修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="" v-model.number="age">
<input type="text" id="" v-model.trim="info">
<input type="text" id="" v-model.lazy="msg">
<div>{{msg}}</div>
<button @click="handle">点击</button>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
age: '',
info: '',
msg: ''
},
methods: {
handle() {}
}
})
</script>
</body>
</html>
3.自定义指令
全局自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus>
<input type="text" v-focus>
</div>
<script src="../vue.js"></script>
<script>
//
/*
自定义指令
*/
Vue.directive('focus', {
inserted: function(el) {
// el表示指令绑定的元素
el.focus();
}
});
var vm = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-color="msg">
</div>
<script src="../vue.js"></script>
<script>
//
/*
自定义指令
*/
Vue.directive('color', {
bind: function(el, binding) {
//根据指令的参数设置背景色
console.log(binding);
console.log(binding.value.color);
// el.value = binding.value
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el: "#app",
data: {
msg: {
color: 'orange'
}
},
methods: {
}
})
</script>
</body>
</html>
局部自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-color="msg">
<input type="text" v-focus>
</div>
<script src="../vue.js"></script>
<script>
//
/*
自定义指令
*/
var vm = new Vue({
el: "#app",
data: {
msg: {
color: 'orange'
}
},
methods: {
},
directives: {
color: {
bind: function(el, binding) {
//根据指令的参数设置背景色
console.log(binding.value.color);
// el.value = binding.value
el.style.backgroundColor = binding.value.color
}
},
focus: {
inserted: function(el, binding) {
// console.log(1);
el.focus();
}
}
}
})
</script>
</body>
</html>
4、计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script src="../vue.js"></script>
<script>
//
/*
自定义指令
*/
var vm = new Vue({
el: "#app",
data: {
msg: '年后'
},
methods: {
},
directives: {
},
computed: {
reverseString: function() {
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
5、监听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>用户名:</span>
<span>
<input type="text" v-model.lazy="uname">
</span>
<span>{{tip}}</span>
</div>
</div>
<script src="../vue.js"></script>
<script>
//
/*
侦听器
1.侦听器监听用户名的变化
2.调用后台接口进行验证
3.根据验证结果调整提示信息
*/
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
checkName: function(uname) {
var that = this;
//调用接口 但是可以使用定时任务的方式模拟接口调用
setTimeout(function() {
//模拟接口调用
if (uname == "admin") {
that.tip = "用户已存在,请更换"
} else {
that.tip = "用户可以使用"
}
}, 2000)
}
},
watch: {
uname: function(val) {
//调用后台接口验证用户名的合法性
this.checkName(val);
//修改提示信息
this.tip = "正在验证"
}
}
}
)
</script>
</body>
</html>
6、过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{msg | upper}}</div>
<div>{{msg | upper |lower}}</div>
<div :abc="msg | upper">测试</div>
</div>
<script src="../vue.js"></script>
<script>
// Vue.filter('upper', function(val) {
// return val.charAt(0).toUpperCase() + val.slice(1);
// })
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
})
var vm = new Vue({
el: '#app',
data: {
msg: ""
},
filters: {
upper: function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
</script>
</body>
</html>
7、生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
Vue实例的生命周期
*/
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function() {
this.msg = 'hello';
},
destroy: function() {
this.$destroy();
}
},
beforeCreate: function() {
console.log('beforeCreate');
},
created: function() {
console.log('created');
},
beforeMount: function() {
console.log('beforeMount');
},
mounted: function() {
console.log('mounted');
},
beforeUpdate: function() {
console.log('beforeUpdate');
},
updated: function() {
console.log('updated');
},
beforeDestroy: function() {
console.log('beforeDestroy');
},
destroyed: function() {
console.log('destroyed');
}
});
</script>
</body>
</html>
8、变异方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>
<input type="text" v-model="fname">
<button @click='add'>添加</button>
<button @click="delete1">删除</button>
<button @click="change">替换</button>
</span>
</div>
<ul>
<li :key="index" v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fname: '',
list: ['apple', 'orange', 'banana']
},
methods: {
add: function() {
this.list.push(this.fname)
},
delete1: function() {
this.list.pop(this.fname)
},
change() {
this.list = this.list.slice(0, 1);
}
},
})
</script>
</body>
</html>
9、动态响应式数据处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li :key="index" v-for="(item,index) in list">{{item}}</li>
</ul>
<div>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.gender}}</div>
</div>
</div>
<script src="../vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
fname: '',
list: ['apple', 'orange', 'banana'],
info: {
name: 'list',
age: '12'
}
},
methods: {
},
})
vm.list[1] = 'lemon';
Vue.set(vm.list, 2, 'lemon');
vm.$set(vm.list, 1, 'lemon');
// vm.info.gender = 'male'
vm.$set(vm.info, 'gender', 'female')
</script>
</body>
</html>