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

简介: 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">生化危机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>


目录
相关文章
|
22天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
71 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
21天前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
54 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
5天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
22天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
29 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
17天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
12 1
|
21天前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
27 1
|
21天前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
50 1
|
22天前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
14 2
|
22天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
15 2
|
22天前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
31 1