Vue.js学习详细课程系列--共32节（4 / 6）

柔情只为你懂 2023-09-25 21:15 45阅读 0赞

#### Vue.js学习课程（4 / 6） ####

*   *   *  19. 表单复选框
         *   *  知识点
             *  表单复选框绑定
         *  20. 表单单选按钮
         *   *  知识点
             *  表单单选按钮绑定
         *  21. 表单下拉框
         *   *  知识点
             *  表单下拉框绑定
         *  22. 表单修饰符
         *   *  知识点
             *  .lazy
             *  .number
             *  .trim
             *  综合例
         *  23. 组件：基础的基础
         *   *  知识点
             *  组件
             *  综合例
         *  24. 组件：局部的组件
         *   *  知识点
             *  组件
             *  综合例

#### 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>