VUE学习笔记

VUE学习笔记--vue-cli

1.介绍vue-cli是vue的脚手架工具，帮我们快速的生产了vue的起步项目，内置了一些必备的比如打包工具，比如配置文件等等2.安装vue-clinpminstall-g@vue/clivue--version3.创建一个项目vuecreatemy-project4.cli目录结构node_modeles项目的依赖中心public静态资源文件夹，和assets不同的是，public不会被webp
CelineT·2023-07-15 03:23

Vue学习笔记11

十一、computed的使用computed可以对属性进行计算，只有在属性发生变化时才会被触发，会大大提升效率。计算属性一定要有返回值return。method方法执行时，所有的方法都会执行，效率会下降。加A加BA--{{AddToA}}B--{{AddToB}}computed:{AddToA(){console.log("A++");returnthis.a+this.age;},AddToB
wing2464·2023-06-24 00:19

vue学习笔记(二)vue的生命周期和钩子函数

前言通过上一章的学习，我们已经初步的了解了vue到底是什么东西，可以干什么，而这一篇博客主要介绍vue的生命周期和它常用的钩子函数，如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet加载--->实例化--->服务--->销毁,对于vue的而言他也有自己的生命周期，那么一起来看看吧！本章目标学会并了解vue的生命周期和钩子函数学会使用手动挂载和调
一只流浪的小码农·2023-06-23 10:53

VUE学习笔记：插槽详解

刚开始看Vue官方文档的时候对插槽不是很理解，其实通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，具有高度的灵活性。1、使用场景先来看看插槽的使用场景，否则可能连学习的欲望都没有了。插槽还是很重要的，即使不去定义，也要学会使用。下面这个图中使用了Vant中的NavBar组件，该组件用于手机端标题展示，默认的组件展示的只有标题和返回按钮，但是在有些情况下，我们
子非余不知渔之乐·2023-06-23 05:26

VUE学习笔记

第一个DEMOVuedemo{{msg}}letvm=newVue({//必须挂载到一个根标签上el:"#app",data:{msg:"HelloVUE!"},});`文本使用“Mustache”语法(双大括号)输出vm的data数据到页面V-html指令innerHTML，vm视图绑定技术AttributeMustache语法不能作用在HTMLattribute上，遇到这种情况应该使用v-bi
浅瞳_e42e·2023-06-22 13:47

vue学习笔记-day03

day031.(掌握)JS高级函数1.1ES6循环for(letiinthis.books);i表示books里面的索引newVue({el:'#app',data:{books:['java','C#','paython','springboot']},methods:{}})for(letbookofthis.books);book是books里面的元素(或者是对象)newVue({el:'#
TomCloud·2023-06-14 11:50

vue学习笔记---(3)条件渲染(v-if && v-show)以及列表渲染(v-for)

1.条件渲染v-if用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-show用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候展示。带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销
Tomcat20·2023-06-13 04:47

Vue学习笔记07：ref 、动态组件、插槽、自定义指令

文章目录一、ref引用1.什么是ref引用2.引用DOM和组件实例3.this.$nextTick(cb)方法二、动态组件1.什么是动态组件2.动态组件渲染和keep-alive三、插槽1.什么是插槽2.插槽的基础用法3.具名插槽4.作用域插槽4.1表格使用作用域插槽四、自定义指令1.什么是自定义指令2.声明私有自定义指令的语法3.声明全局自定义指令的语法4.updated函数5.指令的参数值五、
双-鱼·2023-06-12 22:45

Vue学习笔记（篇一）——Vue.js基础知识

一、Vue.js基础知识（一）Vue是一个渐进式框架，什么是渐进式？1、渐进式意味着你可以将Vue作为你的应用的一部分嵌入其中，带来更丰富的交互体验。2、或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。3、比如Core+Vue+router+Vuex，也可以满足你各种各样的需求。（二）Vue有很多特点和Web开发中常见的高级功能1、解耦视图和数据2、可复用的组件3、
Etui۹(･༥･´)و ̑̑·2023-06-10 06:15

Vue学习笔记6——第一个vue-cli项目和webpack学习使用

什么是vue-clivue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;主要的功能:统一的目录结构本地调试热部署单元测试集成打包上线需要的环境Node.js:安装就无脑下一步就好,安装在自己的环境目录下.Git:https://git-scm.c
扎克风暴·2023-06-09 18:30

vue学习笔记

vue开发环境介绍npm(node包管理工具)安装node，自带npmnpm配置淘宝源镜像或者使用cnpmnpmconfigsetregistryhttps://registry.npm.taobao.orgnpminstall-gcnpmnpm配置文件package.json执行脚本script：npminstall->安装依赖模块npmstart->本地启动一个webpack-dev-serv
miccuci·2023-04-20 18:29

Vue学习笔记~狂神

+Vue简介SoC：关注度分离原则Vue只关注视图层HTML+CSS+JS：视图：给用户看刷新后台数据尤雨溪发布于2014年2月；网络通信：axios页面跳转：vue-router状态管理：vuex前段三要素HTML结构+CSS（表现）+JavaScript（行为）CSS预处理器CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成
小小程序猿··2023-04-20 05:21

Vue学习笔记（一）

一、声明式渲染声明式的将数据渲染进入DOM，通过名称app将VUe实例和div绑定起来，div中的message值跟随Vue实例中的数据message动态变化：即Vue控制Domhtml:{{message}}javascript:varapp=newVue({el:'#app',data:{message:'HelloWorld!'}})测试：进入控制台，修改message的值，页面中显示的me
CoderAPang·2023-04-19 00:18

Vue学习笔记（6. 组件之间传值）

1.组件基本语法(1)template(2)script(3)style2.父组件传值，子组件接值(1)父组件传值给子组件(2)子组件接收父组件的传值（随时接收）子组件的值会随着父组件值的变更而变更。但是子组件变更，不会影响父组件的数据。(3)子组件接收父组件的传值（只在初期接收一次）初期化接收参数。子组件的值不随着父组件值的变更而变更。子组件可以监听自己的数据。3.子组件传值，父组件接值(1)子
凯尔萨厮·2023-04-18 02:26

Vue学习笔记（4. 生命周期）

1.生命周期写法（vue2与vue3比对）创建前：vue3setup,vue2beforeCreate//组件创建前执行的函数创建后：vue3setup,vue2created//组件创建后执行的函数挂载前：vue3onBeforeMount,vue2beforeMount//挂载数据前执行的函数挂载后：vue3onMounted,vue2mounted//挂载数据后执行的函数更新前：vue3on
凯尔萨厮·2023-04-18 02:55

Vue学习笔记（5. 计算属性，监视器(侦听器)）

1.计算属性（computed）(1)get方式初期显示改变值后（hello->hello1）计算属性allStr跟随变更(2)getset方式页面初期显示改变值（hello->hello1）计算属性的get会监控到变更，使fullStr跟随变更改变计算属性（helloworld->helloworld3）set会监控到计算属性变更，做相应处理。2.监视器，侦听器（watch）(1).监听值组件初
凯尔萨厮·2023-04-18 02:55

Vue学习笔记（7. axios异步请求）

1.axios请求方式方式1：axios({method:"GET",url:"..."})方式2：axios({method:"POST",url:"...",data:"..."})方式3：axios.get("url...")方式4：axios.post("url...","data...")2.安装axios命令：npminstallaxios3.安装querystring命令：npmin
凯尔萨厮·2023-04-18 02:54

前后端分离开发Springboot+VUE学习笔记

学习内容视频来源：传送门vue的配置与安装：参考文档目录前后端分离实现技术创建vue项目在idea中打开新建页面创建SpringBoot应用创建实体对象与数据库表元素绑定创建实体类接口前端调用数据跨域传输在springboot中解决总结前后端分离前后端分离就是将一个应用的前端和后端代码分开写，为何如此？如果不使用前后端分离，会有什么问题？传统JavaWeb开发过程中，前端使用JSP开发，流程为前端
makerjack001·2023-04-17 16:40

Vue学习笔记-身份证规则校验

//身份证验证Vue.prototype.$checkIdCard=function(idCard){let_this=this;letbbd='';//出生日期letsex='';//性别letcanPass=true;idCard=idCard.toUpperCase();//转大写letlen=idCard.length;letcity={11:"北京",12:"天津",13:"河北",14
赵客缦胡缨v吴钩霜雪明·2023-04-16 00:40

vue学习笔记-- component组件的使用和传值

定义为了拆分vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要功能，就可以去调用对应的组件；组件化和模块化的区别：1、模块化：是从代码逻辑的角度进行划分的；2、组件化：是从UI界面的角度进行划分的；方便ui组件的重用；方式1使用过程：使用vue.extend来创建全局的vue组件（通过template属性，指定了组件要展示的html结构）使用vue.component(‘组
watson_pillow·2023-04-15 20:10

Vue学习笔记之四Vue的Ajax请求

4.Vue的Ajax请求4.1Vue-resource插件介绍下载地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inte
聽見下雨的_聲音·2023-04-15 20:02

Vue学习笔记[03]-计算属性和方法

什么是vue的方法vue的方法和之前的el,data一样,是vue实例的options参数,可以随vue的实例构造传入.下面是两个例子介绍了methods的基本用法:clickme{{counter}}times!letvm=newVue({el:'#app',data:{counter:0,}})在上一个例子中,我们没有使用methodsoptions,因为我们的事件处理足够简单,基于vue的响
神楽花菜·2023-04-14 22:25

vue学习笔记-6-样式绑定

一，通过标识位来控制class的样式是否启用[v-cloak]{display:none}#app{width:20%;margin:200pxauto;line-height:40px;border:1pxsolid#ccc;padding:10px;}.active{height:50px;width:100;background:red;}样式是否启用的切换varvm=newVue({el:
笑道三千·2023-04-14 17:37

python vue admin_Vue学习笔记-vue-element-admin 前端学习

├──build#构建相关├──mock#项目mock模拟数据├──plop-templates#基本模板├──public#静态资源││──favicon.ico#favicon图标│└──index.html#html模板├──src#源代码@路径│├──api#所有请求│├──assets#主题字体等静态资源│├──components#全局公用组件│├──directive#全局指令│├─
weixin_39719018·2023-04-14 17:07

vue :class 动态绑定样式_VUE学习笔记----day1

MVVM结构在MVVM中View和Model是不可以直接进行通信的，它们之间存在这ViewModel这个中介充当着观察者的角色。当用户操作View，ViewModel感知到变化，然后通知Model发生相应改变，反之亦然。ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。VUE的实现MVVM方式数据监听器Observer将普通的JS
weixin_39801356·2023-04-14 17:07

vue学习笔记10-绑定样式

绑定样式：1.class样式写法:class="xxx"xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式不多用:style="{fontSize:xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。更
lazy91·2023-04-14 17:05

Vue学习笔记---------Vue入门（二）

Vue学习笔记---------Vue入门（二）计算属性(computed)定义：要用的属性不存在，要通过已有的属性计算得来原理：底层借助了Object.defineProperty方法提供的getter
神秘的帅哥·2023-04-14 17:35

Vue学习笔记-样式绑定

{{name}}{{name}}{{name}}点我改变背景颜色Vue.config.productionTip=false;newVue({el:'#box1',data:{name:'hellowworld!',classObj:{color2:false,r:true,},styleObj:{fontSize:'40px'}}})constvm=newVue({data:{name:'hel
printf_________·2023-04-14 17:32

vue学习笔记-绑定属性 绑定class及style（2）

vue学习之绑定属性绑定class及style绑定属性：鼠标移上去看看鼠标移上去看看{{msg}}exportdefault{name:'app',data(){return{msg:'我是绑定的text',title:'我是绑定的title属性',url:'src/assets/logo.png',p:'我是一个p标签'}},methods:{}}运行效果如下：绑定class与style：中华人
键指江湖·2023-04-14 17:57

vue学习笔记--绑定样式

1.绑定class样式--字符串写法{{name}}2.绑定class样式--数组写法{{name}}3.绑定class样式--对象写法{{name}}4.绑定style样式--对象写法{{name}}5.绑定style样式--数组写法{{name}}{{name}}{{name}}{{name}}{{name}}{{name}}Vue.config.productionTip=false;//阻
清浅九天·2023-04-14 17:57

Vue学习笔记-项目开发2.1轮播图插件 vue-awesome-swiper的使用

1、vue-awesome-swiper组件的安装：npminstallvue-awesome-swiper--save如果指定版本号：[email protected]、vue-awesome-swiper的官网：https://github.com/surmon-china/vue-awesome-swiper3、使用vue-awsome-swi
Kasey_L·2023-04-14 17:25

vue学习笔记（二）

（一）中主要介绍了vue.js的v-xxx指令，这次最主要学习vue中的核心组件构成组件必须是挂载在某个元素下才能被渲染的。整个组件使用的过程大概是这样：使用Vue.extend()组件构造器来构造组件->使用Vue.component(param1,param2)来注册组件->实例化newVue（）挂载组件。有时候我们直接在Vue.component中创建组件构造器。【这是一种语法糖】代码如下如
841只·2023-04-11 22:28

Vue学习笔记[13]-使用vue-router

在使用vuecli创建项目时可以添加vue-router,或使用npm安装vue-router配置路由跳转://./src/router/index.js//1.导入importVuefrom'vue'importVueRouterfrom'vue-router'//导入组件importHomefrom'../components/Home'importAboutfrom'../component
神楽花菜·2023-04-10 12:49

Vue学习笔记 —— node.js与vue脚手架安装

nodejs简介：Node.js是一个开源与跨平台的JavaScript运行时环境。JavaScript程序可以运行在浏览器中JavaScript程序可以运行在Node.js环境中Node.js在浏览器外运行的。安装Vue脚手架需要先安装Node.js(安装好了的不要随意卸载Nodejs)安装Node.js:win+r输入cmd或者在我的电脑打开cmd下载Node.js：（找到与自己电脑对应的）中
莫非C·2023-04-10 10:05

【Vue】Vue学习笔记——基础语法

文章目录1.Vue基础语法1.1模板语法1.1.1插值1.1.2指令1.1.3过滤器1.2实例及选项1.2.1数据选项1.2.2属性选项1.2.3方法选项1.2.4计算属性1.2.5表单控件1.2.6生命周期1.3模板渲染1.3.1条件渲染1.3.2列表渲染1.4事件绑定1.4.1基本用法1.4.2修饰符1.5基础demo案例#Vue引入vue.js(这里是文件夹里有vue.js)也可以使用cdn
shen子怡·2023-04-10 10:59

2023/1/9 Vue学习笔记 -TodoList案例 -【props】最初的父传子 子传父值 && localStorage sessionStorage && 组件自定义事件

这里涉及到组件的传值，这是一个很好的例子讲解-最初始的传值方式1静态组件-准备阶段App.vueimportUserHeaderfrom"@/components/UserHeader"importUserFooterfrom"@/components/UserFooter"importUserListfrom"@/components/UserList"exportdefault{name:'A
@Autowire·2023-04-10 05:15

2023/1/6 Vue学习笔记-模板语法 & 数据绑定 & 数据代理 & 事件 & 计算属性 & 监视属性

尝试Vue.js最简单的方法是使用HelloWorld例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个.html文件，然后通过如下方式引入Vue：1声明式渲染-引入Hello案例Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。下面一个demo讲解：TitleHello-{{message}}Vue.config.producti
@Autowire·2023-04-10 05:14

webpack+vue学习笔记

路径中引用中的@符号是什么意思？在看使用webpack打包的项目代码时，经常会看到在路径中引用@符号importonefrom'@/views/one.vue'那这里的@符号到底表示什么意思呢？这其实利用了webpack的resolve.alias特性，webpabk.config.js的配置代码如下，在webpack打包时，会把路径引用中的@符号，转换为相对应的路径。constpath=requ
truman12·2023-04-09 18:23

Vue学习笔记之过滤器 filter

前言Vue的过滤器，了解一下？过滤器，顾名思义，字面意思就是将一种数据经过加工过滤成另外一种数据。常见的业务场景就是对一些常见的文本格式化。学习文档快速入口正文过滤器的用处过滤器可以用在两个地方:双花括号插值和v-bind表达式。{{time|formatDate}}由上面示例代码应该不难看出，在使用过滤器的时候，语法规则：需过滤的文本加上“管道”符号（｜）然后加上过滤器，即文本｜过滤器。过滤器的
Kity_Pei·2023-04-08 11:07

【Vue学习笔记_13】webpack前端模块化打包

【Vue学习笔记_13】webpack前端模块化打包webpack初识与grunt/gulp的对比webpack安装webpack基本使用webpack配置webpack.config.jspackage.jsonwebpack-loadercss
BugFrog1024·2023-04-07 23:33

vue学习笔记（一）：使用 vue cli 初始化项目

安装vue-clivue官方提供了vue-cli用于创建工程化的vue项目，vue的脚手架需要先全局安装，前置条件是电脑中需要有安装node环境$npminstall@vue/cli-gor$yarnglobaladd@vue/cli运行命令检查脚手架是否安装完成，如果简写的话，V是大写的$vue-Vor$vue--version如果正常安装的话，运行上面检测安装完成的命令后，应该是如下结果：@v
「已注销」·2023-04-06 20:07

Html+Css+JavaScript基础知识点

0、软件安装使用vscode进行开发安装中文插件Vue学习笔记_lucky友人a的博客-CSDN博客软件下载点击1、HTML1、HTML（HyperTextMarkupLanguage）中文译为：超文本标记语言
lucky友人a·2023-04-05 21:52

Vue学习笔记 —— 第一章Vuex状态管理模式的State基础使用

Vue学习笔记——第一章Vuex状态管理模式的State基础使用前言Vuex项目示例基础搭建CSDNTestCSDNTest2CSDNTest3CSDNTest4结束语前言好久没写Vue项目了，刚好最近学习
葬心啊·2023-04-05 12:31

Vue学习笔记

基本使用：vueinitwebpackvue-demo结构:```newVue({el:'#app',data:{...},methods:{....}})```鼠标喵上去看一下绑定文字：{{xxx}}=v-text{{key}}----{{item}}xxxxxxxxxxxxv-if代表节点不存在v-show是将display设置成了none,不支持template标签(性能开销小)key值要使
背着梦的幸存者·2023-04-05 09:46

自用Vue学习笔记

Vue学习笔记1.MVVM前端开发思想MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：Model:数据模型，特指前端中通过请求从后台获取的数据View:视图，用于展示数据的页面
紫薇泠雪·2023-04-05 01:58

VUE学习笔记 -- 页面传值

1.父页面向子页面传值在父组件中引用的子组件处在子组件中接收props:['aaa']父页面：Father.vue这是父页面importSonfrom"@/views/log/template/Son";exportdefault{name:"Father",components:{Son,},data(){return{a:100,user:{name:'张三',age:18,general:'
CelineT·2023-04-04 15:29

Vue学习笔记03：Vue基础入门

文章目录Vue基础入门一、Vue简介1.什么是vue1.1解读核心关键词：构建用户界面1.2构建用户界面的传统方式1.3使用vue构建用户界面1.4解读核心关键词：框架1.5总结：什么是vue2.vue的特性2.1数据驱动视图2.2双向数据绑定2.3MVVM2.4MVVM的工作原理3.vue的版本3.1vue3.x和vue2.x版本的对比二、Vue的基本使用1.导入Vue的多种方式1.1CDN引入
双-鱼·2023-04-04 05:25

day6 vue 学习笔记 vue-router路由

系列文章目录day1学习vue2笔记vue指令day2学习vue2笔记过滤器侦听器计算属性axiosday3vue2学习笔记vue组件day4vue学习笔记组件生命周期数据共享数组常用方法day5vue
小鬼當街·2023-04-03 20:40

Vue学习笔记 —— vue-router之router-link

router-link标签中属性to,指定跳转的路径。tag:指定router-link渲染成什么元素，比如说渲染button、li、span等等。replace:不会留下history的记录，所以指定replace的情况下，后退或者是返回是不能返回到上一个页面。
莫非C·2023-04-03 20:06

vue学习笔记05（vue-router）

目录一、安装路由二、在项目中引入三、使用路由四、路由组件传参1、动态路由2、props路由组件传参五、嵌套路由配置六、别名七、History模式八、编程式导航1、不带参数2、带参数（params和query）九、路由导航守卫1、全局前置守卫2、全局后置钩子3、路由独享守卫4、组件内的守卫（3个）5、路由元信息在vue中，对页面的管理用到的是路由（vue-router）路由作用：完成页面的跳转，来管
小天呐·2023-04-03 19:14
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他