![](https://img-blog.csdnimg.cn/20190927151132530.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端开发与Vue.js实践
文章平均质量分 77
内容将涵盖 Web 前端开发的核心技术,包括 HTML、CSS、JavaScript 和 Vue.js 等相关技术,重点探讨如何进行现代化 Web 应用程序的设计、实现和测试等方面的知识,分享实用的技巧和最佳实践,帮助读者构建高效、响应式和美观的 Web 应用程序。
夏志121
活到老,学到老。
展开
-
Vue.js列表渲染指令v-for
v-for指令时在模板编译的代码生成阶段实现的,当遍历数组或对象时需要使用列表渲染指令v-for。当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用"就地复用"策略。如果数据项的数据被改变,Vue.js将不再移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并确保它在特定索引下显示已被渲染过的每个元素。原创 2023-04-20 21:05:33 · 5782 阅读 · 1 评论 -
Vue.js自定义指令及用Vue实现简单的学生信息管理系统
data: {hello:"你好",},methods: {})执行结果:通过以上示例,可以看到网页上的"你好"是红色,说明自定义指令起到了作用。在自定义指令中,可以传递是三个参数:el:指令所绑定的元素,可以用来直接操作DOM。binding:一个对象,包含指令的很多信息。vnode:Vue.js编译生成的虚拟节点。原创 2023-05-10 21:47:04 · 2219 阅读 · 1 评论 -
Vue.js计算属性和监听属性
开发人员可以在模板中像绑定普通属性一样绑定计算属性,计算属性自动监听依赖值的变化,当其依赖属性的值发生变化时,计算属性的值会自动更新,与之相关的DOM部分也会同步更新。每个计算属性都包含一个getter和setter,上面的例子都是计算属性默认用法,只是利用了getter来读取,在开发人员需要时,也可以提供一个。来读取一个计算属性,在业务中很少使用到setter,所以在声明一个计算属性的时候,可以直接使用默认的写法,不必将getter和setter都声明。在Vue.js框架中,所有计算属性都以。原创 2023-03-30 18:46:21 · 850 阅读 · 0 评论 -
Vue.js中class与style的增强绑定
在web前端应用中,操作元素的class列表的内联样式style是数据绑定style是数据绑定的一个常见需求,因为它们都是,所有可以用v-bind处理它们,但若样式复杂,则需要书写长串的样式代码,这样一来,字符串拼接就比较麻烦。因此,在将v-bind用于class和style时,Vue.js做了,表达式结果的类型除了字符串之外,还可以是。原创 2023-04-19 21:35:42 · 610 阅读 · 0 评论 -
Vue.js过滤器filters
Vue.js允许自定义过滤器,过滤器的作用可被用于一些常见的文本格式化(也就是修饰文本,但是文本内容不会改变)过滤器可以用在两个地方:双花括号插值或v-bind表达式。原创 2023-04-22 11:59:41 · 1443 阅读 · 0 评论 -
Vue.js条件渲染指令v-if及v-show
是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建,v-if也是惰性的,如果在初始渲染时条件为假,则什么都不做,直到第一次变为真时,才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示,Vue.js不会尝试生成对应的html代码,而v-show是通过css的display:none来控制的。一般来说,v-if每次插入或者移除元素时都必须生成元素内部的DOM树,因此具有更高的切换开销,而v-show有更高的初始渲染开销。值得注意的是,v-show。原创 2023-04-21 15:15:27 · 8082 阅读 · 0 评论 -
Vue.js基础特性、生命周期及常用指令
Vue.js基础特性、生命周期及常用指令基础笔记原创 2023-02-26 15:26:28 · 772 阅读 · 0 评论 -
Vue.js事件修饰符及v-model双向数据绑定
事件冒泡是当事件触发时,会像气泡一样,从DOM树的底层,一层一层往上面传递,一直传递到DOM树的根节点,如果子元素和父级元素触发的是相同的事件,那么当子元素被触发时父元素也会被触发,这就是事件的冒泡机制。上述3行代码的效果都是一样的,第一行代码是第2行代码的语法糖,第2行代码也可以简写为第3行代码,可以看出,v-model与同时使用v-bind和v-on的效果是。v-on指令提供了一些事件修饰符,即自定义事件行为,不同的事件修饰符会产生不同的功能,通常配置v-on指令来使用,下表是常用事件修饰符。原创 2023-03-29 16:55:10 · 734 阅读 · 0 评论 -
用VSCode搭建Vue.js开发环境及Vue.js第一个应用
用VSCode搭建Vue.js开发环境及Vue.js第一个应用原创 2023-02-16 09:47:25 · 13363 阅读 · 2 评论 -
Vue.js按键修饰符及v-model修饰符
Vue.js按键修饰符及v-model修饰符示例原创 2023-04-29 14:54:18 · 1367 阅读 · 0 评论 -
HTTP请求数据格式及响应数据格式
HTTP简介及请求和响应数据的格式原创 2022-05-07 15:33:02 · 8366 阅读 · 1 评论 -
用户登录功能实现案例
用户登录简单案例原创 2022-05-19 18:00:37 · 2184 阅读 · 0 评论 -
用户注册功能实现及代码优化案例
用户注册实现及代码优化的案例原创 2022-05-20 16:38:29 · 2131 阅读 · 2 评论 -
Ant Design Pro安装及简单搭建
Ant Design Pro安装及简单搭建原创 2022-10-16 11:54:25 · 7563 阅读 · 4 评论 -
yarn安装和基本使用
yarn安装和基本使用原创 2022-10-14 16:48:22 · 7421 阅读 · 2 评论 -
JavaScript对象及定时器案例
JavaScript对象及实现定时器案例原创 2022-05-06 21:39:59 · 964 阅读 · 0 评论 -
Element概述、入门案例及布局
Element概述、入门案例及布局简单示例原创 2022-05-31 21:28:58 · 7389 阅读 · 0 评论 -
JavaScript变量、数据类型、运算符及类型转换
JavaScript变量、运算符、数据类型及类型转换原创 2022-05-05 18:57:24 · 539 阅读 · 0 评论 -
JavaScript对象类型之Array及Object
this.name 所在的函数是箭头函数,因此 this 要看它外层的 play 函数,play 又是属于 stu 的方法,因此 this 代表 stu 对象。Java 的 Object 是以类作为模板来创建,对象不能脱离类模板的范围,一个对象的属性、能用的方法都是确定好的。json 对象本质上是个字符串,它的职责是作为客户端和服务器之间传递数据的一种格式,它的属性只是样子货。函数有个特殊的属性 prototype,它就是函数创建的子对象的父对象。js 的对象,不需要什么模板,它的属性和方法可以随时加减。原创 2023-04-14 15:59:37 · 1149 阅读 · 0 评论 -
JavaScript简介及引入方式
JavaScript简介及引入方式原创 2022-05-04 17:13:25 · 1110 阅读 · 0 评论 -
JavaScript变量与基本数据类型
JavaScript(JS)是一种具有特性的轻量级、解释型或者说的编程语言。虽然作为 Web 页面中的脚本语言被人所熟知,但是它也被用到了很多非浏览器环境中,例如等。进一步说,JavaScript 是一种、多范式、,并且支持面向对象、命令式和声明式(如函数式编程)风格。原创 2023-04-12 13:28:59 · 1056 阅读 · 0 评论 -
JavaScript事件监听、常见事件及表单验证
JavaScript事件监听及常见事件示例,及简单表单验证示例原创 2022-05-07 14:26:20 · 2227 阅读 · 0 评论 -
JavaScript对象类型之function
此元素有一个onclick方法,会在鼠标单击这个元素后被执行,onclick方法刚开始是null,需要赋值后才能使用。如果函数外层引用的是let变量,那么外层普遍的{}也会作为作用于边界,最外层的let也占一个script作用域。函数定义时,它的作用域已经确定好了,因此无论函数将来去了哪,都能从它的作用域中找到当时那些变量。要想里面的e和外面的e能区分开来,最简单的办法是改成let,或者用函数来界定作用域范围。如果函数外层引用的是var变量,外层普遍的{}不会视为边界。原创 2023-04-13 18:40:00 · 968 阅读 · 0 评论 -
JavaScript控制语句及搭建前端服务器
安装后 nvm 自己的环境变量会自动添加,但可能需要手工添加 nodejs 的 PATH 环境变量。nvm 即 (node version manager),好处是方便切换 node.js 版本。npm 是 js 的包管理器,就类似于 java 界的 maven,要确保它使用的是国内镜像。注意3:在 for in 内获取属性值,要使用 [] 语法,而不能用。主要用来遍历数组,也可以是其它可迭代对象,如Map,Set等。注意2:遍历子对象时,父对象的属性会跟着遍历出来。执行nvm list会列出已安装版本。原创 2023-04-18 15:43:49 · 445 阅读 · 0 评论 -
JSON概念、基础语法及数据和对象转换
JSON概念、基础语法及数据和对象转换示例原创 2022-05-29 21:37:18 · 481 阅读 · 0 评论 -
AJAX概念及入门案例
AJAX概念及入门案例示例原创 2022-05-27 20:25:04 · 418 阅读 · 0 评论 -
Vue概述、入门案例、常用指令及生命周期
Vue概述、入门案例、常用指令及生命周期示例的简单介绍原创 2022-05-30 21:42:06 · 314 阅读 · 0 评论 -
JavaScript运算符与表达式
现在希望当某个属性是 nullish 时,短路并返回 undefined,可以用?如果值1 是 Truthy,返回值1,如果值1 是 Falsy 返回值 2。打散可以理解为【去掉了】数组外侧的中括号,只剩下数组元素。需求,如果参数n没有传递或是null,给它一个【男】需求,如果参数n没有错传递,给它一个【男】需求,函数参数是一个对象,可能包含有子属性。复制对象时出现同名属性,后面的会覆盖前面的。值1 不是 nullish,返回值1。值1 是 nullish,返回值2。打散数组,把元素传递给多个参数。原创 2023-04-14 20:45:50 · 429 阅读 · 0 评论 -
JavaScript流程控制语句及函数
JavaScript流程控制语句及函数示例原创 2022-05-06 14:02:35 · 303 阅读 · 0 评论 -
Axios异步框架及案例
Axios概述及案例示例及起别名示例原创 2022-05-28 20:28:23 · 435 阅读 · 1 评论 -
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条演示示例原创 2022-06-02 20:33:17 · 2701 阅读 · 3 评论 -
CSS简介、导入方式及选择器
css简介、导入方式、css选择器及属性原创 2022-05-03 20:54:37 · 498 阅读 · 0 评论 -
HTML表单标签和表单项标签示例
HTML表单标签及表单项标签原创 2022-05-03 17:57:26 · 1076 阅读 · 0 评论 -
HTML简介及基础标签
HTML简介,基础标签,转义字符原创 2022-05-01 15:41:00 · 1570 阅读 · 0 评论 -
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片标签,超链接标签,列表标签,表格标签、布局标签简单示例原创 2022-05-02 19:29:30 · 1279 阅读 · 0 评论