【Vue常用控件详细介绍】

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. 内置组件

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

6. 表单控件绑定

• 输入框 (<input>)：可以用 v-model 来实现数据双向绑定。
• 多选框 (<input type="checkbox">)：可以将多选框绑定到同一个数组。
• 单选按钮 (<input type="radio">)：可以绑定到某个 property。
• 选择框 (<select>)：可以与 v-model 结合，创建下拉选择框。

7. 插槽（Slots）

• 默认插槽：允许外部内容传递到组件中。
• 具名插槽：允许多个插槽，每个插槽有独立的名字。
• 作用域插槽：允许插槽内容访问子组件中的数据。

8. 异步组件

• Vue 允许你将组件定义为返回 Promise 的工厂函数，这使得组件可以异步加载。

Vue 组件通常定义为单文件组件（.vue 文件），包含三个部分：模板（template）、脚本（script）、样式（style），每个组件都是可复用的 Vue 实例，并且接受一组可选的属性（props）、数据（data）、方法（methods）和生命周期钩子（lifecycle hooks）等选项。

这些组件可以是表单、按钮、模态窗口、导航栏等，在 Vue 应用程序中使用它们可以极大地提高开发效率和项目的可维护性。此外，Vue 生态系统中还有很多基于 Vue 的 UI 组件库，如 Vuetify、Element UI、Ant Design Vue 等，提供了丰富的预制组件，可以快速地用于构建界面。