Vue.js学习课程（4 / 6）
19. 表单复选框
知识点
- v-model
- input[type=“checkbox”]
表单复选框绑定
<div id="myApp">
<h1>表单复选框</h1>
<input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames">
<label for="生化危机7">生化危机7</label>
<input type="checkbox" id="模拟飞行" value="模拟飞行" v-model="checkedGames">
<label for="模拟飞行">模拟飞行</label>
<input type="checkbox" id="塞尔达传说" value="塞尔达传说" v-model="checkedGames">
<label for="塞尔达传说">塞尔达传说</label>
<br>
<p>您选择的游戏是: {
{ checkedGames }}</p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
checkedGames: []
},
methods: {
},
});
</script>
20. 表单单选按钮
知识点
- v-model
- input[type=“radio”]
表单单选按钮绑定
<div id="myApp">
<h1>表单单选按钮</h1>
<h3>选择性别</h3>
<input type="radio" id="male" value="男" v-model="pickedSex">
<label for="male">男</label>
<br>
<input type="radio" id="female" value="女" v-model="pickedSex">
<label for="female">女</label>
<h3>选择爱好</h3>
<input type="radio" id="game" value="玩游戏" v-model="pickedHobby">
<label for="game">玩游戏</label>
<br>
<input type="radio" id="movie" value="看电影" v-model="pickedHobby">
<label for="movie">看电影</label>
<h3>选择结果</h3>
<p>性别: {
{ pickedSex }}</p>
<p>爱好: {
{ pickedHobby }}</p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
pickedSex: "",
pickedHobby: "",
},
methods: {
},
});
</script>
21. 表单下拉框
知识点
- v-model
- select
表单下拉框绑定
<div id="myApp">
<h3>你最喜欢的NBA球星是：</h3>
<select v-model="likedNBAStar" style="width:210px;">
<option>科比</option>
<option>詹姆斯</option>
<option>哈登</option>
<option>库里</option>
<option>杜兰特</option>
</select>
<h3>我的全明星：</h3>
<select v-model="likedNBAStars" multiple style="width:210px;height:210px;">
<option>阿德托昆博</option>
<option>怀特赛德</option>
<option>阿尔德里奇</option>
<option>戴维斯</option>
<option>格里芬</option>
<option>詹姆斯</option>
<option>杜兰特</option>
<option>巴特勒</option>
<option>德罗赞</option>
<option>哈登</option>
<option>科比</option>
<option>韦德</option>
<option>伦纳德</option>
<option>库里</option>
<option>欧文</option>
<option>保罗</option>
<option>林树豪</option>
</select>
<h3>选择结果</h3>
<p>我最最喜欢: {
{ likedNBAStar }}</p>
<p>我的全明星: {
{ likedNBAStars }}</p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
likedNBAStar: null,
likedNBAStars: [],
},
methods: {
},
});
</script>
22. 表单修饰符
知识点
- .lazy
- .number
- .trim
.lazy
用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。
用户名：<input v-model.lazy="username">
.number
将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。
年龄：<input v-model.number="age" type="number">
.trim
自动去掉用户输入内容两端的空格。
意见：<input v-model.trim="content">
综合例
<div id="myApp">
<h1>用户注册</h1>
<div>
<label for="username">用户：</label>
<input type="text" id="username" v-model.lazy="username" @change="checkUsername">
<span v-if="checkUsernameOK">可注册</span>
</div>
<div>
<label for="age">年龄：</label>
<input type="number" id="age" v-model.number="age">
</div>
<div>
<label for="content">个人简介：</label><br/>
<textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
</div>
<h4>信息区</h4>
<p>{
{username}}</p>
<p>{
{age}}</p>
<p><pre>{
{content}}</pre></p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
username: "",
checkUsernameOK: false,
age: "",
content: "",
},
methods: {
checkUsername: function(){
if (this.username.length > 0) this.checkUsernameOK = true;
else this.checkUsernameOK = false;
},
},
});
</script>
23. 组件：基础的基础
知识点
- 组件（Component,Portlet）
组件
组件就是页面上的一小块区域内容，完成一个小的页面功能，请参照视频第六课。
综合例
<div id="myApp">
<today-weather></today-weather>
</div>
<script>
Vue.component('today-weather', {
template: '<div>今天下雨，出不去啦，干什么呢？看Youtube吧!</div>'
});
var myApp = new Vue({
el: '#myApp',
});
</script>
24. 组件：局部的组件
知识点
- 组件的局部注册
组件
Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。
综合例
<div id="myApp">
<my-weather></my-weather>
</div>
<script>
var WeatherComponent = {
template: '<div>今天下雨，随它去吧！</div>'
};
var myApp = new Vue({
el: '#myApp',
data: {
},
components: {
'my-weather': WeatherComponent
},
});
</script>