前端及开发文章及欣赏

jquery 根据下标获取classname,以及其子元素,修改classname的值

前端达人

1. 根据下标获取对应的classname,实现点击按钮触发当前块的点击事件

<div class="right" @click="meetingfileVisible(index)">
  <span class="foldIcon">
     <i class="el-icon-caret-bottom"></i>
  </span>
</div>
<div class="meeting-file">
  <span>与现实生活一致</span>
</div> 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
.meeting-file{ display:none; } 
            
  • 1
  • 2
  • 3
meetingfileVisible(index) { $(".meeting-file").eq(index).slideToggle("slow"); var cal =$(".foldIcon").eq(index).children("i").attr("class"); cal = cal === 'el-icon-caret-bottom' ? 'el-icon-caret-top' : 'el-icon-caret-bottom'; $(".foldIcon").eq(index).children("i").attr("class", cal); }, 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

jquery里判断数组内是否包含了指定的值或元素的方法

前端达人

本文讲的是在jquery里,如何判断一个数组里是否包含了指定的值,变量,或其它对象元素的方法。

在jquery里,我们可以用$.inArray来判断一个数组里是否包含了指定的值或其它对象元素,来看一个简单的实例:


    
  1. var arr=["aijquery","jquery","I like it"];
  2. var str="aijquery.cn";
  3. if($.inArray(str,arr)<0){
  4. alert("数组里不包含!");
  5. }

