①. 表单操作
①. 表单基本操作
<!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"> <!--1、两个单选框需要同时通过v-model双向绑定 一个值 2、每一个单选框必须要有value属性且value值不能一样 3、当某一个单选框选中的时候v-model会将当前的 value值改变data中的数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 --> <div>单选框.......</div> <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> <!--1、复选框需要同时通过v-model双向绑定一个值 2、每一个复选框必须要有value属性且value值不能一样 3、当某一个单选框选中的时候 v-model会将当前的 value值改变data中的数据 hobby的值就是选中的值,我们只需要实时监控他的值就可以了 --> <div>复选框.......</div> <input type="checkbox" id="ball" value="1" v-model="hoddy"> <label for="ball">打篮球</label> <input type="checkbox" id="sing" value="2" v-model="hoddy"> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model="hoddy"> <label for="code">写代码</label> <div>下拉框.......</div> <!-- 多选需要加上 multiple="true" --> <select v-model="citys" multiple="true"> <option value="">请选择城市</option> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="yueyang">岳阳</option> </select> <div>文本域.......</div> <textarea cols="30" rows="10" v-model="desc"></textarea> <button @click="handle()">submit</button> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ // 默认会让当前的 value 值为 2 的单选框选中 gender:2,//radio // 默认会让当前的 value 值为 2 和 3 的复选框选中 hoddy:['2','3'], //citys:"shanghai" //单个选择 citys:["shanghai","yueyang"],//选择多个 需要在select中添加multiple=true desc:"xiaozhinihao" }, methods:{ handle:function(){ //如果是数组,想直接获取到里面的值打印出来,需要加上toString() //console.log(this.citys);//Array [ "shanghai", "yueyang" ] //console.log(this.citys.toString());//shanghai,yueyang } } }); </script> </body> </html>
②. 表单修饰符
- ①. .number 转换为数值
当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值
所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串
②. .trim 自动过滤用户输入的首尾空白字符(只能去掉首尾的 不能去除中间的空格)
③. .lazy 将input事件切换成change事件
.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change事件上
在失去焦点 或者 按下回车键时才更新
v-model默认input事件为change事件(失去焦点才触发)
<!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.number="msg"> <!-- 去空格是去除的前后两端的空格,在input框中输入空格(前后),可以给你去除 --> <input type="text" v-model.trim="msg2"> <h4>修饰符lazy</h4> <!-- .lazy修饰符修改input触发为change触发 没有加上lazy之前,当input框中内容发生改变,那么data中的数据也会随着改变 加了lazy之后,只有当你失去焦点或者按enter,data中的数据才会改变 --> <input type="text" v-model.lazy="msg_lazy"> <div>{{msg_lazy}}</div> <div> <button @click="handle">提交</button> </div> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ msg:'', msg2:'', msg_lazy:'' }, methods:{ handle:function(){ console.log(this.msg+5); console.log(this.msg2+5); } } }); </script> </body> </html>
②. 自定义指令 了解
- ①. Vue.directive 注册全局指令
- ②. Vue.directive 注册全局指令(带参数)
<!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> <div>--------</div> <input type="text" v-color="msg"> </div> <script src="../js/vue.js"></script> <script> // 1>. 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // el表示指令所绑定的元素 inserted: function (el) { // 聚焦元素 el.focus() } }); //2>. 带参数 // 注册一个全局自定义指令 `v-focus` Vue.directive('color', { // el表示指令所绑定的元素 inserted: function (el,binding) { //el:表示的是<input type="text" v-color="msg"> //binding-->Object { name: "color", rawName: "v-color", value: "red", expression: "msg", modifiers: {}, def: {…} } el.style.backgroundColor=binding.value; console.log(el); console.log(binding); } }); var vm=new Vue({ el:'#app', data:{ msg:"red" } }); </script> </body> </html>
③. 注册局部指令
<input type="text" v-color='msg'> <input type="text" v-focus> <script type="text/javascript"> /* 自定义指令-局部指令 */ var vm = new Vue({ el: '#app', data: { msg: { color: 'red' } }, //局部指令,需要定义在 directives 的选项 directives: { color: { bind: function(el, binding){ el.style.backgroundColor = binding.value.color; } }, focus: { inserted: function(el) { el.focus(); } } } }); </script>
