Vue.js学习详细课程系列--共32节（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">生化危机7label>
    <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: '
今天下雨，出不去啦，干什么呢？看Youtube吧!
'
    });
    var myApp = new Vue({
        el: '#myApp', 
    });
script>

24. 组件：局部的组件

知识点

• 组件的局部注册

组件

Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。

综合例

<div id="myApp">
    <my-weather>my-weather>
div>
<script>
    var WeatherComponent = {
        template: '
今天下雨，随它去吧！
'
    };
    var myApp = new Vue({
        el: '#myApp', 
        data: {
        },
        components: {
            'my-weather': WeatherComponent
        },
    });
script>