$.inArray是用来获取指定的值在数组中的位置,从0开始计数(如果没有找到则返回 -1 。

 

上面的数组只是普通的字符型数组,下面我们来看其它类型的数组,比如jquery里用$.makeArray来生成的HTML元素类数组:


    
  1. //我们首先使用$.makeArray来生成一个数组
  2. var arr=$.makeArray($("div"));

现在假设这些div里,我们其中有一个ID为"aijquery"的div,那么我们是否可以用上面的方法来判断这个div是否包含在这个数组里呢?

答案是可以的,不过需要注意转换jquery对象为js对象,来看下面站长的测试结果:


    
  1. $.inArray($("#aijquery"),arr);//返回-1 这是错误的结果
  2. $.inArray($("#aijquery")[0],arr);//返回0 这才是正确的结果

 

 

PS:关于jquery对象与js对象之间的转换:jquery对象与dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法

 

 
<!doctype html>
<html lang="en">
<head>
<title>$.inArray判断元素是否包含在数组中的在线演示-aijQuery.cn</title>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
  <div id="aijquery">aijquery</div>
  <div>1</div><div>2</div><div>3</div>
  <P id="inarray">div#aijquery在数组里的位置是:</P>
<script language="javascript"> var arr=$.makeArray($("div")); //在测试的时候,可以把下面代码中的[0]去掉,换成jquery对象来试 $("#inarray").append($.inArray($("#aijquery")[0],arr)); </script>
</body>
</html>
View Code

摘自:http://www.aijquery.cn/Html/jqueryrumen/79.html


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

关于vue播放flv,m3u8视频流(监控)的方法

前端达人

前文:随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8。

一、 JessibucaPlayer插件用来播放flv流

1.首先是先把文件放在vue项目的public下面

2.在index.html文件里面引入 index.js文件(直接引入即可)

 3.把封装好的JessibucaPlayer组件放到公共components


  1. <template>
  2. <div class="jessibuca-player" style="width: 100%; height: 100%">
  3. <div class="container" :id="id" ref="container"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "JessibucaPlayer",
  9. props: {
  10. videoUrl: {
  11. type: String,
  12. default: ""
  13. },
  14. id: {
  15. type: Number,
  16. required: true
  17. }
  18. },
  19. data() {
  20. return {
  21. jessibuca: null // jessibuca 实例化对象
  22. };
  23. },
  24. methods: {
  25. init() {
  26. this.jessibuca = new window.Jessibuca({
  27. container: document.getElementById(this.id), // 播放器容器,若为 string ,则底层调用的是 document.getElementById('id')
  28. videoBuffer: 0.2, // 设置最大缓冲时长,单位毫秒,播放器会自动消除延迟。
  29. forceNoOffscreen: true, // 是否不使用离屏模式(提升渲染能力)
  30. hasAudio: false, // 是否有音频
  31. rotate: 0, // 设置旋转角度,只支持,0(默认) ,180,270 三个值
  32. isResize: false, // 1.当为true的时候:视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边;2.当为false的时候:视频画面完全填充canvas区域,画面会被拉伸
  33. isFullSize: true, // 当为true的时候:视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
  34. debug: false, // 是否开启控制台调试打印
  35. timeout: 30, // 设置超时时长, 单位秒,在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
  36. supportDblclickFullscreen: true, // 是否支持屏幕的双击事件,触发全屏,取消全屏事件。
  37. showBandwidth: false, // 是否显示网速
  38. operateBtns: {
  39. // 配置功能
  40. fullscreen: false, // 是否显示全屏按钮
  41. screenshot: false, // 是否显示截图按钮
  42. play: false, // 是否显示播放暂停按钮
  43. audio: false // 是否显示声音按钮
  44. },
  45. keepScreenOn: false, // 开启屏幕常亮,在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
  46. isNotMute: false, // 是否开启声音,默认是关闭声音播放的。
  47. loadingText: "加载中...", // 加载过程中文案。
  48. background: "" // 背景图片。
  49. });
  50. // 事件:
  51. this.jessibuca_load()
  52. // 1. 监听 jessibuca 初始化事件。
  53. this.jessibuca.on("load", () => {
  54. this.jessibuca_load()});
  55. // 2. 信息,包含错误信息
  56. this.jessibuca.on("log", data => this.jessibuca_log(data));
  57. // 3. 触发暂停事件
  58. this.jessibuca.on("pause", this.jessibuca_pause);
  59. // 4. 触发播放事件
  60. this.jessibuca.on("play", this.jessibuca_play);
  61. // 5. 当前是否全屏
  62. this.jessibuca.on("fullscreen", this.jessibuca_fullscreen);
  63. // 6. 触发声音事件,返回boolean值
  64. this.jessibuca.on("mute", this.jessibuca_mute);
  65. // 7. 当解析出音频信息时回调
  66. this.jessibuca.on("audioInfo", this.jessibuca_audioInfo);
  67. // 8. 当解析出视频信息时回调
  68. this.jessibuca.on("videoInfo", this.jessibuca_videoInfo);
  69. // 9. 错误信息
  70. this.jessibuca.on("error", this.jessibuca_error);
  71. // 10. 当设定的超时时间内无数据返回,则回调
  72. this.jessibuca.on("timeout", this.jessibuca_timeout);
  73. // 11. 流状态统计,流开始播放后回调,每秒1次
  74. this.jessibuca.on("start", this.jessibuca_start);
  75. // 12. 渲染性能统计,流开始播放后回调,每秒1次
  76. this.jessibuca.on("performance", this.jessibuca_performance);
  77. // 13. 当前网速, 单位KB 每秒1次,
  78. this.jessibuca.on("kBps", this.jessibuca_kBps);
  79. },
  80. // 事件:
  81. jessibuca_load() {
  82. // 监听 jessibuca 初始化事件。
  83. console.log("on load");
  84. console.log("module", this.videoUrl);
  85. this.methods_play(this.videoUrl);
  86. },
  87. jessibuca_log(data) {
  88. // 信息,包含错误信息
  89. console.log("on log", data);
  90. },
  91. jessibuca_pause(flag) {
  92. // 触发暂停事件
  93. console.log("on pause", flag);
  94. },
  95. jessibuca_play(flag) {
  96. // 触发播放事件
  97. console.log("on play", flag);
  98. },
  99. jessibuca_fullscreen(flag) {
  100. // 当前是否全屏
  101. console.log("on fullscreen", flag);
  102. if (flag) {
  103. let myEvent = new Event("resize");
  104. setTimeout(() => {
  105. window.dispatchEvent(myEvent);
  106. }, 100);
  107. }
  108. },
  109. jessibuca_mute(flag) {
  110. // 触发声音事件
  111. console.log("on mute", flag);
  112. },
  113. jessibuca_audioInfo(data) {
  114. // 当解析出音频信息时回调,2个回调参数
  115. // 1. numOfChannels:声频通道
  116. // 2. sampleRate 采样率
  117. console.log("audioInfo", data);
  118. },
  119. jessibuca_videoInfo(data) {
  120. // 当解析出视频信息时回调
  121. // 1. w:视频宽
  122. // 2. h:视频高
  123. console.log("videoInfo", data);
  124. },
  125. jessibuca_error(error) {
  126. // 错误信息
  127. console.log("error:", error);
  128. },
  129. jessibuca_timeout() {
  130. // 当设定的超时时间内无数据返回,则回调
  131. console.log("timeout");
  132. },
  133. jessibuca_start(s) {
  134. // 流状态统计,流开始播放后回调,每秒1次
  135. // 1. buf: 当前缓冲区时长,单位毫秒
  136. // 2. fps: 当前视频帧率,
  137. // 3. abps: 当前音频码率,单位bit,
  138. // 4. vbps: 当前视频码率,单位bit,
  139. // 5. ts:当前视频帧pts,单位毫秒
  140. // console.log('stats is', s);
  141. },
  142. jessibuca_performance(performance) {
  143. // 渲染性能统计,流开始播放后回调,每秒1次。
  144. // 0: 表示卡顿、1: 表示流畅、2: 表示非常流程
  145. // console.log('performance', performance);
  146. },
  147. jessibuca_kBps(kBps) {
  148. // 当前网速, 单位KB 每秒1次,
  149. // console.log('kBps', kBps);
  150. },
  151. // 方法:
  152. methods_play(url) {
  153. // 播放
  154. if (this.jessibuca.hasLoaded()) {
  155. this.jessibuca.play(url);
  156. } else {
  157. console.error("视频数据未加载完毕,请稍后操作");
  158. }
  159. },
  160. methods_mute() {
  161. // 静音
  162. this.jessibuca.mute();
  163. },
  164. methods_cancelMute() {
  165. // 取消静音
  166. this.jessibuca.cancelMute();
  167. },
  168. methods_pause() {
  169. // 暂停
  170. this.jessibuca.pause();
  171. },
  172. methods_setVolume(volume) {
  173. // 设置音量
  174. this.jessibuca.setVolume(volume);
  175. },
  176. methods_setRotate(rotate) {
  177. // 设置旋转角度 0\180\270
  178. this.jessibuca.setRotate(rotate);
  179. },
  180. methods_destroy() {
  181. // 关闭视频,释放底层资源
  182. if (this.jessibuca) {
  183. this.jessibuca.destroy();
  184. }
  185. },
  186. methods_fullscreen(flag) {
  187. // 全屏(取消全屏)播放视频
  188. this.jessibuca.setFullscreen(flag);
  189. },
  190. methods_screenShot() {
  191. // 截图
  192. // 1. screenshot(filename, format, quality)
  193. // 2. {string} filename、 {string} format、{number} quality
  194. // 3.filename: 保存的文件名, 默认 时间戳、format : 截图的格式,可选png或jpeg或者webp ,默认 png、quality: 可选参数,当格式是jpeg或者webp时,压缩质量,取值0 ~ 1 ,默认 0.92
  195. this.jessibuca.screenshot();
  196. },
  197. methods_setBufferTime(time) {
  198. // 设置最大缓冲时长,单位秒,播放器会自动消除延迟。
  199. // {number} time
  200. this.jessibuca.setBufferTime(Number(time));
  201. },
  202. methods_setScaleMode(mode) {
  203. // 设置播放器填充
  204. // 1. 0 视频画面完全填充canvas区域,画面会被拉伸 等同于参数 isResize 为false
  205. // 2. 1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 isResize 为true
  206. // 3. 2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 isFullSize 为true
  207. this.jessibuca.setScaleMode(Number(mode));
  208. },
  209. restartPlay() {
  210. // 重新加载
  211. this.methods_destroy();
  212. this.methods_play(this.videoUrl);
  213. }
  214. },
  215. mounted() {
  216. this.init();
  217. window.onerror = msg => (this.err = msg);
  218. },
  219. beforeDestroy() {
  220. if (this.jessibuca) this.jessibuca.destroy();
  221. }
  222. };
  223. </script>
  224. <style>
  225. @import url("./JessibucaPlayer.css");
  226. </style>

 4.最后再自己用到的文件里面 引入组件即可

 如有想要文件的请私聊

