程序员不想YY啊
程序员不想YY啊

【Vue常用控件详细介绍】

Vue常用控件详细介绍

  • 1. 常用控件
    • 1.1 常用控件示例
    • 1.2 修饰符
  • 2. 数据绑定
  • 3. 指令
  • 4. 组件
  • 5. 内置组件
  • 6. 表单控件绑定
  • 7. 插槽（Slots）
  • 8. 异步组件

1. 常用控件

Vue.js 是一个流行的前端 JavaScript 框架，常用于开发单页应用（SPA），Vue 提供了一套核心的概念和工具，让开发者可以通过组件化的方式构建大型应用，Vue 的控件通常指的是在 Vue 中的组件（Component），组件是 Vue 的基本构建块。

1.1 常用控件示例

通过实现一个类型注册的页面，熟悉常用的控件，文本框/密码框/文本域/单选/多选/下拉列表

<div id="app">
    <div>
        <label>账号：</label>
        <input type="text" v-model="uname">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" v-model="upwd">
    </div>
    <div>
        <label>年龄：</label>
        <input type="text" v-model="age" >
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
    </div>
    <div>
        <label>爱好：</label>
        <div style="display: inline;" v-for="h in hobbies">
            <input  type="checkbox" :value="h.id" v-model="hobby"/>{{h.name}}
        </div>
    </div>
    <div>
        <label>地区</label>
        <select v-model="selectedCity">
            <option value="">-- 请选择 --</option>
            <option v-for="c in city" :value="c.id">{{c.name}}</option>
        </select>
    </div>
    <div>
        <label>备注：</label>
        <textarea v-model="remark"></textarea>
    </div>
    <div>
        <input type="checkbox" v-model="flag">是否已阅读并同意协议
    </div>
    <div>
        <button @click="submit" :disabled="disabled">提交</button>
    </div>
</div>

var vm = new Vue({

    el: "#app",

    data: {
        uname: '',
        upwd:'',
        age:'',
        sex: 1,

        //用于通过v-for指令输出多选框列表
        hobbies:[
            {id: '1', name:'打游戏'},
            {id: '2', name:'编程'},
            {id: '3', name:'旅游'}
        ],
    
        /*
         * 用于通过v-model双向绑定,保存用户的选择。
         * 此处为多选，需要通过数组接收，否则无法
         * 正常接收复选框的值，且复选框的行为也不正常，
         * 可能出现要么全部被选择，要么全部被取消的情况
         */
        hobby:[],

        remark: null,

        //用于生成地区选择列表
        city:[
            {id:"1", name:"长沙"},
            {id:"1", name:"株洲"},
            {id:"1", name:"湘潭"}
        ],

        //用于保存用户选择的地区
        selectedCity: '',

        //是否同意协议,默认值为false
        agreed:false,

        //提交按钮是否禁用,默认为true
        disabled: true
    },

    //监控agreed属性,如果同意协议则将提交按钮
    //设置为可用,否则提交按钮为禁用状态
    watch: {
        agreed: function(val) {
            if(val) {
                this.disabled = false;
            }else{
                this.disabled = true;
            }
        }
    },

    methods: {
        submit: function() {
            let data = {
                uname: this.uname,
                upwd: this.upwd,
                age:this.age,
                sex: this.sex,
                hobby: this.hobby,
                city: this.selectedCity,
                remark: this.remark
            }
            console.log(data);
        }
    }

});

不使用监视器的简单方式： 删除监听器，然后将提交按钮的做如下修改

<button @click="submit" :disabled="!agreed">提交</button>

1.2 修饰符

修饰符 作用
.lazy 默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
.number 将用户的输入值转为 Number 类型
.trim 自动过滤用户输入的首尾空格

以.number为例，示例修饰符的使用，将输入的年龄属性转换为数值型

<div>
    <label>年龄：</label>
    <input type="text" v-model.number="age" >
</div>

以下是一些常用的 Vue 核心概念和相关控件（组件）的介绍：

2. 数据绑定

  • 插值：使用双大括号 {{ ... }} 来绑定数据到文本节点。
  • v-bind：绑定 DOM 属性到组件的数据。例如，v-bind:href="url" 可以绑定超链接的 href 属性。

3. 指令

  • v-model：在表单输入控件和应用状态之间创建双向数据绑定。
  • v-on：绑定事件监听器。如 v-on:click="handleClick" 可以监听点击事件。
  • v-for：基于一段数组渲染一个列表。
  • v-if, v-else-if, v-else：条件渲染一个或多个元素。
  • v-show：根据条件切换元素的 display CSS 属性。

4. 组件

  • 全局组件：可以在任何新创建的 Vue 根实例的模板中使用。
  • 局部组件：只能在定义它们的组件的模板中使用。

5. 内置组件

  • 和 ：当使用 vue-router 插件为应用程序提供路由支持时，这些组件被用于链接导航和显示当前路由视图。
  • 和 ：使得添加进入/离开和列表过渡更加简单。

6. 表单控件绑定

  • 输入框 ()：可以用 v-model 来实现数据双向绑定。
  • 多选框 ()：可以将多选框绑定到同一个数组。
  • 单选按钮 ()：可以绑定到某个 property。
  • 选择框 (