vue的优缺点有那些 组件常用的有那些?

优点:

  1. 组件化开发,提升效率,方便复用,便于协同开发
  2. 单页面路由
  3. 易于结合其他的第三方库
  4. 丰富的api方法
  5. 轻量高效,虚拟DOM
  6. MVVM,数据驱动视图
  7. 轻量级的框架  

缺点:

  1. 缺少高阶教程和文档
  2. 生态环境不如angular和react
  3. 社区不大
  4. 不支持ES6的浏览器无法使用,如ie10
  5. 报错不明显,适合单人开发或者中小型项目
  6. 不利于SEO优化

常见的组件有  : 

form表单

<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
<script>export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

 

进度条组件:

<el-progress :percentage="50"></el-progress>
<el-progress :percentage="100" :format="format"></el-progress>
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="100" status="warning"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress><script>export default {methods: {format(percentage) {return percentage === 100 ? '满' : `${percentage}%`;}}};
</script>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764150.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript 获取本机ip chrome 谷歌浏览器 extension 谷歌扩展

代码一&#xff1a; if (typeof window ! undefined) {var RTCPeerConnection window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;if (RTCPeerConnection)(() > {var rtc new RTCPeerConnection()rtc.createDataChannel(); //创…

Vscode初建Vue时几个需要注意的问题

首先放图 注意点1.打开文件夹时&#xff0c;可以是VUE2 或者其他&#xff0c;但不能是VUE&#xff0c;会报错 注意点2.终端输入命令“npm init -y" npm init -y -y 的含义&#xff1a;yes的意思&#xff0c;在init的时候省去了敲回车的步骤&#xff0c;生成的默认的packag…

AI智能分析网关V4在非煤矿山安全生产视频智能监管场景中的应用

近年来&#xff0c;全国非煤矿山&#xff08;&#xff08;含金属非金属矿山、尾矿库&#xff0c;以及矿泉水等其他矿山&#xff09;安全生产工作取得明显成效&#xff0c;但安全基础仍然薄弱&#xff0c;事故总量仍然较大&#xff0c;重特大事故尚未得到根本遏制&#xff0c;安…

Clickhouse异常:Exception: No operation equals between Decimal(X, X) and Float64

在使用clickhouse中的Decimal类型存储数字时&#xff0c;使用Decimal类型字段作为查询条件时&#xff0c;比如&#xff1a; SELECT COUNT(*) AS total FROM table WHERE ( my_number10.2) 会报错如下&#xff1a;Exception: No operation equals between Decimal(X, X) and F…

linux之sed编辑器指令练习

目录 一、sed编辑器 二、sed使用案例 1.1 s命令&#xff08;substitute替换&#xff09; 一、sed编辑器 sed编辑器比交互式编辑器快的多&#xff0c;可以简化数据处理任务,sed编辑器并不会修改文件&#xff0c;只会将修改后的数据&#xff0c;输出。 二、sed使用案例 首先…

Carla 自动驾驶挑战赛 搭建环境

1. 系统设置 1.1 下载CARLA排行榜包 下载打包的CARLA 排行榜版本。 将包解压到一个文件夹中&#xff0c;例如 CARLA。 在以下命令中&#xff0c;更改${CARLA_ROOT}变量以对应于您的 CARLA 根文件夹。 为了使用 CARLA Python API&#xff0c;您需要在您喜欢的环境中安装一些…

Python:类和对象

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 面向对象编程 VS 面向过程编程 在使用计算机语言进行代码编写时&#xff0c;常见的两种思路是面向对象编程和面向过程编程&#xff1a; &#xf…

SQLiteC/C++接口详细介绍sqlite3_stmt类(十一)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十二&#xff09; 43、sqlite3_reset sqlite3_reset 函数用于重置已经编…

uniapp安装axios

先npm安装 npm i axios然后在项目里面建一个utils文件&#xff0c;再建一个index.js 以下是index.js代码&#xff1a; import axios from axios; const service axios.create({baseURL: //xxxx.xxxxx.com///你的请求接口域名, timeout: 6000, // request timeoutcrossDomai…

【C++】1599. 米老鼠偷糖果