二、easyplayer插件播放m3u8流

教程:

1.首先npm安装EasyPlayer、copy-webpack-plugin
ps:copy-webpack-plugin版本一定一定一定不能大于6.0,否则会报错。


  1. npm install @easydarwin/easyplayer --save
  2. npm install copy-webpack-plugin@5.1.2 --save-dev

2.最重要的地方 一定要把这个地方弄好 那就是在vue.config.js里面


  1. const CopyWebpackPlugin = require('copy-webpack-plugin')
  2. configureWebpack: {
  3. plugins:[
  4. new CopyWebpackPlugin([
  5. {
  6. from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
  7. to: './libs/EasyPlayer/'
  8. },
  9. {
  10. from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
  11. to: './libs/EasyPlayer/'
  12. },
  13. {
  14. from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
  15. to: './libs/EasyPlayer/'
  16. }
  17. ])
  18. ]
  19. }

3.还需要在public/index.html 引入EasyPlayer-lib.min.js,可以直接在node_modules里找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js复制到pubilc目录下,还有需要EasyPlayer.wasm同样放到public目录下

 4.引入组件使用

 最后效果



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

总结vue2.0与vue3.0的区别,让你快速上手

前端达人

1:vue3.0和2.0的区别

2.0数据双向绑定方面

Vue2.0使用Object.defineProperty

原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发生改变发出通知

