共计 3680 个字符，预计需要花费 10 分钟才能阅读完成。
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>
正文完