问题&#xff1a;1599. 米老鼠偷糖果 类型&#xff1a;基本运算、整数运算 题目描述&#xff1a; 米老鼠发现了厨房放了 n 颗糖果&#xff0c;它一次可以背走 a 颗&#xff0c;请问米老鼠背了 x 次之后还剩多少颗&#xff1f;&#xff08;假设 x 次之后一定有糖果剩下&#x…

Redis中的缓存击穿

缓存击穿 缓存击穿问题也叫热点key问题&#xff0c;就是一个被高并发访问并且缓存重建业务较复杂的key突然失效了&#xff0c;无数的请求访问会在瞬间给数据库带来巨大压力。 &#x1f914;现象分析&#xff1a; 当线程1查询缓存时&#xff0c;未命中&#xff0c;于是从数据…

transformer的自注意力模型如何实现自注意力

Transformer | 鲁老师 所有参考来自以上的文章&#xff0c;简单来说&#xff0c;要实现自注意力&#xff0c;就得去完成 自己点乘自己的操作&#xff0c;然后得到的结果就能够通过调整矩阵参数完成训练了。 简单来说&#xff0c;构造了三个矩阵 &#xff0c;这三个矩阵就是为…

界面控件DevExpress ASP.NET Ribbon组件 - 完美复刻Office 365体验!

无论用户是喜欢传统工具栏菜单外观、样式&#xff0c;还是想在下一个项目中复制Office 365 web UI&#xff0c;DevExpress ASP.NET都提供了所需要的工具&#xff0c;帮助用户打造更好的应用程序界面。 P.S&#xff1a;DevExpress ASP.NET Web Forms Controls拥有针对Web表单&a…

基于python+vue的O2O生鲜食品订购flask-django-nodejs-php

近年来互联网络的迅猛发展和电子终端设备的普及&#xff0c;赋予了各行业充足的发展空间。微信小程序的O2O生鲜食品订购相比于传统信息技术&#xff0c;时效性是它最大的特色&#xff0c;已经在电子娱乐、经济等中发挥着举足轻重的作用。短时间内迅速扩大了线上管理系统的规模。…

【PHP】通过PHP实时监控Apache、MySQL服务运行状态

一、前言 有些时候我们需要监控一些服务的运行状态&#xff0c;比如说Apach或MySQL的运行状态&#xff0c;最近工作中也开发了这方面的功能&#xff0c;记录下来怎样使用PHP语言来实时监控Apache、MySQL服务的运行状态。 如果想一键开启Apache或MySQL等其他服务可以看这篇文章…

CSS color-mix() 函数

CSS color-mix() 函数是近年来CSS色彩模块新增的一项强大功能&#xff0c;允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间&#xff0c;让网页的颜色设计变得更加生动和丰富。本文将带你了解 color-mix() 函数的使用方法及其在实际项…

计网--网络层个人笔记

网络层的IP分组由路由器转发&#xff0c;而每一个路由器有很多接口&#xff0c;那么从哪一个接口转发便需要转发表。 一、网络层基本功能 二、SDN基本概念 2.1 路由器 数据平面&#xff1a;转发的过程。一个分组如何从一个端口到达另一个端口。 控制平面&#xff1a;路由选择…

JAVA 8 新特性 Lamdba表达式(二)

一、Lamdba的语法 (参数类型1 参数1,参数类型2 参数2,…) -> { 方法体 }; Lambda表达式就是一个匿名函数&#xff0c;不关注方法名&#xff0c;只关注参数和方法体。 Lambda表达式组成三要素&#xff1a;括号&#xff08;&#xff09;&#xff0c;箭头->&#xff0c;代码…

ES 8.x的多实例集群搭建与角色规划

ES 8 多实例集群搭建与角色规划 ES 8版本与之前版本存在较大改变&#xff0c;第一个区别就是启动时默认开启了安全模式&#xff0c;也就是即便是测试环境也需要用户名密码和https传输层安全证书。此外&#xff0c;集群节点的角色也与之前不同&#xff0c;除了新增角色外在配置…

Unity 获取鼠标滚轮信息的一些方法

Unity获取鼠标滚轮信息有以下一些方法&#xff1a; 1、使用Input.GetAxis(“Mouse ScrollWheel”)来获取鼠标滚轮的信息&#xff0c;如&#xff1a; //法一&#xff1a;float scrollWheelInput Input.GetAxis("Mouse ScrollWheel");if (scrollWheelInput > 0f){…