// 数据
let data = {
    title: '',
    // 备份数据
    _data: {}
}
// 定义特性
Object.defineProperty(data, 'title', {
    // 定义特性属性或者特性方法
    // 取值方法
    get() {
        // console.log('get')
        // 注意:不能通过自身属性取值
        // return this.title
        // 返回备份的数据
        return this._data.title;
    },
    // 赋值方法
    set(value) {
        // this指向对象
        // 注意:不能为自身属性赋值
        // this.title = value
        // 我们可以向备份数据中存储
        this._data.title = value;
        // console.log('set')
        // 更新视图
        updateView(this._data)
    }
})
// 视图模板
let tpl = document.getElementById('app').innerHTML
// 实现更新视图的方法
function updateView(data) {
    // 处理模板
    let html = tpl.replace(/{{(w+)}}/g, (match, $1) => {
        // 从data中获取数据
        return data[$1] || ''
    })
    // 更新视图
    document.getElementById('app').innerHTML = html;
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

Vue3.0数据绑定

使用ES6的新特性porxy

原理:通过ES6的新特性proxy来劫持数据,当数据改变时发出通知

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
      <title>vue3.0数据双向绑定</title>
  </head>
  <body>
      <div>
         <input type="text" id="input">
         <span id="text"></span>
     </div>
 </body>
 </html>
 <script>
     var obj = {};
     var obj1 = new Proxy(obj, {
         // target就是第一个参数obj, receive就是返回的obj(返回的proxy对象)
         get: function (target, key, receive) {
             // 返回该属性值
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             // 执行赋值操作
             target[key] = newVal;
             document.getElementById('text').innerHTML = target[key];
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });
 </script> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

总结:

Vue2.x版本中的双向绑定不能检测到下标的变化
proxy可以劫持整个对象,并返回一个新对象

2: 创建项目

未创建过vue脚手架得同学 或者从线上拉项目下来得同学 可以首先 查一下 当前版本

1:查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli4

vue --version 
  • 1

2:如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装
安装3.0版本: 目前新项目搭建脚手架默认安装得是3.0版本

npm install -g vue-cli 
  • 1

如果是旧项目2.0版本到3.0切换得同学,即卸载当前版本,安装另外的版本
从2.0升级到3.0:

npm uninstall -g vue-cli

npm install -g @vue/cli 
  • 1
  • 2
  • 3

如果想从新版本降到旧版本得同学 看这里!!

从3.0降到2.0:

npm uninstall -g @vue/cli
npm install -g vue-cli 
  • 1
  • 2

项目初始化

初始化,vue init <模板名称(webpack比较常用)> [项目名称]

vue init webpack cli2-test 
  • 1

2.0项目初始化参数介绍

//项目名称

Project name ...

//作者的信息,会默认从git中读取信息

Project description ...

Author ...

//vue build的选项 1.runtime-compiler 2.runtime-only (一般选第一个就好)

vue build ...

//是否安装vue-router,一般选用YES,省去手动创建路由

Install vue-router? ..

//是否使用ESLint检测代码规范,规范可根据选项选择不同的规范库或者自己添加规范

use ESLint to link your code

//是否写单元测试 (一般不使用)

Set up unit tests

//是否使用Nightwatch来进行e2e测试 (2代表to e to e 点对点)

Setup e2e test with Nightwatch?

//使用npm或者yarn包管理工具

use npm

use yarn 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

3.0初始化,vue create [项目名称]

vue create cli3-test

?项目初始化参数介绍

//选择一个配置方式
 please pick a perset  (一般选最后一个Manually select features(手动选择特性) )
 //选择对于你的工程所需要的特性 (用空格选择)
 check the features needed for your project
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
 //对应的配置文件单独生成还是放在package.json里
 where do you prefer placing config for babel
 //要不要把刚才自己选择的配置保存下来
 save this as a preset for future projects? 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

3:项目的目录

Vue2.0版本目录

[这里是图片001]

Vue3.x 版本目录

[这里是图片002]

总结:

  • vue-cli2.0与3.0在目录结构方面,有明显的不同
  • vue-cli3.0移除了配置文件目录,config 和 build 文件夹
  • 同时移除了 static 静态文件夹,新增了 public 文件夹,打开层级目录还会发现, index.html 移动到 public 中
  • 3.0 config文件已经被移除,但是多了.env.production和env.development文件,除了文件位置,实际配置起来和2.0没什么不同
  • 没了config文件,跨域需要配置域名时,从config/index.js 挪到了vue.config.js中,配置方法不变
  • 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
    在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件

4: 3.0版本中项目环境变量配置文件没有了(dev.env.js / prod.env.js)、

我们可以通过在项目根目录下手动创建不同环境的配置文件,具体的环境变量名称由package.json中运行参数决定,下面举个例子添加development、production和uat版本的环境变量:

//  .env.delelopment
NODE_ENV=development
VUE_APP_MODE=development
BASE_URL=/develop
// .env.production
NODE_ENV=production
VUE_APP_MODE=production
BASE_URL=/api

// .env.uat
NODE_ENV=production
VUE_APP_MODE=uat
BASE_URL=/uat

不同得环境发不同的包 同学要配置得可以参考

// package.json
----
"scripts": {
   "serve": "vue-cli-service serve",
   "build:uat": "vue-cli-service build --mode uat", // 通过 --mode来运行不同的环境,自动识别到.env.uat配置文件
   "build:production": "vue-cli-service build --mode production",
   "lint": "vue-cli-service lint"
 }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

3.0版本中不同环境的webpack配置文件也没有了(webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js)
同样,我们也可以再根目录中创建vue.config.js文件来进行webpack和vue的一些配置

const path = require('path')

module.exports = {
 publicPath: './', // 基本路径,打包时加上.
 outputDir: process.env.outputDir, // 输出文件目录
 lintOnSave: false, // eslint-loader 是否在保存的时候检查
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 // webpack配置
 chainWebpack: (config) => {
   config.resolve.symlinks(true)
 },
 configureWebpack: (config) => {
   if (process.env.VUE_APP_MODE === 'production') {
     // 为生产环境修改配置...
     config.mode = 'production'
   } else {
       // 为开发环境修改配置...
       config.mode = 'development'
   }
   Object.assign(config, {
     // 开发生产共同配置
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
         '@c': path.resolve(__dirname, './src/components'),
         '@p': path.resolve(__dirname, './src/views')
       } // 别名配置
     }
   })
 },
 productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
 // css相关配置
 css: {
   // extract: true, // 是否使用css分离插件 ExtractTextPlugin
   sourceMap: false, // 开启 CSS source maps?
   loaderOptions: {
     css: {}, // 这里的选项会传递给 css-loader
     less: {
       modifyVars: {
         // less vars,customize ant design theme

         // 'primary-color': '#F5222D',
         // 'link-color': '#F5222D',
         // 'border-radius-base': '4px'
       },
       // DO NOT REMOVE THIS LINE
       javascriptEnabled: true
     },
     postcss: {
       plugins: [
         // 把px单位换算成rem单位
         require('postcss-pxtorem')({
           rootValue: 75, // 换算的基数(设计图750的根字体为32)
           selectorBlackList: ['.van-'], // 要忽略的选择器并保留为px。
           propList: ['*'], // 可以从px更改为rem的属性。
           minPixelValue: 2 // 设置要替换的最小像素值。
         }),
         require('autoprefixer')
       ]
       // plugins: [
       //   require('autoprefixer')
       // ]
     } // 这里的选项会传递给 postcss-loader
   }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
   // modules: false, // 启用 CSS modules for all css / pre-processor files.
   requireModuleExtension: true
 },
 parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建。
 pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 // webpack-dev-server 相关配置
 devServer: {
   open: false, // 自动打开浏览器
   host: '0.0.0.0', // 允许外部ip访问
   port: 8000, // 端口
   https: false, // 启用https
   overlay: {
     warnings: true,
     errors: true
   }, // 错误、警告在页面弹出
   // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
   proxy: {
       '/api': {
           target: '<url>',
           ws: true,
           changeOrigin: true
       },
       '/foo': {
           target: '<other_url>'
       }
   },  // 配置多个代理
 },
 // 第三方插件配置
 pluginOptions: {} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93

5:steup()函数 参考另一篇文章

https://blog.csdn.net/qq_41328247/article/details/109286022

6:2.0与3.0生命周期函数比较:

2.0 周期名称

3.0 周期名称

说明

beforeCreate

setup

组件创建之前

created

setup

组件创建完成

beforeMount

onBeforeMount

组件挂载之前

mounted

onMounted

组件挂载完成

beforeUpdate

onBeforeUpdate

数据更新,虚拟 DOM 打补丁之前

updated

onUpdated

数据更新,虚拟 DOM 渲染完成

beforeDestroy

onBeforeUnmount

组件销毁之前

destroyed

onUnmounted

组件销毁后

<template>

<router-link to="/">点这里去首页</router-link>

<hr>

<div class="home">

这里是一个计数器 >>> <span class="red">{{count}}</span> <br>

<button @click="countAdd">点击加数字</button>

</div>

</template>

<script>

// 你需要使用到什么生命周期,就引出来什么生命周期

import {

onBeforeMount,

onMounted,

onBeforeUpdate,

onUpdated,

onBeforeUnmount,

onUnmounted,

ref

} from 'vue'

export default {

// setup 函数,就相当于 vue 2.0 中的 created

setup () {

const count = ref(0)

// 其他的生命周期都写在这里

onBeforeMount (() => {

count.value++

console.log('onBeforeMount', count.value)

})

onMounted (() => {

count.value++

console.log('onMounted', count.value)

})

// 注意,onBeforeUpdate 和 onUpdated 里面不要修改值,会死循环的哦!

onBeforeUpdate (() => {

console.log('onBeforeUpdate', count.value)

})

onUpdated (() => {

console.log('onUpdated', count.value)

})

onBeforeUnmount (() => {

count.value++

console.log('onBeforeUnmount', count.value)

})

onUnmounted (() => {

count.value++

console.log('onUnmounted', count.value)

})

// 定义一个函数,修改 count 的值。

const countAdd = () => {

count.value++

}

return {

count,

countAdd

}

}

}

</script>

首先,在 vue 3.0 中,生命周期是从 vue 中导出的,我们需要用到哪些,就导出哪些。 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118

可能不少看官会认为多次一举,但实则不然。vue 提供这么多的生命周期,有几个是我们常用的?在大多数的组件中,我们用不到生命周期。即便是页面级别的应用,可能用到最多的是 onMounted 即可。

当然,那些绑定时间的操作会用到解绑,因此会用到 onUnmounted。其它的生命周期,正常情况下是基本用不到的。所以,通过引入使用的这种设定,可以减少我们的最终编译的项目的体积。而且,这样的引入使用,更加的逻辑清晰。

其次,除 setup 之外,其他的生命周期函数,都是在 setup 里面直接书写函数即可。

7.对文件的引用上

  • Vue2.x中new出的实例对象,所有的东西都在这个vue对象上,这样其实无论你用到还是没用到,都会跑一变。
  • vue3.0中可以用ES module imports按需引入,如:keep-alive内置组件、v-model指令,等等。

8.项目的启动

Vue2.x 版本启动

npm run dev

Vue3.x 版本启动

npm run serve

9.语法方面

1.v-model语法糖废弃,改用modelValue

<input v-model="value" />

<input modelValue="value" /> 
  • 1
  • 2
  • 3

2.弃用全局APInew Vue,使用createApp

const app =?Vue.createApp({}) 
  • 1

3.弃用Vue.prototype,在Vue3中,我们可以使用如下定义方式

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} 
  • 1
  • 2

