Vue学习日记24

1.webpack-chain
解析:应用一个链式API来生成和简化2-4版本的webpack的配置的修改。webpack-chain尝试通过提供可链式或顺流式的API创建和修改webpack配置。API的Key部分可以由用户指定的名称引用,这有助于跨项目修改配置方式的标准化。可通过npm方式进行安装:npm install --save-dev webpack-chain。

2.vue-cli-service命令
解析:在一个Vue CLI项目中,@vue/cli-service安装了一个名为vue-cli-service的命令。可以在npm scripts中以vue-cli-service、或者从终端中以./node_modules/.bin/vue-cli-service访问这个命令。使用默认preset的项目的package.json:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

3.vue-cli-service serve
解析:vue-cli-service serve命令会启动一个开发服务器[基于webpack-dev-server]并附带开箱即用的模块热重载[Hot-Module-Replacement]。除了通过命令行参数,也可以使用vue.config.js里的devServer字段配置开发服务器。

用法:vue-cli-service serve [options] [entry]
选项:
  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值:development)
  --host    指定 host (默认值:0.0.0.0)
  --port    指定 port (默认值:8080)
  --https   使用 https (默认值:false)

4.vue-cli-service build
解析:vue-cli-service build会在dist/目录产生一个可用于生产环境的包,带有JS/CSS/HTML的压缩,和为更好的缓存而做的自动的vendor chunk splitting。它的chunk manifest会内联在HTML里。如下所示:

