本文深入讲解Vue.js的基础特性，包括Vue的表单操作、自定义指令、计算属性和监听器的使用。介绍如何使用`.number`和`.trim`修饰符处理表单数据，以及如何通过`Vue.directive`注册全局指令。同时探讨了计算属性的缓存机制和监听器在数据变化时的响应。此外，还展示了过滤器的应用，如数据格式化，并提供了图书列表案例，涵盖添加、修改和删除图书的操作。
VUE.JS基础知识2
Vue常用特性
表单基本操作
-
获取单选框中的值
- 通过v-model
<!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值，我们只需要实时监控他的值就可以了 --> <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> <script> new Vue({ data: { // 默认会让当前的 value 值为 2 的单选框选中 gender: 2, }, }) </script> -
获取复选框中的值
- 通过v-model
- 和获取单选框中的值一样
- 复选框
checkbox这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选
<!-- 1、 复选框需要同时通过v-model 双向绑定 一个值 2、 每一个复选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 hobby 的值就是选中的值，我们只需要实时监控他的值就可以了 --> <div> <span>爱好：</span> <input type="checkbox" id="ball" value="1" v-model='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='hobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='hobby'> <label for="code">写代码</label> </div> <script> new Vue({ data: { // 默认会让当前的 value 值为 2 和 3 的复选框选中 hobby: ['2', '3'], }, }) </script> -
获取下拉框和文本框中的值
- 通过v-model
<div> <span>职业：</span> <!-- 1、 需要给select 通过v-model 双向绑定 一个值 2、 每一个option 必须要有value属性 且value 值不能一样 3、 当某一个option选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 occupation 的值就是选中的值，我们只需要实时监控他的值就可以了 multiple默认为true，多选的意思 --> <!-- multiple 多选 --> <select v-model='occupation' multiple> <option value="0">请选择职业...</option> <option value="1">教师</option> <option value="2">软件工程师</option> <option value="3">律师</option> </select> <!-- textarea 是 一个双标签 不需要绑定value 属性的 --> <textarea v-model='desc'></textarea> </div> <script> new Vue({ data: { // 默认会让当前的 value 值为 2 和 3 的下拉框选中 occupation: ['2', '3'], desc: 'nihao' }, }) </script> 完整代码 <!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://itcast.cn"> <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='hobby'> <label for="ball">篮球</label> <input type="checkbox" id="sing" value="2" v-model='hobby'> <label for="sing">唱歌</label> <input type="checkbox" id="code" value="3" v-model='hobby'> <label for="code">写代码</label> </div> <div> <span>职业：</span> <select v-model='occupation' multiple> <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="提交" @click.prevent='handle'> </div> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 表单基本操作 */ var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobby: ['2','3'], // occupation: 3 occupation: ['2','3'], desc: 'nihao' }, methods: { handle: function(){ // console.log(this.uname) // console.log(this.gender) // console.log(this.hobby.toString()) // console.log(this.occupation) console.log(this.desc) } } }); </script> </body> </html>
表单修饰符
-
.number 转换为数值
- 注意点：
- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
-
.trim 自动过滤用户输入的首尾空白字符
- 只能去掉首尾的 不能去除中间的空格
-
.lazy 将input事件切换成change事件
- .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
-
change在失去焦点 或者 按下回车键时才更新
<!-- 自动将用户的输入值转为数值类型 --> <input v-model.number="age" type="number"> <!--自动过滤用户输入的首尾空白字符 --> <input v-model.trim="msg"> <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > 案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!--number转化为数值，相当于在之前计算器案列parsint --> <input type="text" v-model.number='age'> <input type="text" v-model.trim="msg"> <input type="text" v-model.lazy='msg'> <div>{ {msg}}</div> <button @click='handle'>点击</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 表单域修饰符 */ var vm = new Vue({ el: '#app', data: { age: '', info: '', msg: '' }, methods: { handle: function(){ console.log(this.age + 13) // 表示表单输入的值与13相加 // console.log(this.info.length) } } }); </script> </body> </html>
自定义指令不带参数和带参数的用法
-
内置指令不能满足我们特殊的需求
-
Vue允许我们自定义指令此处focus是页面一打开焦点就定义到表单中,那个需要就在那个上面加上v-focus
-
自定义指令的语法规则（获取元素焦点） Vue.directive('focus' { inserted: function(el) { // 获取元素的焦点 el.focus(); } }) 自定义指令用法 <input type="text" v-focus> -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-focus> <input type="text"> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令 */ Vue.directive('focus', { inserted: function(el){ // el表示指令所绑定的元素,inserted钩子函数中的 el.focus(); } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function(){ } } }); </script> </body> </html> -
自定义指令带参数，此处演示给表单框自定义背景颜色
-
3. 带参数的自定义指令（改变元素背景色） Vue.directive(‘color', { inserted: function(el, binding) { el.style.backgroundColor = binding.value.color; } }) 4. 指令的用法 <input type="text" v-color='{color:"orange"}'> 局部指令 directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-color='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
自定义指令-带参
最低0.47元/天 解锁文章
扫一扫
4458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
