20201016王杉
学习内容:
1.使用原生实现双向绑定：
<body>
<!-- <div id="app">
</div> -->
<!-- 原生实现双向绑定效果 -->
<input type="text" id="inputMsg">
<h2 id="show"></h2>
<script>
var obj={};
var val="hanHan";//初始值
Object.defineProperty(obj,"val",{
//定义修改的对象的属性
get:function(){
return val;
},
set:function(value){
//定义value等于修改后的内容
val=value;
document.getElementById('show').innerHTML = value
}
});
//获取输入框的值
document.addEventListener('keyup',function(e){
obj.val = e.target.value
});
</script>
</body>
2.双向绑定的例子：
<div id="app">
<!-- 监听器当模型数据发生改变时自动执行的函数，只有在希望模型变化的时候，立即执行
一项操作的时候，才需要监视函数监视变量 -->
<input type="text" v-model="html">
<!-- 实现点击性别按钮下面显示你所选定的性别 -->
<input type="radio" v-model="sex" name="" value="1">男
<input type="radio" v-model="sex" name="" value="0">女
<div>你选择的性别是:{{sex==1?"男":"女"}}</div>
<!-- 选择城市下面显示所显示的城市 -->
<select name="" id="" v-model="selected">
<option value="">请选择城市</option>
<option value="成都">成都</option>
<option value="上海">上海</option>
<option >北京</option>
</select>
<div>你选择的城市是:{{selected}}</div>
<!-- 点击选择城市，显示对应图片 -->
<select name="" id="" v-model:value="src">
<option value="img/chengdu.jpg">成都</option>
<option value="img/shanghai.jpg">上海</option>
<option value="img/beijing.jpg">北京</option>
</select>
<!-- v-bind简写为 : -->
<img :src="src" alt="">
<!-- 用户登录界面点同意选项，才能点击注册 -->
<br>
<input type="text" placeholder="用户名"><br>
<input type="text" placeholder="密码"><br>
<input type="checkbox" v-model="isAgree">同意协议<br>
<input type="button" value="登录" :disabled="isAgree==false">
</div>
<script src="js/vue.js"></script>
<script>
var vm =new Vue({
el:'#app',
// 数据
data:{
html:"hello",
sex:0,
selected:"",
src:"",
isAgree:false,
},
//函数
methods: {
},
// 监视
watch: {
// 监视函数名字一定要和变量模型相同
html(){
console.log(this.html)
},
},
computed: {
},
});
</script>
3.style和class：
<body>
<div id="app">
<!-- 注意属性名中含有符号比如：-=+需要加""或''包裹住 -->
<p :style="{color:fontColor,'font-size':fontSize}">哈哈哈哈</p>
<!-- 即使有多个元素需要修改同意css属性时，因为不同的元素绑定的对象不同，
所以不同的对象内，是可以包含相同属性名的。避免多个css互相干扰 -->
<p :style="bgStyle">嘻嘻嘻</p>
<!-- class -->
<input type="text" placeholder="手机号" v-model="phone" @blur="vail">
<!-- 当手机号失去焦点的时候验证，输入的手机号是否正确 -->
<!-- onblur:失去焦点 -->
<br>
<span :class="{success:success,fail:fail}">{{msg}}</span>
<!-- span中显示手机的验证结果 msg -->
<!-- 注意：class名和变量名相同时，可以省略 -->
<!-- 起名冲突如果两个共用一个样式当一个发生更改另一个样式也会发生更改
解决：使用对象保存避免出现这种情况 -->
<br>
<input type="text" placeholder="请输入身份证后六位" v-model="num" @blur="cape">
<br>
<span :class="{success:success,fail:fail}">{{msg1}}</span>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
bgStyle:{
background:"#f0f",
},
fontColor:"#f00",
fontSize:"25px",
phone:'',
msg:'',
success:false,
fail:false,
num:'',
msg1:'',
success1:false,
fail1:false,
},
methods: {
vail(){
// console.log(this.phone)
//定义手机号的验证
var reg=/^1[3-9]\d{9}$/
//如果手机号验证通过，那么就为msg添加一个输出正确的内容
if(reg.test(this.phone)){
this.msg="√验证正确";
this.success=true;
this.fail=false;
}else{
this.msg="×请输入正确的手机号"
this.success=false;
this.fail=true;
}
},
cape(){
var reg=/^\d{5}[Xx0-9]$/
if(reg.test(this.num)){
this.msg="√验证正确";
this.success=true;
this.fail=false;
}else{
this.msg1="×请输入正确的身份证后六位"
this.success=false;
this.fail=true;
}
}
},
})
</script>
</body>
4.自定义指令：
<body>
<div id="app">
<!-- <p v-texts></p> -->
<p v-texts="{}"></p>
<input type="text" v-gets>
</div>
<script src="js/vue.js"></script>
<script>
//自定义指令 全局 不带参数的
// Vue.directive("texts",{
// inserted(el){
// //el 一个dom元素
// //el指向p元素
// el.innerHTML="皮皮过江,米粒哐哐";
// el.style.color = "#f00"
// }
// });
// 当传参时：
Vue.directive("texts",{
inserted(el,binding){
//el 一个dom元素
//el指向p元素
el.innerHTML="皮皮过江,米粒哐哐";
el.style.color = "#f00"
}
});
//实现一个自定义指令，页面初始化时，在输入框中获取光标的焦点
Vue.directive("gets",{
inserted(el){
el.focus();
}
});
// 原理：当new Vue()扫描到一个元素身上带有不认识的v-开头的指令，
//new Vue()就会在内存中，Vue大家庭中查找有没有同名的自定义指令，
//
var vm = new Vue({
el:"#app",
data:{
},
methods: {
},
})
</script>
</body>
学习心得：
今天学习了很多，不错！
评论