表单操作
- 元素操作
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<form>
<p>
<span>姓名</span><input type="text" v-model="name">
</p>
<p>
<input type="radio" name="sex" value="male" v-model="gender">Male
</p>
<p>
<input type="radio" name="sex" value="female" v-model="gender">Female
</p>
<p>
<span>爱好</span>
<input type="checkbox" v-model="hobby" value="baseketball"><span>篮球</span>
<input type="checkbox" v-model="hobby" value="music"><span>音乐</span>
<input type="checkbox" v-model="hobby" value="football"><span>足球</span>
</p>
<p>
<select>
<option>请选择技能...</option>
<option value ="css">css</option>
<option value ="javascript">javascript</option>
<option value="html">html</option>
</select>
</p>
<textarea v-model="desc"></textarea>
</form>
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
name:'nianyuyu',
gender:'female',
hobby:['baseketball','music','football'],
desc:'hello world'
}
});
</script>
</body>
</html>
- 表单域修饰符
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>
<span>输入数字：</span><input type="text" v-model.number="age">
</p>
<button @click="handleClick1">计数</button>
<p>
<span>输入文本：</span><input type="text" v-model.trim="text1">
</p>
<button @click="handleClick2">计算字符数</button>
<p>
<span>输入文本：</span><input type="text" v-model="text2">
</p>
<button @click="handleClick3">计算字符数</button>
<p>
<span>输入文本：</span><input type="text" v-model="text3">
</p>
<div>{{text3}}</div>
<p>
<span>输入文本：</span><input type="text" v-model.lazy="text4">
</p>
<div>{{text4}}</div>
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
age:22,
text1:'hello world',
text2:'hello wo rld',
text3:'apple',
text4:'apple'
},
methods:{
handleClick1:function(){
this.age = this.age+13;
},
handleClick2:function(){
console.log(this.text1.length);
},
handleClick3:function(){
console.log(this.text2.length);
},
handleClick4:function(){
console.log(this.text3);
}
}
});
</script>
</body>
</html>
自定义指令
- 不带参数的全局自定义指令
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>
<!--
v-focus 使用自定义指令
-->
<input type="text" v-model="text" v-focus>
</p>
</div>
<script>
// 不带参数的自定义指令的语法规则
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
var vm = new Vue({
el:'#hello',
data:{
text:''
},
});
</script>
</body>
</html>
- 带参数的全局自定义指令
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>
<!--
v-focus 使用自定义指令
-->
<input type="text" v-model="text" v-color='{color:"orange"}'>
<input type="text" v-model="text" v-color='msg'>
</p>
</div>
<script>
// 带参数的自定义指令的语法规则
Vue.directive('color',{
bind:function(el,binding){
console.log(binding); // object
el.style.backgroundColor = binding.value.color
}
})
var vm = new Vue({
el:'#hello',
data:{
text:'hello world',
msg:{
color:'red'
}
},
});
</script>
</body>
</html>
- 局部自定义指令
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>
<!--
v-focus 使用自定义指令
-->
<input type="text" v-model="text" v-focus>
</p>
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
text:'hello world',
msg:{
color:'red'
}
},
// 局部自定义属性
directives:{
focus:{
inserted:function(el){
el.focus()
}
}
}
});
</script>
</body>
</html>
计算属性
-
为什么需要计算指令
表达式的计算逻辑可能会比较复杂，使用计算指令可以使模板内容更加简洁。 -
使用计算指令
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<p>{{msg}}</p>
<!--
使用计算指令
-->
<p>{{reverseFunction}}</p>
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
msg:'helloWorld',
},
computed:{
reverseFunction:function(){
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
- 计算指令与方法的区别
计算属性：计算属性是基于它们的依赖进行缓存的
方法：方法不存在缓存
<!DOCTYPE html>
<head>
<style></style>
<title>选项卡</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<!--
注意两者的调用区别
-->
<p>{{reverseFunction}}</p>
<p>{{reverseFunction}}</p>
<p>{{reverseMsg()}}</p>
<p>{{reverseMsg()}}</p>
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
msg:'helloWorld',
},
methods:{
reverseMsg:function(){
console.log("方法"); // 方法不存在缓存
return this.msg.split('').reverse().join('');
}
},
computed:{
reverseFunction:function(){
console.log("计算属性") // 计算属性是基于他们的依赖进行缓存的
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
过滤器
-
什么是过滤器
-
过滤器的使用场景
格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等 -
带参数的过滤器
<!DOCTYPE html>
<head>
<style></style>
<title>监听器</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<!--
过滤器的使用，|分隔，可以使用多个
-->
<div>{{msg | upper | lower}}</div>
</div>
<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:'#hello',
data:{
userName:'',
msg:'hello',
},
});
</script>
</body>
</html>
- 带参数的过滤器
<!DOCTYPE html>
<head>
<style></style>
<title>监听器</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<!--
监听器的使用，|分隔，可以使用多个
-->
<div>{{msg | upper('abc') | lower}}</div>
</div>
<script>
Vue.filter('upper',function(val,args){
console.log(args); //abc
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:'#hello',
data:{
userName:'',
msg:'hello',
},
});
</script>
</body>
</html>
侦听器
- 什么是侦听器
- 侦听器的应用场景
数据变化时执行异步或开销较大的操作
<!DOCTYPE html>
<head>
<style></style>
<title>项目2：监听器校验用户名</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="hello">
<input type="text" v-model="userName">
{{msg}}
</div>
<script>
var vm = new Vue({
el:'#hello',
data:{
userName:'',
msg:'',
},
methods:{
checkName:function(userName){
var thisValue = this;
// 模拟异步调用
setTimeout(function(){
if(userName == 'admin') {
thisValue.msg = "该用户名已经注册"
}else {
thisValue.msg = "该用户名可以使用"
}
},2000);
}
},
watch:{
userName:function(val){
this.checkName(val);
this.msg = "正在校验"
},
}
});
</script>
</body>
</html>
1270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