用法:vue-cli-service build [options] [entry|pattern]
选项:
  --mode        指定环境模式 (默认值:production)
  --dest        指定输出目录 (默认值:dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值:app)
  --name        库或 Web Components 模式下的名字 (默认值:package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

5.vue-cli-service inspect
解析:可以使用vue-cli-service inspect来审查一个Vue CLI项目的webpack config。

用法:vue-cli-service inspect [options] [...paths]
选项:
  --mode    指定环境模式 (默认值:development)

6.runjs
解析:Minimalistic building tool. This project has been renamed to ‘tasksfile’. Install using ‘npm install tasksfile’ instead.

7.chalk
解析:Terminal string styling done right.

8.connect
解析:Connect是一个框架,它使用被称为中间件的模块化组件,在Connect中,中间件组件是一个函数,它拦截HTTP服务器提供的请求和响应对象,执行逻辑,或者结束响应,或者把它传递给下一个中间件组件。Connect用分派器把中间件连接在一起。

9.serve-static
解析:Serve static files.

10.svgo
解析:SVGO是基于node.js开发的SVG优化工具,可用来处理元数据、注释、隐藏元素、默认或非正规数值,以及其它不影响正常显示的东西。

11.常见的HTML事件
解析:
[1]onchange:HTML元素改变
[2]onclick:用户点击HTML元素
[3]onmouseover:用户在一个HTML元素上移动鼠标
[4]onmouseout:用户从一个HTML元素上移开鼠标
[5]onkeydown:用户按下键盘按键
[6]onload:浏览器已完成页面的加载

扫描二维码关注公众号,回复: 9321992 查看本文章

12.HTML事件的例子
解析:
[1]当用户点击鼠标时
[2]当网页已加载时
[3]当图像已加载时
[4]当鼠标移动到元素上时
[5]当输入字段被改变时
[6]当提交HTML表单时
[7]当用户触发按键时

13.prototype继承
解析:所有的JavaScript对象都会从一个prototype [原型对象]中继承属性和方法:
[1]Date对象从Date.prototype继承。
[2]Array对象从Array.prototype继承。
[3]Person对象从Person.prototype继承。
说明:
[1]所有JavaScript中的对象都是位于原型链顶端的Object的实例。
[2]JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
[3]Date对象,Array对象,以及Person对象从Object.prototype继承。

14.Prototype
解析:Prototype是一种库,提供用于执行常见web任务的简单API。Prototype通过提供类和继承,实现了对JavaScript的增强。

15.autocomplete="off"
解析:autocomplete属性是HTML5中的新属性,在input中autocomplete属性是默认开启的。autocomplete属性规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入,是基于之前输入过的值。

16.keydown,keypress,keyup三者之间的区别
解析:
[1]keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发此事件。
[2]keypress:当用户按下键盘上的字符键时触发,如果按住不让的话,会重复触发此事件。
[3]keyup:当用户释放键盘上的字符键时触发。

17.preventDefault()方法
解析:取消事件的默认动作。该方法将通知Web浏览器不要执行与事件关联的默认动作[如果存在这样的动作]。例如,如果type属性是"submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果Event对象的cancelable属性是fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

18.Event对象
解析:Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行。

19.事件句柄
解析:HTML4.0的新特性之一是能够使HTML事件触发浏览器中的行为,比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,可将之插入HTML标签以定义事件的行为。如下所示:
[1]onabort:图像的加载被中断。
[2]onblur:元素失去焦点。
[3]onchange:域的内容被改变。
[4]onclick:当用户点击某个对象时调用的事件句柄。
[5]ondblclick:当用户双击某个对象时调用的事件句柄。
[6]onerror:在加载文档或图像时发生错误。
[7]onfocus:元素获得焦点。
[8]onkeydown:某个键盘按键被按下。
[9]onkeypress:某个键盘按键被按下并松开。
[10]onkeyup:某个键盘按键被松开。
[11]onload:一张页面或一幅图像完成加载。
[12]onmousedown:鼠标按钮被按下。
[13]onmousemove:鼠标被移动。
[14]onmouseout:鼠标从某元素移开。
[15]onmouseover:鼠标移到某元素之上。
[16]onmouseup:鼠标按键被松开。
[17]onreset:重置按钮被点击。
[18]onresize:窗口或框架被重新调整大小。
[19]onselect:文本被选中。
[20]onsubmit:确认按钮被点击。
[21]onunload:用户退出页面。

20.鼠标/键盘属性
解析:
[1]altKey:返回当事件被触发时,"ALT"是否被按下。
[2]button:返回当事件被触发时,哪个鼠标按钮被点击。
[3]clientX:返回当事件被触发时,鼠标指针的水平坐标。
[4]clientY:返回当事件被触发时,鼠标指针的垂直坐标。
[5]ctrlKey:返回当事件被触发时,"CTRL"键是否被按下。
[6]metaKey:返回当事件被触发时,"meta"键是否被按下。
[7]relatedTarget:返回与事件的目标节点相关的节点。
[8]screenX:返回当某个事件被触发时,鼠标指针的水平坐标。
[9]screenY:返回当某个事件被触发时,鼠标指针的垂直坐标。
[10]shiftKey:返回当事件被触发时,"SHIFT"键是否被按下。

21.标准Event属性
解析:
[1]bubbles:返回布尔值,指示事件是否是起泡事件类型。
[2]cancelable:返回布尔值,指示事件是否可拥可取消的默认动作。
[3]currentTarget:返回其事件监听器触发该事件的元素。
[4]eventPhase:返回事件传播的当前阶段。
[5]target:返回触发此事件的元素(事件的目标节点)。
[6]timeStamp:返回事件生成的日期和时间。
[7]type:返回当前Event对象表示的事件的名称。

22.标准Event方法
解析:下面列出了2级DOM事件标准定义的方法。IE的事件模型不支持这些方法:
[1]initEvent():初始化新创建的Event对象的属性。
[2]preventDefault():通知浏览器不要执行与事件关联的默认动作。
[3]stopPropagation():不再派发事件。

23.Javascript event.keyCode==13按键事件
解析:13表示enter按键的keyCode编码。

24.jQuery事件
解析:
[1]$(document).ready(function):将函数绑定到文档的就绪事件[当文档完成加载时]
[2]$(selector).click(function):触发或将函数绑定到被选元素的点击事件
[3]$(selector).dblclick(function):触发或将函数绑定到被选元素的双击事件
[4]$(selector).focus(function):触发或将函数绑定到被选元素的获得焦点事件
[5]$(selector).mouseover(function):触发或将函数绑定到被选元素的鼠标悬停事件

25.jQuery选择器
解析:选择器允许对DOM元素组或单个DOM节点进行操作。jQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。
说明:jQuery选择器:jQuery元素选择器,jQuery属性选择器,jQuery CSS选择器。

参考文献:
[1]webpack-chain:https://github.com/Yatoo2018/webpack-chain/tree/zh-cmn-Hans
[2]Vue CLI服务:https://cli.vuejs.org/zh/guide/cli-service.html
[3]HTML DOM事件:https://www.runoob.com/jsref/dom-obj-event.html
[4]JavaScript Browser对象实例:https://www.runoob.com/js/js-ex-browser.html
[5]JavaScript 对象实例:https://www.runoob.com/js/js-ex-dom.html
[6]HTML DOM教程:https://www.runoob.com/htmldom/htmldom-tutorial.html
[7]HTML DOM Document对象:https://www.runoob.com/jsref/dom-obj-document.html
[8]JavaScript和HTML DOM参考手册:https://www.runoob.com/jsref/jsref-tutorial.html

发布了364 篇原创文章 · 获赞 422 · 访问量 36万+

猜你喜欢

转载自blog.csdn.net/shengshengwang/article/details/103929777
今日推荐