4.全局方法现在全部在app实例上,例如:

`app.directive`,`app.use`等 
  • 1

5.现在你需要手动挂载根节点

main.js

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app') 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

6.不能再使用Vue.nextTick/this.$nextTick,Vue3中你可以用:

import { nextTick } from 'vue'
nextTick(() => {
  // something
}) 
  • 1
  • 2
  • 3
  • 4

7.Vue3允许template设置key

8.正式弃用scopedSlots正式弃用,旧的不去新的不来。

9.监听数组变化需要使用deep属性,否则只能监听到整个数组被替换。

10.弃用$children,访问子组件可以使用$ref

11.filter被移除,我X,不能再使用|了。

12.移除事件API,$on,$once,$off不再使用。EventBus方法也不再使用。

10 新加入了 TypeScript 以及 PWA 的支持

11:更精准的变更通知

2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行
3.x 版本中,只有依赖那个属性的 watcher 才会重新运行。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前端基本知识介绍

前端达人

目录

一.前端三剑客

1.前导

2.三剑客的分工

二.VsCode的介绍与配置

1.vscode的介绍

2.vscode的下载安装

3.vscode的使用

3.1 图形界面操作

3.3 常用插件

三.HTML基础标签

HTML基础知识

1.HTML为何物?

2.标签介绍

