------vue学习

vue学习-08全局事件总线与消息订阅与发布

Vue的全局事件总线Vue.js的全局事件总线是一种常见的通信模式，它允许不同组件之间进行通信和数据传递，而无需直接引用彼此。全局事件总线的核心思想是创建一个中央事件总线对象，允许组件在其中发出事件并监听事件。下面是如何在Vue.js中创建全局事件总线的步骤：创建一个事件总线对象：在你的Vue.js应用中，通常在根实例（main.js或根组件）中创建一个事件总线对象。你可以使用Vue实例作为事件总
Miaow.Y.Hu·2023-09-29 09:37

vue学习-10vue整合SpringBoot跨域请求

在Vue.js应用整合SpringBoot后端时，需要处理跨域请求。跨域请求通常发生在前端应用运行在不同的域名或端口上时，而后端服务运行在不同的域名或端口上。以下是一种处理跨域请求的常见方式：后端（SpringBoot）配置在SpringBoot项目中配置CORS（跨域资源共享）以允许来自前端应用的跨域请求。@ConfigurationpublicclassCorsConfig{@Beanpubl
Miaow.Y.Hu·2023-09-29 09:33

Vue学习笔记

1.计算属性computed与监听属性watch的区别1>计算属性是依赖的属性值改变后，将计算属性的返回值作为最新结果，所以，里面不能异步的返回结果，不可以写异步逻辑。2>监听属性是监听的值改变后会重新执行函数，将一个值重新赋值作为返回结果，可以写异步逻辑。示例如下：{{msg}}{{newValue}}点击letvm=newVue({el:'#app',data:{msg:'hello',new
WEB前端开发者·2023-09-29 06:32

vue学习+vscode

一、增加扩展1.Chinese(Simplified)LanguagePackforVSCode中文（简体）语言包2.openinbrowser右击选择浏览器打开html文件3.AutoRenameTag自动重命名配对的html/xml标签4.CSSPeek追踪到样式5.JS-CSS-HTMLFormatter每次保存都会自动格式化jscss和html代码6.EasyLESS插件用来把less文件
marsman2010·2023-09-27 06:33

尚硅谷课程vue学习（一）

目录data两种写法el两种写法由vue管理的函数，一定不要写箭头函数，不然this指向windows实例了MVVM模型defineProperty属性数据代理v-on:v-bind:键盘事件keyupkeydowncomputed计算属性监视属性watch监视属性和计算属性区别绑定class和style属性条件渲染v-if,v-show列表渲染课程地址：https://www.bilibili.
与风共舞true·2023-09-27 06:38

【前端】vue学习5 : vue + ElementUI

vue+elementUI项目搭建命令行需要管理员权限。根据之前创建vue-cli项目一样再来一遍创建项目。1、创建一个名为hello-vue的工程vueinitwebpackvue-elementD:\IdeaProjects\vue>vueinitwebpackvue-element‘git’�����?Projectnamevue-element?Projectdescription回车?A
nickkkkkkkkk·2023-09-26 09:39

vue学习（29）VueComponent

知识点school组件本质上是一个VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。我们只要写或者，vue解析时会帮我们创建school组件的实例对象。即vue会帮我们执行newVueComponent(options)。每次调用Vue.extend，返回的都是一个全新的VueComponent。关于this的指向①：组件配置中data函数，methods中的函
哆啦C梦的百宝箱·2023-09-26 00:49

vue学习-06todoList案例与浏览器本地存储

TodoListTodoList（任务列表）是一个简单的Web应用程序示例，用于管理任务、代办事项或清单。Vue.js是一个非常适合构建这种类型应用程序的框架，因为它提供了数据绑定、组件化、响应式和轻松管理用户界面的能力。以下是一个基本的Vue.jsTodoList的示例：任务列表显示：在Vue.js中，你可以使用数据绑定来动态渲染任务列表。任务列表通常以一个数组的形式存在，Vue.js会帮助你将
Miaow.Y.Hu·2023-09-25 20:36

vue学习-07TodoList本地存储以及TodoList的自定义事件

关于TodoList在上篇也简单介绍了，这篇，就是将TodoList与本地存储绑定起来，算是综合利用吧，在实际开发中我们均有涉及到灵活使用我们所学所敲的demo，这或许就是我们平时多敲demo然后实际开发中CV改造Demo吧。Todolist本地存储main.js//引入Vue组件importVuefrom'vue';//引入App组件importAppfrom'./App.vue';//关闭Vu
Miaow.Y.Hu·2023-09-25 20:34

Vue学习之路第十五篇：v-if和v-show指令

1、v-if和v-show都是用来实现条件判断的指令。2、先看代码click这是v-if指令控制这是v-show指令控制varvm=newVue({el:"#app",data:{flag:true},methods:{reverse(){this.flag=!this.flag;}}});通过点击按钮来控制v-if和v-show对应元素的显示和隐藏。从页面展示现象看，这两个指令的作用是一样的，我
weixin_30315723·2023-09-25 15:37

Vue学习笔记

本博客记录Vuev2.7.8的学习，参考文档目录Vue概述入门案例Vue指令v-bind和v-modelv-onv-if和v-showv-for综合案例生命周期Vue概述一个完整的html页面包括了视图和数据，数据是通过请求从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显，这就需要我们使用DOM操作。正因为这种开发流程，所以引入了一种叫MVVM(Model-View-View
weixin_43739821·2023-09-25 10:39

Vue学习：浏览器本地存储localStorage

本地存储：localStorage搜网址，底下显示你搜索的历史保存在本地存储中自己编写一段本地存储，用window上的方法localStorage.setItem("key","value")：保存数据：对于对象使用JSON.stringifyloaclStorage点我保存一个数据letp={name:'z',age:20}console.log(p.toString())functionsav
¡Venceremo·2023-09-24 20:47

Vue学习笔记

vue的特性数据驱动视图双向数据绑定底层原理是MVVM(Model数据源,view视图,modelviewVue实例)数据驱动视图数据的变化会驱动视图自动更新优点：只需要维护数据，页面结构会被vue自动刷新双向数据绑定填写表单时，在开发者不操作DOM的前提下，自动把用户填写的内容同步到数据源中js数据的变化，会被自动渲染到页面上MVVM在MVVM概念中：model代表当前页面渲染时所依赖的数据源V
科黎·2023-09-24 18:51

Vue学习笔记

vue的学习有一阵子了，打算在这新的一年花一点时间去沉淀一下。本篇文章主要是围绕vue2.0官方文档进行简化和总结，如果读者是零基础，请阅读官方文档~(2022/1/3…持续更新https://cn.vuejs.org/v2/guideVue2.0学习笔记Vue的介绍Vue2.0指令篇内容渲染条件渲染用key管理可复用的元素循环渲染维护状态属性绑定v-bind:事件绑定v-on:事件修饰符按键修饰
okouk·2023-09-22 16:53

Vue学习（5）-插槽slot

插槽就是子组件预留给父组件放置内容的空间，如果没有插槽，那么我们在父组件中使用子组件时，往子组件里添加内容是无效的。父组件：这里是父组件DOM那么有什么办法可以让子组件标签像div一样可以在里面放置内容吗？当然是有的，就是我们要介绍的插槽slot。slot如果我们在子组件中添加插槽，那么放入子组件标签中的内容就会被加载到slot中。子组件：这是子组件这样父组件中添加的内容将会替换掉slot，相当于
小焲·2023-09-21 20:10

Vue学习笔记

课程来源：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=4&vd_source=6f37192b213c98639a87ec77b26d105d学习计划：一天学10节，从第四节开始做笔记，预计16天完成（完成日期2022年12月7日）目录：目录2022年11月20日：一、搭建Vue开发环境二、HelloWorld小案例三、分析Hello案例四、模板语法
懒羊羊♛·2023-09-21 07:14

（三）Vue之模板语法

文章目录插值语法指令语法Vue学习目录上一篇：（二）初识Vue下一篇：（四）Vue之数据绑定Vue模板语法有2大类：1.插值语法2.指令语法插值语法功能：用于解析标签体内容。
忆亦何为·2023-09-21 05:00

vue学习

letid=0exportdefault{data(){return{newTodo:'',hideCompleted:false,todos:[{id:id++,text:'LearnHTML',done:true},{id:id++,text:'LearnJavaScript',done:true},{id:id++,text:'LearnVue',done:false}]}},compute
我是公鸡奶油多·2023-09-20 09:08

Vue学习笔记

初识Vue需要创建Vue实例root容器代码需要符合html规范，但是混入了一些特殊的Vue语法root容器代码被称为Vue模板容器和Vue实力之间一一对应注意区分js表达式、js代码：一个表达式会生成一个值，可以放在任何一个需要值的地方{{}}需要写js表达式，可以读取data中的所有属性data中属性的值发生改变，那么页面中用单该属性的地方也会自动更新真实开发中只有一个vue实力，并且会配合着
朝阳王铁蛋·2023-09-20 05:13

vue学习06-插件与Scoped属性

插件在Vue.js中，插件是一种用于扩展Vue.js应用的机制，它允许你在全局范围内添加新的功能或库，以便在多个组件中共享和重用。以下是与Vue.js插件相关的一些概念和使用方式：插件的定义：插件通常是一个包含install方法的JavaScript对象或函数。这个install方法在安装插件时被调用，可以接受Vue构造函数作为参数，以便在全局范围内添加功能或组件。例如：//MyPlugin.js
Miaow.Y.Hu·2023-09-19 21:12

vue学习-04vue的props配置项和mixin混入

今天仍然就是敲vue的一个demo，vue的props配置项和mixin混入props配置项Vue.js中的props是用于在父组件向子组件传递数据的配置项。通过props，你可以将父组件中的数据传递给子组件，并在子组件中使用这些数据。以下是关于props配置项的一些重要信息：父组件向子组件传递数据：通过在子组件的props中声明属性，可以告诉Vue.js你希望从父组件传递哪些数据到子组件。这些属
Miaow.Y.Hu·2023-09-19 21:42

FE_Vue学习笔记 - 组件的理解vue vc

1单文件组件在Vue应用中，单文件组件（SingleFileComponents）是一种特殊的文件格式，以.vue为后缀，它允许开发者在一个文件中定义一个Vue组件的全部内容。每个单文件组件由三个部分组成：template（模板）、script（脚本）和style（样式）。这些部分分别代表Vue组件的结构、逻辑和样式。具体而言，一个单文件组件的构成如下：template部分：这部分使用HTML语法
@Autowire·2023-09-18 21:23

FE_Vue学习笔记 - 数据代理

Vue中的数据代理是一种机制，通过它，Vue实例（vm）可以代理其数据对象（data）中的属性操作。这种代理的原理主要是通过Object.defineProperty()方法，将data对象的每个属性都添加到vm对象上，并为这些属性定义getter和setter方法。在getter和setter内部，我们可以进行对data中对应属性的读取和修改。通过这种方式，Vue实例可以方便地代理其数据对象中的
@Autowire·2023-09-18 21:45

vue学习-03vue父子组件与ref属性

本篇开始，我们将复习一下上篇的组件引入：App.vue//引入组件。语法：import组件名from'组件的路径'importSchoolfrom'./components/School.vue'importStudentfrom'./components/Student.vue'//暴露App(父)组件exportdefault{name:'App',//注册子组件components:{Sch
Miaow.Y.Hu·2023-09-18 20:56

vue学习-02vue入门之组件

删除Vue-cli预设在用户根目录下(C:\Users\你的用户名)这个地址里有一个.vuerc文件,修改或删除配置组件Props(组件之间的数据传递)Prop的大小写(camelCasevskebab-case)不敏感Prop类型:StringNumberBooleanArrayObjectDateFunctionSymbol传递静态或动态Prop单向数据流:只能父传子，不能子传父Prop验证：
Miaow.Y.Hu·2023-09-18 20:26

vue学习-01vue入门

Vue官网地址https://cn.vuejs.org/Vue介绍Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。兼容性Vue不支持IE8
Miaow.Y.Hu·2023-09-18 20:52

Vue学习（4）条件渲染

v-ifv-if实现按条件渲染目标yes#在元素上使用v-if当分组渲染时，将元素作为不可见的包裹元素，并在上面使用v-if，实现分组条件渲染。#v-elsev-else必须在v-if或者v-else-if后。yesno#v-else2.1.0新增v-else-if必须在v-if或者v-else-if后，可连用。ABnotA/B#用key管理可复用的元素Vue的渲染机制：复用已有元素，提高算然速度
好遠·2023-09-18 15:32

vue学习之vue cli创建项目

安装node.jshttps://nodejs.org/en安装vueclinpminstall-g@vue/cli--registry=https://registry.npm.taobao.org创建项目执行创建命令，回车vuecreatevue-cli-learning选择“Manuallyselectfeatures”，回车“空格”关闭Linter/Formatter选项，回车
赴前尘·2023-09-17 06:47

vue学习之组件化开发

1.vue创建基于vue2的项目vuecreatevue-cli-learning选择“Manuallyselectfeatures”取消勾选“Linter/Formatter”选择“2.x”选择“Inpackage.json”输入“N”回车
赴前尘·2023-09-17 06:47

vue学习之Font Awesome图标

官方文档https://fontawesome.com.cn/v5FontAwesome安装cnpminstallfont-awesome/src/main.js引入cssimportVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./Ap
赴前尘·2023-09-17 06:16

vue学习之element-ui组件集成

1.element-ui链接https://element.eleme.cn/#/zh-CN2.element-ui安装cnpminstallelement-ui3.创建项目https://blog.csdn.net/qq_36940806/article/details/132921688?spm=1001.2014.3001.55024.引入element库/src/main.js引入elem
赴前尘·2023-09-17 06:13

Vue学习笔记总结

目录1、Vue核心1.1什么是vue?1.2什么是mvvm?编辑1.3插值表达式{{}}2.Vue中的常用指令2.1内容渲染指令2.2条件渲染指令2.3事件绑定指令2.4属性绑定指令2.5列表渲染指令2.5.1小案例-小黑的书架2.6v-for中的key2.7双向绑定指令3.指令修饰符3.1什么是指令修饰符？3.2按键修饰符3.3v-model修饰符3.4事件修饰符4.v-bind对样式控制的增强
钟月一人·2023-09-15 15:29

Vue学习

文章目录Vue.js前端框架入门一、什么是Vue.js二、Vue.js生态圈及其周边扩展三、Vue.js框架的结构、组件开发思想四、Vue.js所适用的场景Vue安装Node.js环境安装创建一个Vue应用vue官网：[https://cn.vuejs.org/](https://cn.vuejs.org/)Vue.js前端框架入门一、什么是Vue.js是渐进式JavaScript框架，广泛使用的
初学小白Lu·2023-09-15 08:30

Hls.js播放m3u8视频 & DPlayer视频播放器（easypan） & MSE简介

文件切片java实现TsControllerTsServiceDPlayer播放m3u8视频效果扩展内容：MSE(MediaSourceExtensions)介绍1概述2whyMSE代码安装依赖App.vue
ps酷教程·2023-09-14 12:56

Vue 学习记录与案例总结

Vue学习记录与案例总结https://gitee.com/pikachu2333/vue-learning
WalkingWithTheWind～·2023-09-14 01:22

Vue学习笔记-Vue的指令

二、指令文章目录二、指令1.内容渲染指令v-text{{}}v-html2.属性绑定指令3.使用JavaScript表达式4.事件绑定指令事件对象event绑定事件并传参$event事件修饰符①.prevent②.stop③.capture④.once⑤.self按键修饰符5.双向绑定指令v-model指令的修饰符6.条件渲染指令v-if和v-show的区别v-else7.列表渲染指令使用key维
不会挂科i·2023-09-13 11:02

Vue学习笔记-Vue项目的搭建

一、初识vue文章目录一、初识vue1将vue.js下载到本地的方式创建2安装vue调试工具vue-devtools3使用vite安装vue项目结构1将vue.js下载到本地的方式创建将下载好的vue源码放在项目中引入vue声明要被vue控制的DOM区域创建vue的配置对象在配置对象中创建数据创建一个应用，将配置对象传进去，并将要操作的DOM区域进行了挂载在DOM区中操作Document{{num
不会挂科i·2023-09-13 11:01

Vue学习笔记---初识组件

前言在Vue中，万物皆组件，学习组件乃是Vue的根基所在，假如一个页面相当于一张图，那么组件就是一个小小的拼图，通过组件可以拼出各式各样的图，这也是Vue的魅力所在。正文基本示例Vue.component('button-counter',{data(){return{count:0}},template:'Youclickedme{{count}}times.'})上面我们创建了一个全局的名字为
邓生的邓生·2023-09-12 21:39

vue学习之事件绑定

事件绑定创建demo5.html,内容如下Documentcountvalue:{{count}}+1+1constvm={data:function(){return{count:0,}},methods:{addCount(){this.count+=1},},}constapp=Vue.createApp(vm)app.mount('#app')效果展示
赴前尘·2023-09-11 06:39

vue学习之列表渲染

列表渲染创建demo8.html,内容如下Documentindex:{{i}}name:{{user.name}}constvm={data:function(){return{userList:[{id:1,name:'zs'},{id:2,name:'ls'},{id:3,name:'ww'},]}},}constapp=Vue.createApp(vm)app.mount('#app')效
赴前尘·2023-09-11 06:16

vue学习之 v-for key

v-forkeyVue使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素。创建demo9.html,内容如下Document添加index:{{i}}name:{{user.name}}constvm={data:function(){return{userList:[{id:1,name:'zs
赴前尘·2023-09-11 06:16

vue学习之v-if/v-else/v-else-if

v-else/v-else-if创建demo7.html,内容如下Document随机数:{{num}}0.5">随机数大于0.5随机数小于或等于0.5优秀良好一般差测试点击constvm={data:function(){return{num:Math.random(),a:false,type:'A',}},}constapp=Vue.createApp(vm)app.mount('#app'
赴前尘·2023-09-11 06:16

vue学习之条件渲染

条件渲染用于控制组件显示创建demo6.html,内容如下DocumentToggleFlagv-if:requestsuccessv-show:requestsuccessconstvm={data:function(){return{flag:false,}},}constapp=Vue.createApp(vm)app.mount('#app')效果展示
赴前尘·2023-09-11 06:14

vue学习之属性绑定

内容渲染采用：进行属性渲染创建demo3.html,内容如下Document必应constvm={data:function(){return{//超链接地址link:"https://cn.bing.com/",//文本框提示内容inputValue:'请输入内容...',//图片srclinkimgSrc:'https://i2.3conline.com/images/piclib/20110
赴前尘·2023-09-10 20:13

vue学习之Javascript 表达式内容渲染和属性绑定

Javascript表达式内容渲染和属性绑定创建demo4.html,内容如下Document{{number+1}}{{ok?'true':'false'}}{{message.split('').reverse().join('')}}xxx{{user.name}}constvm={data:function(){return{number:10010,ok:true,message:'te
赴前尘·2023-09-10 20:13

vue学习之基本用法

1.前期准备安装vscodeIDE，vscode安装插件openinbrower新建vue-learning文件夹vscodeIDE打开文件夹2.基本用法创建demo1.html文件,内容如下Document{{message}}//3.创建vue实例对象const{createApp,ref}=VuecreateApp({setup(){constmessage=ref('Hellovue!')
赴前尘·2023-09-10 20:43

vue学习之内容渲染

内容渲染创建demo2.html,内容如下Documentname:{{username}}age:{{age}}constvm={data:function(){return{username:'zs',age:18,desc:'必应'}}}constapp=Vue.createApp(vm)app.mount('#app')效果展示右键，在默认浏览器打开，效果如下
赴前尘·2023-09-10 20:42

Vue学习的第十天

组件#全局注册可以通过以下方式创建一个Vue实例newVue({el:"#some-element",//选项})要注册一个全局组件可以使用Vue.component(tagname,options)，组件在注册之后，便可以作为自定义元素在一个实例的模板中使用。注意确保在初始化根实例之前注册组件Vue.component("my-component",{//选项})#局部注册不必把每个组件都注册到
Easy_Dream·2023-09-10 02:27

Vue学习笔记 之 Svg图标组件的实现步骤

1、安装依赖  首先需要安装svg-sprite-loader依赖，命令如下，这在在学习的过程中，就是因为没有下载该依赖，导致图标一直无法正常显示。npminstallsvg-sprite-loader--save-dev--force2、配置svg图片处理规则  通过使用svg-sprite-loader组件，将svg的图标文件生产雪碧图（Sprite），在vue.config.js文件中进行配
姠惢荇者·2023-09-08 20:47

Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时，Nginx的配置方式

一、History模式、Hash模式  VueRouter是Vue.js官方的路由管理器，用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的URL到对应的组件，实现页面间的跳转和导航。VueRouter支持两种路由模式：history模式和hash模式。1、History模式  在History模式下，VueRouter通过使用HTML5HistoryAPI来管理路由，不会在URL中
姠惢荇者·2023-09-08 20:47
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他