![](https://img-blog.csdnimg.cn/0a71dd02dbf047dc9d49654480184c71.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端开发——Vue
文章平均质量分 53
Web开发零基础,进阶内容学习与分享!
Web学习指南——Bible02
言行物恒
潜心从修......
展开
-
Web前端开发之VUE17——Vuex
为了便于我们对多个组件复杂多样的数据分享和处理进行统一控制,vue推出vuex作为多组件统一控制的工具。原创 2022-04-24 17:19:17 · 1454 阅读 · 0 评论 -
Web前端开发之VUE16——项目开发集、element-UI部署
vue-cli:解决PowerShell不能识别vue命令的问题:vue默认提示消息隐藏:vue2路由的创建:vue组件库:Element-UI组件库:修改默认页面名称://vue.config.js中加入chainWebpack:config => { config.plugin('html').tap(args => { ...原创 2022-04-24 09:41:46 · 1257 阅读 · 0 评论 -
Web前端开发之VUE15——Vue路由大全、编程式导航、导航守卫
目录路由:通过锚链接Hash实现简易前端路由的方法:vue-router:vue-router的安装:配置和使用vue路由:vue-router高级用法:路由重定向:路由高亮:自定义高亮class类名:嵌套路由:实现嵌套路由:嵌套路由的重定向:动态路由匹配:获取动态路由参数值:编程式导航:命名路由:导航守卫:路由:通过锚链接Hash实现简易前端路由的方法:...原创 2022-04-21 19:01:39 · 1253 阅读 · 0 评论 -
Web前端开发之VUE14——自定义指令、updated执行机制
自定义指令:自动获取焦点的自定义指令示例代码:<template> <input type="text" v-focus></template><script>export default { directives:{ focus:{ mounted(el){ el.focus() } } }}</script>全局自定义指令:示...原创 2022-04-20 16:04:18 · 970 阅读 · 0 评论 -
Web前端开发之VUE13——插槽
插槽:示例代码:<template> <div> <CP1> <div class="diyText">我是父组件自定义的内容</div> <div class="diyText">我是父组件自定义的内容2</div> </CP1> </div></template><script>import CP..原创 2022-04-19 14:00:09 · 350 阅读 · 0 评论 -
Web前端开发之VUE12——ref引用,$nextTick,动态组件,keep-alive标签
ref引用:示例代码,代码中加入了组件中元素的控制://app.vue<template> <div ref="mydiv">使用ref得到我</div> <cp1 ref="mycp1"></cp1> <input type="color" v-model="color" @change="changeColor"> <button @click="changeColor(col.原创 2022-04-19 10:16:57 · 337 阅读 · 0 评论 -
Web前端开发之VUE11——全局配置axios
全局配置axios:示例代码://main.js中的配置import axios from "axios";const app=createApp(App)axios.defaults.baseURL="https://www.escook.cn"//此处设置请求的根路径//此处配置全局变量,后期使用this.$http调用,此处$http可自定义app.config.globalProperties.$http=axiosapp.mount('#app')...原创 2022-04-18 10:50:06 · 544 阅读 · 0 评论 -
Web前端开发之VUE10——生命周期的完整执行时机、组件关系、vuex概念
生命周期的完整执行时机:vue3中生命周期图例Vue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90组件关系及数据共享:父向子共享数据:子向父共享数据:父子组件双向同步:兄弟组件数据共享:后代数据共享:注意祖先级数据只会共享给子孙...原创 2022-04-18 09:50:04 · 773 阅读 · 2 评论 -
Web前端开发之VUE09——emits节点、组件上的v-model
目录emits节点:组件上使用v-model:emits节点:在之前的我们学习过$emit的事件触发,也就是自定义事件,前期代码:html:<button @click.stop="event_click">+</button>script:event_select(){ this.$emit('itemSelected')//传递自定义事件,参数包括事件名,多传递参数。}父级:@itemSelected="方法"//响应事件原创 2022-04-16 17:17:44 · 892 阅读 · 0 评论 -
Web前端开发之VUE08——动态class的优化、props验证
目录动态class的优化:props验证:动态class的优化:在往期的class中我们会使用对象键值对直接输入在标签上,这样会使属性过长。使用data的对象传入是一个不错的解决办法。示例代码:style操作过程中发现animation不能被编译,貌似是因为vue给class动态绑定了哈希,但是style动态没有绑定哈希导致的。下面看一个示例:<template> <div> <div class="text".原创 2022-04-15 20:35:40 · 974 阅读 · 0 评论 -
Web前端开发之VUE07——vue3新脚手架vite的使用、全局组件、组件命名
创建SPA单页面项目:vite的基本使用:vite其实和vue-cli都是脚手架工具,不同点见上。上面给出了npm的安装方式,下面我是用yarn的代码创建一个新的SPA项目:$ yarn create vite <project-name> --template vue$ cd <project-name>$ yarn$ yarn devvite项目的结构:vite项目的运行流程:当我们把模板结构创建好后,进行mai...原创 2022-04-15 17:12:32 · 4298 阅读 · 1 评论 -
Web前端开发之VUE06——生命周期、钩子函数
目录生命周期:钩子函数:完整阶段:生命周期:钩子函数:create阶段:mount阶段:update阶段:unmount阶段:在vue3中destroy已被弃用,所以我们使用卸载阶段替代.在main.js中使用如下代码,测试卸载过程.setTimeout(()=>{ app.unmount()},5000)完整阶段:<template> <div> <di...原创 2022-04-14 20:47:04 · 442 阅读 · 0 评论 -
Web前端开发之VUE05——Vue组件使用、组件通信、回顾
组件概念:在学习vue组件的使用之前,我们首先看一下之前的一个折叠板的案例。其中包含less语法样式表。请使用yarn add less less-loader安装匹配版本的less包,并将style中lang改为less以完成代码。<template> <div class="box"> <div><h1 v-text="title"></h1></div> <div class="border btn.原创 2022-04-13 22:06:58 · 562 阅读 · 0 评论 -
Web前端开发之VUE04——vue基础复习
目录1.vue是什么?2.@vue/cli全局包3.插值表达式4.MVVM设计模式5.动态属性:6.事件绑定:9.v-model的使用:10.v-text和v-html的使用:11.v-if和v-show的使用12.v-for的使用1.vue是什么?VUE:渐进式javascript框架渐进式:逐渐使用框架:一套规则的语法2.@vue/cli全局包(1).yarn global add @vue/cli ——获取VUE包(2).vu原创 2022-04-12 11:41:01 · 493 阅读 · 0 评论 -
Web前端开发之VUE03——vue插值表达式、MVVM设计模式、基础指令
vue插值表达式:MVVM设计模式:VUE的设计模式,可以实现双向绑定,同时对view和model的变化进行同时改变。v-bind:v-on:v-on中事件对象的传递:vue修饰符:详细修饰符见:详细修饰符https://cn.vuejs.org/v2/guide/events.htmlv-model:进行表单的value属性和我们变量互相绑定到一起。示例代码:<template> &...原创 2022-04-12 11:04:02 · 618 阅读 · 0 评论 -
Web前端开发之VUE02——vue框架、eslint检查代码、单vue文件、 vue文件的原始结构
eslint检查代码:eslint会自动检查代码的多余声明或错误项,并在项目控制台中显示出来。解决方法:单vue文件:vue文件的原始结构:原创 2022-04-09 13:57:37 · 642 阅读 · 0 评论 -
Web前端开发之VUE01——ES6导入和导出、promise、webpack、vue项目介绍、vue安装过程
首先我们要了解什么是VUE?所谓渐进式JS框架,其实就是要学他的语法。并且其本身是逐渐升级而来的一种框架。原创 2022-04-09 12:23:15 · 1070 阅读 · 0 评论 -
Web前端开发进阶笔记8——计算属性、侦听器、过滤器
1.计算属性:需要我们了解的是方法和计算属性的区别:方法的使用每次调用都会执行一遍,而计算属性的方法,每次调用如果是同一个调用值,我们只会通过缓存来使用它,性能较高。<div id="content"> <div>{{reverseMsg}}</div> <div>{{reverseMsg}}</div> <div>{{reverseNum()}}</div> <div>原创 2021-06-01 13:58:14 · 300 阅读 · 0 评论 -
Web前端开发进阶笔记7——自定义指令
1.自定义指令的入门:这里我们需要注意的是:指令中focus是自定义命令名,而自定义指令原创 2021-05-31 11:18:20 · 554 阅读 · 0 评论 -
Web前端开发进阶笔记6——Vue常用特性之表单操作、表单域修饰符
1.表单的基础操作:对于表单的操作我们主要展示几大类,text,radio,checkbox,option,textarea。需要我们注意的是,现在的表单一般不会再使用默认的提交方式,即submit按钮的默认方法,我们需要禁用掉,并使用我们后面学到的axios来实现前后端的交互。下面我会用一个简单的表单案例来实现一下以上五大类的用法:<div id="content"> <form> <!--我们知道当我们使用action属性时,在原创 2021-05-29 15:12:13 · 138 阅读 · 1 评论 -
Web前端开发进阶笔记5——分支循环结构、循环结构
1.分支结构:原创 2021-05-28 10:55:54 · 219 阅读 · 0 评论 -
Web前端开发进阶笔记4——属性绑定、样式绑定
1.属性的动态处理:v-model的低层实现原理分析:原创 2021-05-27 10:27:53 · 340 阅读 · 2 评论 -
Web前端开发进阶笔记3——事件绑定(鼠标键盘)
1.事件的绑定:示例:<div> <div>{{num}}</div> <input type="button" v-on:click="num++" value="add"/> <input type="button" v-on:click="num--" value="mins"/> </div> <script type="text/javascript"> var vmd原创 2021-05-26 11:03:52 · 353 阅读 · 1 评论 -
Web前端开发进阶笔记2——指令、数据响应式
1.指令:2.v-cloak的使用:在正常页面显示的时候,当我们页面重复刷新,可能会出现页面上的插值先显示{{..}},然后更迭为我们的值的情况。这个时候我们用到了v-cloak来防止闪动。3.v-text、v-html、v-pre的使用:4.数据响应式:如果显示的信息后续不再更新我们可以使用v-once,以调高性能。5.双向数据绑定:下面展示一下上面的所有内容的代码测试。<div> <!-- 这样会导致闪动 -->原创 2021-05-25 12:19:19 · 142 阅读 · 1 评论 -
Web前端开发进阶笔记1——Vue.js入门、基本内容的引入、大多数模板语法概述
1.Vue:渐进式JavaScript框架。2.基本内容的引入:3.模板语法概述。下一章我们会讲Vue的模板语法,以解决现有的问题。原创 2021-05-24 11:34:29 · 105 阅读 · 0 评论