3.HTML属性

4.HTML标签骨架

基本的HTML标签

1.HTML标题标签

2.换行与空格

3.HTML段落

4.字体加粗与倾斜及删除效果

5.图片标签

6.超链接

7.列表

8.布局标签

9.表格标签

10.表单标签

四.CSS基础选择器

CSS介绍

CSS样式表介绍

CSS基础语法

CSS选择器

选择器介绍

基础选择器

复合选择器

CSS引入方式

CSS引入方式介绍

内部样式表(嵌入式)

行内样式表

外部样式表

五.JS基础

Javascript介绍

1.js的介绍

2.js的由来

3.JavaScript组成

JavaScript基本语法

1.JavaScript的引入方式

2.js注释

3.js的输入输出方法

4.变量 

5.数据类型

6.数据类型转换

7.更多JS基础

六.JS之DOM

1.DOM简介

什么是DOM?

DOM树

2.获取元素

根据ID获取

根据类名获取

根据标签名获取

通过选择器获取

通过选择器获取(多个)

定位body标签

定位html标签

3.事件基础

事件基础介绍

代码实现

其它的鼠标事件

4.操作元素

操作元素介绍

改变元素的内容

操作元素属性

操作表单元素

样式属性操作

更多js操作


一.前端三剑客

1.前导

(1)HTML,CSS,JS都是单独的语言;

(2)HTML,CSS,JS构成前端技术基础;

2.三剑客的分工

(1)HTML:负责网页的架构;

(2)CSS:负责网页的样式,美化;

(3)JavaScript(JS):负责网页的行为;

二.VsCode的介绍与配置

1.vscode的介绍

vscode 全称为 Visual Studio Code ,是⼀款免费开源的现代化轻量级代码编辑器,⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令 等特性,⽀持插件扩展,并针对⽹⻚开发和云端应⽤开发做了优化。

2.vscode的下载安装

(110条消息) Python爬虫编程11——JS反爬_彩色的泡沫的博客-CSDN博客https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501

3.vscode的使用

3.1 图形界面操作

3.3 常用插件

我们通常需要代码提示我们辅助编写,这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中,点击即可看到一个搜索按钮,可以输入关键字搜索自己想要的插件。如图:

前端开发推荐安装的几个插件:

1. jshint : js 代码规范检查。
2. Beautify :⼀键美化代码的插件。
3. Javascript(ES6) code snippets : ES6 语法提示。
4. Auto Rename Tag :⾃动重命名标签。标签都是成对出现的,开始标签修改了,结束标签
也会跟着修改。
5. Auto Close Tag :⾃动闭合标签。针对⼀些⾮标准的标签,这个插件还是很有⽤的。
6. vscode-icons :可选。提供了很多类型的⽂件夹 icon ,不同类型的⽂件夹使⽤不同的
icon ,会让⽂件查找更直观。
7. open in browser :可选。右键可以选择在默认浏览器中打开当前⽹⻚。

三.HTML基础标签

HTML基础知识

1.HTML为何物?

HTML是超文本标记语言(Hyper Text Markup Language)是用来描述网页的一种语言。

注意:HTML不是一种编程语言,而是一种标记语言。

简单来说,HTML文件也可以直接称为网页,浏览器的作用就是读取HTML文件,并且以网页的形式去展示它们。

2.标签介绍

HTML标签是由尖括号包围起来的关键词,如<html></html>。

单标签与双标签

(1)双标签书写规则:<双标签名称>内容</双标签名称>,例如<html>内容</html>;

(2)单标签书写规则:<单标签名称/>,例如<br/>;

3.HTML属性

HTML属性指的是标签属性,HTML标签可以拥有属性,给相关的HTML元素提供更多的信息。

注意:

(1)一个HTML标签可有多个属性;

(2)属性写在HTML元素的开始标签;

(3)属性总是以名称/键值对的形式出现,比如:class="method";

4.HTML标签骨架

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.    <head>
  4.        <meta charset="UTF-8">
  5.        <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.        <meta name="viewport" content="width=device-width, initialscale=1.0">
  7.        <title>Document</title>
  8.    </head>
  9.    <body>
  10.    </body>
  11. </html>
<!DOCTYPE html> :向浏览器声明当前的⽂档类型是 html
<html></html> :是⽹⻚当中最⼤的标签,我们称之为根标签
<head></head> :为⽹⻚的头部,它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的
⼀些信息
<meta charset="UTF-8">  定义⽹⻚的编码为UTF- 8
<title></title> :为⽹⻚标题标签,它⾥的内容会显示在浏览器的标签⻚上
<body></body> :为⽹⻚主体标签,它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域

基本的HTML标签

1.HTML标题标签

HTML的文章标题标签,如:<h1></h1>~<h6></h6>分六个级别,效果一次减少,并且每个标题都是独占一行空间。

