Vue.js学习笔记
v-bind
绑定属性，代码：
- v-bind:href
- v-bind:src
- v-bind:class
var app3 = new Vue({ el: '#app3', data: { target_location: 'https://baidu.com', target_name: '百度一下', img_location: '../img/bing-0615.jpeg', isActive: true }});<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-bind的使用</title> <style> .active { background-color: #00b3ee; } </style></head><body><div id="app3"> 跳转到 <a v-bind:href="target_location" target="_blank">{{target_name}}</a><br> <a :class="{active: isActive}">Click me!</a> 图片： <img alt="沙丘上的日落" v-bind:src="img_location"/></div><script src="../lib/vue.js"></script><script src="../js/main.js"></script></body></html>v-on
绑定动作：代码
- v-on.prevent
var app4 = new Vue({ el: '#app4', data: {}, methods: { onEnter: function () { console.log("mouse enter"); }, onLeave: function () { console.log("mouse leave"); }, onSubmit: function () { console.log("已经提交！"); } }});<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-on的使用</title></head><body><div id="app4"> <form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit"> <!-- prevent：抑制默认行为 --> <input type="text"/> <button type="submit">提交</button> </form> <button v-on="{mouseenter: onEnter, mouseleave: onLeave}">测试按钮</button></div><script src="../lib/vue.js"></script><script src="../js/main.js"></script></body></html>v-model
绑定数据：
- v-model.trim
- v-model.number
- v-model.lazy
- input
- select
- textarea
var app5 = new Vue({ el: '#app5', data: { name: 'wang', price: 22, sex: 'M', hobby: [], from:1 }});<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>v-model的使用</title></head><body><div id="app5"> <input type="text" v-model.trim="name"><br> <pre>{{name}}</pre> <span>{{name}}</span> <input type="text" v-model.number="price"><br> <span>{{price}}</span> 男 <input v-model="sex" value="F" type="radio"> 女 <input v-model="sex" value="M" type="radio">\ {{sex}} 男 <input v-model="hobby" value="F" type="checkbox"> 女 <input v-model="hobby" value="M" type="checkbox">\ {{hobby}} <br> <textarea></textarea> <select v-model="from" multiple> <option value="1">第一</option> <option value="2">第二</option> </select> {{from}}</div><script src="../lib/vue.js"></script><script src="../js/main.js"></script></body></html>》》》Vue.js表单输入绑定
流程控制和计算属性
- v-if
- v-else-if
- v-else
- computed
var app7 = new Vue({ el: '#app7', data: { role: 'hr-min', math: 90, Chinese: 100, English: 80, }, computed: { sum: function () { return this.math + this.Chinese + this.English; }, average: function () { return Math.round(this.sum / 3); } }});<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue.js流程控制</title></head><body><div id="app7"> <div v-if="role == 'admin'"> 管理员你好！ </div> <div v-else-if="role == 'hr' || role == 'hr-min'"> 人事你好！ </div> <div v-else> 当前角色没有访问权限！ </div> <br> <table border="1"> <thead> <tr> <td>学科</td> <td>成绩</td> </tr> </thead> <tbody> <tr> <td>数学</td> <td><input type="text" v-model.number="math"></td> </tr> <tr> <td>语文</td> <td><input type="text" v-model.number="Chinese"></td> </tr> <tr> <td>英语</td> <td><input type="text" v-model.numer="English"></td> </tr> <tr> <td>总分</td> <td>{{sum}}</td> </tr> <tr> <td>平均分</td> <td>{{average}}</td> </tr> </tbody> </table></div><script src="../lib/vue.js"></script><script src="../js/main.js"></script></body></html>