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: '',//是否同意协议,默认值为falseagreed:false,//提交按钮是否禁用,默认为truedisabled: 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 等，提供了丰富的预制组件，可以快速地用于构建界面。