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 常用控件示例

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

{{h.name}}

是否已阅读并同意协议

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);

}

}

});

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

1.2 修饰符

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

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

以下是一些常用的 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。选择框 (