如:

 
  1. <h1>⼀号标题</h1>
  2. <h2>⼆号标题</h2>
  3. <h3>三号标题</h3>
  4. <h4>四号标题</h4>
  5. <h5>五号标题</h5>
  6. <h6>六号标题</h6>

注意:没有<h7></h7>标签;

2.换行与空格

2.1空格问题

 ;表示一个空格;

如:

hello&nbsp;world

2.2换行问题

<br/>表示换行;

如:

 
  1. hello
  2. <br/>
  3. world

扩展:对于HTML语言,没有严格的语义,即<br>与<br/>或者<br    >浏览器都可以识别出来。

 html1.0~5.0  xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)

3.HTML段落

3.1段落标签介绍

HTML段落是通过<p></p>标签进行定义的。

如:

 
  1. <h2>今⽇学习内容:</h2>
  2. <p>学了标题标签</p>

作用:(1)虽然p标签的文字显示外观来看,和普通文字没有区别,但是它独占一行;

           (2)标签语义化,便于定位;

3.2标签语义化

在合适的地方显示合理的标签,搜索引擎也偏好于标签语义化做的更好的页面。

4.字体加粗与倾斜及删除效果

4.1加粗标签

(1)<b></b>为加粗标签;

(2)<strong></strong>为加粗标签;

如:

 
  1. 普通⽂字
  2. <b>我是加粗⽂字1</b>
  3. <strong>我是加粗⽂字2</strong>

区别:b标签为简单加粗;strong为加粗效果+特别强调效果;

4.2倾斜

(1)<i></i> 为倾斜标签;

(2)<em></em>也可实现倾斜;

如:

 
  1. 普通⽂字
  2. <i>我是i</i>
  3. <em>我是em</em>

区别:em标签的语义更强一些。i为倾斜了,em为又倾斜了。

4.3删除

<s></s> 删除效果;

<del></del> 删除效果;

如:

 
  1. 原价:<s>998</s>
  2. 现值:9.98
  3. <br>
  4. 原价:<del>999</del>
  5. 现价:9.98

注意:这两个标签没有任何语义区别,而w3c则说明s标签要被del标签替代;

5.图片标签

<img scr="" alt="" width="" height="" title="">

(1)src:表示资源,图⽚加载的名字
(2)width(宽),height(⾼):设置图⽚的⼤⼩。
(3)title:⿏标悬停在图⽚上的提示⽂字
(4)alt:
                图⽚没有被正常加载时显示
                ⽹⻚阅读器读取此内容

如:

<img src="Logo2.png" alt="加载中" width="500" height="500" title="⿏标悬停在图⽚上的提示⽂字">

6.超链接

6.1超链接使用

超链接:点击页面发生跳转;

使用标签为:<a href=""></a>

其中href为:跳转的网址;

如:

<a href="https://www.baidu.com">点击我可以打开百度</a>

target=”_blank":在其它窗口打开新连接;

<a href="https://www.baidu.com" target="_blank">点击我可以打开百度,并且打开新 的窗⼝</a>

6.2空链接

空链接:在href中指定为#号即可;

作用:(1)暂时不知道点击之后跳转到哪里,使用空链接占位;

           (2)刷新界面;

<a href="#"></a>

7.列表

列表标签可分为:无序列表和有序列表。

7.1无序列表

使用标签:<ul><li></li><li></li><li></li></ul>

注意:

(1)ul标签可以嵌套若干个li标签;

(2)每一个li标签代表着每一条数据;

(3)每个li标签之间没有顺序;

如:

 
  1. <ul>
  2.    <li>python</li>
  3.    <li>java</li>
  4.    <li>go</li>
  5. </ul>

7.2有序列表

使用标签:<ol><li></li><li></li><li></li></ol>

注意:

(1)有序;

(2)且是ol开始的;

如:

 
  1. <ol>
  2.    <li>基础班级</li>
  3.    <li>测试</li>
  4.    <li>python</li>
  5. </ol>

8.布局标签

8.1布局标签的介绍

布局标签没有任何的语义,也没有所谓的应用场景。

作用:划分页面区域,辅助页面布局;

布局标签为:

div标签:<div></div> 大盒子,独占一行;

span标签:<span></span>小盒子,一行可以放多个;

 
  1. <div>我是div</div>
  2. <div>我是div</div>
  3. <div>我是div</div>
  4. <div>我是div</div>
  5. <span>我是span</span>
  6. <span>我是span</span>
  7. <span>我是span</span>
  8. <span>我是span</span>

9.表格标签

9.1表格标签介绍

作用:展示数据非常整齐;

基本语法:

 
  1. <table>
  2.    <tr>
  3.        <td></td>
  4.    </tr>
  5. </table>

(1)table标签:定义表格标签;

(2)tr标签:定义表格中的行;

                th标签:表格单元格;

                td标签:定义表格中的单元格,必须嵌套其中;

9.2表格标签的其他属性

(1)align:表格对齐方式。如:left,center,right;

(2)border:表格边框。如:1;

(3)cellpadding:单元边沿与其内容之间的空白,默认为1像素;

(4)cellspacing:单元格与单元格之间的空白,默认为2像素;

(5)width:设置表格宽度;

注意:需要写在table标签里;

9.3表格结构标签

表格结构标签:表格头部和表格主体两大部分;

        (1)表格头部区域:<thead>标签;

        (2)表格主体区域:<tbody>标签;

