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>