v-model
双向绑定，当用户输入的时候，改变原来的值，只能应用在像input，textare，select之类的标签
v-model也叫双向数据绑定
例子一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="demo"> <!-- @submit.prevent 阻止事件的默认行为，当前阻止的是action行为 --> <form action="#" @submit.prevent="submitForm"> 姓名(文本)：<input type="text" v-model="name"> <br><br> 性别(单选按钮)： <input name="sex" type="radio" value="1" v-model="sex"/>男 <input name="sex" type="radio" value="0" v-model="sex"/>女 <br><br> 技能(多选框)： <input type="checkbox" name="skills" value="java" v-model="skills">Java开发 <input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发 <input type="checkbox" name="skills" value="python" v-model="skills">Python开发 <br><br> 城市(下拉框)： <!-- 绑定在select上才会默认选中 --> <select name="citys" v-model="city"> <option v-for="c in citys" :value="c.code"> {{c.name}} </option> </select> <br><br> 说明(多行文本)：<textarea cols="30" rows="5" v-model="desc"></textarea> <br><br> <button type="submit" >提交</button> </form> </div> <script> new Vue({ el: '#demo', data: { name: '', sex: '1', //默认选中的是 男 skills: ['vue', 'python'], //默认选中 Vue.js开发 、Python开发 citys: [ {code: 'bj', name: '北京'}, {code: 'sh', name: '上海'}, {code: 'gz', name: '广州'} ], city: 'sh', // 默认选中的城市：上海 desc: '' }, methods: { submitForm: function () { //处理提交表单 //发送ajax异步处理 alert(this.name + ', ' + this.sex + ', ' + this.skills + ', ' + this.city + ', ' + this.desc) } } }) </script> </body> </html>
例子二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- {{}}用于标签体内显示数据 --> hello,{{ msg }} <br> <!-- v-model进行数据的双向绑定 --> <input type="text" v-model="msg"> </div> <script > new Vue({ el: "#app", //指定被Vue管理的入口, 值为选择器, 不可以指定body或者是html data: { // 用于初始化数据，在Vue实例管理的Dom节点下，可通过模板语法来引用 msg: "vue.js" } }) </script> </body> </html>
会把msg的信息显示在输入框和div标签里，更改输入框里的数据，div里的也会跟着改，所以叫双向数据绑定
计算属性
computed 选项定义计算属性
计算属性 类似于 methods 选项中定义的函数
- 计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
- 函数 每次都会执行函数体进行计算。
输入数学与英语分数，采用 methods 与 computed 分别计算出总得分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> 数学：<input type="text" v-model="mathScore"> 英语：<input type="text" v-model="englishScore"><br> <!-- v-model调用函数时，不要少了小括号 --> 总得分（函数-单向绑定）：<input type="text" v-model="sumScore()"><br> <!-- 绑定计算属性后面不加上小括号 --> 总得分（计算属性-单向绑定）：<input type="text" v-model="sumScore1"><br> 总得分（计算属性-双向绑定）：<input type="text" v-model="sumScore2"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> /* 1. 函数没有缓存，每次都会被调用 2. 计算属性有缓存 ，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用 3. 函数只支持单向 4. 计算属性默认情况下：只有getter函数，而没有setter函数，所以只支持单向 如果你要进行双向，则需要自定义setter函数 */ var vm = new Vue({ el: '#app', data: { mathScore: 80, englishScore: 90, }, methods: { sumScore: function () { //100 console.log('sumScore函数被调用') // this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算 return (this.mathScore-0) + (this.englishScore-0) } }, computed: { //定义计算属性选项 //这个是单向绑定，默认只有getter方法 sumScore1: function () { //计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会重新计算，只有发生改变 的时候才会重新计算 console.log('sumScore1计算属性被调用') return (this.mathScore-0) + (this.englishScore-0) }, sumScore2: { //有了setter和getter之后就可以进行双向绑定 //获取数据 get: function() { console.log('sumScore2.get被调用') return (this.mathScore-0) + (this.englishScore-0) }, //设置数据， 当 sumScore2 计算属性更新之后 ，则会调用set方法 set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值 console.log('sumScore2.set被调用') var avgScore = newValue / 2 this.mathScore = avgScore this.englishScore = avgScore } } }, }) </script> </body> </html>
computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会更新总分，而修改总分不会更新数据和英语
如果是用户输入的，那会直接拼接起来，因为用户输入的数字也会被当成字符串。可以使用number来解决这个问题
<td><input type="text" v-model.number="python" /></td> <td><input type="text" v-model.number="vue"></td> <td><input type="text" v-model.number="selenium"></td>
上面当我们输入时，vue会监听我们输入的内容，这样大大降低了性能，我们可以使用lazy，当失去光标的时候再执行
<td><input type="text" v-model.number.lazy="python" /></td> <td><input type="text" v-model.number.lazy="vue"></td> <td><input type="text" v-model.number.lazy="selenium"></td>
实战
图片切换（图片放自己的路径）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <title>Title</title> <!-- 引用vue--> <script src="../static/vue.min.js"></script> </head> <body> <div id="app"> <img :src="images[currenIndex].imageSrc" alt=""><!-- 按索引取图片--> <br> <button @click="preImage">上一张</button> <!-- 绑定点击事件--> <button @click="nextImage">下一张</button> </div> <script> new Vue({ el:"#app", data(){ return{ images:[ {id:1,imageSrc:"../image/1.jpg"}, {id:2,imageSrc:"../image/2.jpg"}, {id:3,imageSrc:"../image/3.jpg"}, ], currenIndex:0 } }, methods:{ <!-- 点击下一张按钮时调用这个方法--> nextImage(){ this.currenIndex++; if (this.currenIndex == 3){ this.currenIndex=0; } }, preImage(){ if (this.currenIndex == 0) { this.currenIndex=3; } this.currenIndex--; } }, created(){ //组件，ajax setInterval(()=>{ this.currenIndex++; if (this.currenIndex == 3){ this.currenIndex=0; } },2000) } }) </script> </body> </html>