作用:结构就更加清晰,让表格有更好的语义;

9.4合并单元格

(1)合并单元格方式

        跨行合并:rowspan="合并单元格的个数";

        跨列合并:colspan="合并单元格的个数";

(2)目标单元格

        跨行:最上册单元格为目标单元格,写合并代码;

        跨列:最左侧单元格为目标单元格,写合并代码;

(3)合并单元格步骤

        1.先确定是跨行还是跨列合并;

        2.找到目标单元格;

        3.删除多余单元格;

10.表单标签

10.1表单标签介绍

表单标签我们可以直接称为 form 标签,标签书写如下:

(1)表单标签:<form action=""></form>。form表单标签里面就是所有用户填写的表单数据;

(2)属性 action:把表单数据交给指定后台程序去处理;

(3)属性 method:传递数据时方式方法。

                1.默认为post请求(隐式提交数据);

                2.get明文传送数据;

如:

 
  1. <form action="***.py" method="POST">
  2. </form>

10.2输入框与单选多选框

输入框标签(input标签):<input type="text">

(1)type:属性指定输入框内容;

(2)type="text":则是最普通的文本输入框。为单行;

(3)type="password":则为密码输入框。为单行;

                placeholder:给用户提示(提升用户体验感的属性),并且在为本域中都可以使用;

(4)type="radio":单选框;

(5)type="checkbox":为多选框;

如:

 
  1. <!-- 填写用户名及密码 -->
  2. <span>用户名:</span>
  3. <input type="text" placeholder="请输入用户名">
  4. <br>
  5. <span>密码:</span>&nbsp;&nbsp;&nbsp;
  6. <input type="password" placeholder="请输入密码">
  7. <br>
  8. <!-- 选择信息:选择 性别 爱好 -->
  9. <!-- 单选按钮 -->
  10. <!-- 一组按钮:他们俩都是来控制性别的,添加name属性 -->
  11. <span>性别:</span>
  12. <input type="radio" name="gender">
  13. <span></span>
  14. <input type="radio" name="gender">
  15. <span></span>
  16. <br>
  17. <!-- 多选按钮 -->
  18. <span>兴趣爱好:</span>
  19. <!-- <input type="checkbox"> 睡觉
  20. <input type="checkbox"> 打游戏
  21. <input type="checkbox"> 女
  22. <input type="checkbox"> 羽毛球 -->
  23. <!-- 优化:点击文字也可以选中多选框 -->
  24. <input type="checkbox" id="sleep">
  25. <label for="sleep">睡觉</label>
  26. <input type="checkbox" id="playgame">
  27. <label for="playgame">打游戏</label>
  28. <input type="checkbox" id="liangnv">
  29. <label for="liangnv"></label>
  30. <input type="checkbox" id="yumaoqiu">
  31. <label for="yumaoqiu">羽毛球</label>
  32. <br>

10.3下拉框

使用标签:select为下拉框的标签,嵌套若干个option标签。其中每一个option为下拉框中的一个选项。

selected="selected"。表示默认选中状态;

 
  1. <select name="" id="">
  2.    <option value=""></option>
  3. </select> 123

如:

 
  1. <select name="" id="">
  2.    <option value="">北京</option>
  3.    <option value="">上海</option>
  4.    <option value="">⼴州</option>
  5.    <option value="" selected="selected">深圳</option>
  6. </select> <br>

10.4文本域

使用标签:<textarea name="", cols="30" rows="10"></textarea>

(1)cols:列;

(2)rows:行;

 
  1. 建议:
  2. <textarea name="" id="" cols="30" rows="10"></textarea>
  3. <br>

10.5按钮标签

(1)普通按钮:

                标签:input指定type="button";

                通过value属性,指定按钮的文字;

如:

 
  1. 普通按钮:
  2. <input type="button" value="按钮">
  3. <br>

(2)重置按钮:点击重置按钮就会将数据恢复到默认状态;

                标签:input指定type="reset";

                注意:重置按钮自动会有重置的文字;

                如果指定为value属性,则显示什么;

如:

 
  1. 重置按钮:
  2. <input type="reset" value="重置按钮">
  3. <br>

(3)提交按钮:点击提交按钮可以让表单提交给指定后台处理;

                标签:input指定type="submit";

                注意:提交按钮自动会有提交的文字;

如:

 
  1. 提交按钮:
  2. <input type="submit" value="我是提交">

          

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

【前端】vue模板语法知识了解一下,是不是只知道用element-ui组件?

前端达人

写在前面

上一篇总结了在实操过程中如果遇到了nodejs版本的问题,我们该如何去解决的,还有就是总结了vue2和vue3生命周期的区别,如果感兴趣的可以去看看上一篇的内容vue生命周期基础知识了解一下

那知道了vue的生命周期知识点,接下就开始vue模板语法吧,在Vue中,Vue模板对应的就是Vue中的View(视图)部分,也是Vue重中之一,而在Vue中要了解Vue模板我们就需要从两个方面来着手,其一是Vue的模板语法,其二就是模板渲染。模板语法较简单一点,但对于模板的渲染(模板编译)就会更为复杂一些,如果需要了解模板渲染就需要对Vue的渲染函数,响应式原理之类的要有所了解。

Vue模板语法

<!-- App.vue -->