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

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

6. 表单控件绑定

• 输入框 ()：可以用 v-model 来实现数据双向绑定。
• 多选框 ()：可以将多选框绑定到同一个数组。
• 单选按钮 ()：可以绑定到某个 property。
• 选择框 ()：可以与 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 等，提供了丰富的预制组件，可以快速地用于构建界面。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: .NET开源、免费、跨平台的Git可视化管理工具

前言 俗话说得好“工欲善其事，必先利其器”，合理的选择和使用可视化的管理工具可以降低技术入门和使用的门槛。今天大姚给大家分享一款.NET Avalonia开源、免费、跨平台、快速的Git可视化管理工具：SourceGit。 Avalonia介绍 Avaloni…