vue学习

Vue学习——计算属性、监听属性、动画

Vue学习——计算属性、监听属性、动画一、计算属性1.引入当模板不再是简要的声明式逻辑时，而是需要对其进行一些操作时会显得难以处理。因此，对于任何复杂逻辑，应当使用“计算属性”。
Elainerui·2024-02-11 10:32

VUE学习——计算属性

{{name.length>0?true:false}}{{commputedValue}}exportdefault{data(){return{name:"vue"}},methods:{},computed:{commputedValue(){returnthis.name.length>0?true:false;}}}使用computed对象。在methods可实现相同的结果。
BUG批量生产者·2024-02-11 10:01

VUE学习——事件参数

接前一节，事件绑定之后，我们需要传递参数。{{item}}exportdefault{data(){return{items:["明神","博子","饼子"]}},methods:{getNameHandler(msg,e){console.log(msg);e.target.innerHTML="name:"+msg;}}}这个的传递参数getNameHandler(msg,e)，可以只传弟第一
BUG批量生产者·2024-02-11 10:01

VUE学习——事件修饰符

阻止默认事件baidubaiduexportdefault{data(){return{}},methods:{onClickHandle(e){e.preventDefault();}}}其中e.preventDefault();，和@click.prevent作用一样。阻止冒泡事件父级和子级相互嵌套时，只触发子级，而不触发父级。.stopVUE官方文档
BUG批量生产者·2024-02-11 10:01

VUE学习——数组变化侦测

官方文档变更方法：使用之后，ui可以直接发生改变。改变原数组替换数组：使用之后需要接受重新赋值，不然ui不发生改变。不改变原数组
BUG批量生产者·2024-02-11 10:31

VUE学习笔记 父子组件传值

父组件通过props向下传递数据给子组件；子组件通过events给父组件发送消息。子组件向父组件传值子组件使用this$emit（'自定义事件名',要传送的数据）向父组件传递数据。1.template模块里面直接使用this$emit（'自定义事件名',要传送的数据）2.事件里面使用this$emit，使代码结构更清晰//这是子组件editData.vue$emit('saveEdit',this
刀钝刃乏·2024-02-11 03:18

Vue学习笔记5--前端工程化

前端工程化完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ模块化相关规范概述传统开发问题命名冲突文件依赖模块化含义：把单独的一个功能封装到一个模块（文件）中,模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块好处：方便代码重用，提升开发效率，方便后期维护浏览器端模块化规范AMD（Require.js）CMD（Sea.js）服务器端模块化规范Comm
UtilMan·2024-02-09 05:36

学习vue.config.js 结合 webpack

happyPack参考链接vue学习文章，
未来可期wlkq·2024-02-08 20:58

vue学习笔记

Vue1.webpack4配置文件consthtmlWebpackPlugin=require('html-webpack-plugin');constVueLoaderPlugin=require('vue-loader/lib/plugin');//打包提取cssconstExtractTextPlugin=require("extract-text-webpack-plugin");//混淆
-SkyBlue-·2024-02-07 13:59

vue学习的第一步，vscode介绍及相关插件安装

1：vsvode简介VisualStudioCode(简称VSCode/VSC)是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。还有其几款ide,webstorm,Sublime,text3等，看
都是地址而已·2024-02-07 08:14

vue学习76-90

路由模块封装p76将路由模块抽离出来拆分模块，利于维护放到router文件夹要导入vue和导出router@是src，绝对路径声明式导航p77-79导航链接router-link取代了aherf，配置to属性指定路径（不用加#号）本质还是a标签但和a标签的区别是能高亮，默认就会提供高亮类名，可以直接设置高亮样式.appa.router-link-active{background-color:an
dundundunsis·2024-02-06 03:26

vue学习16-30

vue/v-forp161.作用：基于数据循环，多次渲染整个元素（数据、对象、数字…）2.遍历数组语法：v-for=“(item,index)in数组”（item每一项，index下标）**数组多少个index多少项，index用不到的时候可以不写，写成（item）。只有一个东西的时候（）都可以省去。3.省略：index：v-for=“itemin数组”{{item}}constapp=newVu
dundundunsis·2024-02-06 03:56

vue学习31-45

watch简写-语法p31作用：监视数据变化，执行一些业务逻辑或异步操作。语法：(1)简单写法-简单类型数据，直接监视(2)完整写法-添加额外配置项{{shand.obj}}constapp=newVue({el:'.app',data:{//obj:'sk'shand:{obj:'sdf',}},methods:{fn(){}},watch:{//obj(newvalue){//console.
dundundunsis·2024-02-06 03:56

vue学习p45-p60

scoped样式冲突p48默认情况：写在组件中的样式会全局生效-因此很容易造成多个组件之间的样式冲突问题。全局样式：默认组件中的样式会作用到全局局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件scoped原理：3.给当前组件模板的所有元素，都会被添加上一个自定义属性data-v-hash值4.css选择器后面，被自动处理，添加上了属性选择器data是一个函数p49一个组件的da
dundundunsis·2024-02-06 03:56

vue学习61-75

自定义指令-基础语法p61自定义指令：自己定义的指令，可以封装一些dom操作，拓展额外功能importVuefrom'vue'importAppfrom'./App.vue'Vue.config.productionTip=false//1.全局注册定义Vue.directive('focus',{//inserted会在指令所在的元素，被插入到页面中时触发inserted(el){//el就是指
dundundunsis·2024-02-06 03:56

vue学习91-105

vue的基本认知p91创建一个空仓库p93vue路由vuex版本233344npm的vuex装包npminstallvuex--savevuex里有仓库,仓库放vuex核心代码，所有组件都能访问到conststore=newVuex.Store()//访问storedthis.$store如何提供$访问vuex的数据p94核心概念-state状态提供数据如何使用(1)通过store直接访问(2)通
dundundunsis·2024-02-06 03:25

前端框架Vue学习(2)指令修饰符,计算属性,watch监听器

目录指令修饰符v-bind对于样式控制的增强对于类的增强-操作class对于样式的增强-操作stylev-model应用于其他表单元素计算属性概念:语法:computed计算属性和methods方法的区别computed计算属性:语法:缓存特性(提升性能):mehods方法:语法:计算属性完整写法watch侦听器(监视器)语法:指令修饰符通过"."指明一些指令后缀,不同后缀封装了不同的处理操作->
Flyoungbuhu·2024-02-05 16:59

Vue学习笔记：计算属性

计算属性入门进阶二次进阶三次进阶四次进阶结界五次进阶六次进阶七次进阶八次进阶九次进阶终章彩蛋入门Vue.js中，计算属性示例：exportdefault{data(){return{firstName:'John',lastName:'Doe'};},computed:{//计算属性：全名fullName(){returnthis.firstName+''+this.lastName;}}}在这个
HadesNyx·2024-02-05 15:20

vue学习（15）watch和computed

姓名案例_watch实现姓：名：姓名：{{fullName}}Vue.config.procuctionTip=false;constvm=newVue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},computed:{//fullName(){//returnthis.firstName+'-'+this.lastNam
哆啦C梦的百宝箱·2024-02-05 14:34

Vue学习笔记之组件基础

1、组件的定义一般将Vue组件定义在一个单独的.vue文件中，称做单文件组件；当然也可以将组件直接定义在js文件中，如下js代码，定义一个组件BlogPost，通过props定义对外暴露属性title，父组件传递title，子组件根据title渲染html内容。exportdefault{props:['title'],template:`{{title}}`}2、组件的使用首先需要引用组件，语法
Three Big Stones·2024-02-05 09:30

vue学习笔记之项目工程化开发

一：介绍及使用：二：脚手架目录文件介绍：三：项目运行流程：3.1main.js文件和App.vue文件之间的关系：main.js文件：main.js是Vue项目的主入口文件，负责初始化Vue应用并挂载根组件。在main.js中，首先会引入Vue库，并创建一个Vue实例。通过newVue()可以传入一个配置对象，其中可以指定挂载的DOM元素、路由、状态管理等。在创建Vue实例时，通过render函数
我真卷不动啦。。。·2024-02-05 01:03

vue学习——集成sass

安装pnpmisasssass-loader-D在vite.config.ts文件配置:exportdefaultdefineConfig({css:{preprocessorOptions:{scss:{javascriptEnabled:true,additionalData:'@import"./src/styles/variable.scss";',},},},}}创建三个文件src/st
可乐KL·2024-02-04 12:49

Vue学习笔记

目录1.Object.defineProperty()2.计算属性3.监视属性4.computed和watch的区别5.双向数据绑定6._el和data的俩种写法7.事件修饰符8.键盘事件9.条件渲染10.列表过滤11.过滤器12.常用指令13.生命周期14.组件15.ref属性16.props配置17.mixin属性18.vue中的插件19.WebStorage20.消息的发布与订阅20.Vue
沈姐姐~·2024-02-03 19:11

vue学习-模板引用

模板引用ref，获得dom元素实例，可以进行一些操作this.$refs.input.focus()也可以加在子组件上，调用子组件的methods，修改子组件的datadata(){return{refName:"childComponent",};},mounted(){this.$refs.childComponent.log();this.$refs.childComponent.data=
Rulelur·2024-02-03 19:08

Vue学习笔记之模板引用

1、添加模板引用对DOM元素添加引用，语法格式，则在DOM元素挂载成功后，可以通过this.$refs.input的语法形式访问引用的input元素。2、v-for中的模板引用对列表元素添加引用，语法格式{{item}}，则在DOM元素挂载成功后，可以通过this.$refs.items的语法形式访问所有的li元素。3、函数模板引用可以对DOM元素添加函数模板引用，则在组件每次更新时自动触发函数执
Three Big Stones·2024-02-03 19:37

【前端】Vue学习笔记

loader版本"less":"^4.0.0","less-loader":"^7.0.0",(8以下均可)常见问题组件不显示1.template中的内容必须包含在一个div中。2.组件名称渲染时不可为HTML标签，例如header、footer等等如需使用，只要和标签名不一样就行，比如Header、Footer等等快捷键1.vdatadata(){return{key:value}},2.vco
myaijarvis·2024-02-03 17:45

Vue学习笔记14 --自定义hook函数/toRef/provide/inject等

9.自定义hook函数什么是hook？——本质是一个函数，把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。10.toRef作用：创建一个ref对象，其value值指向另一个对象中的某个属性。语法：constname=toRef(person,'name')应用:要将响应式对象中的某个属
jxncxgx·2024-02-03 14:30

Vue 学习笔记 -- 5. vue-router

Vue学习笔记–5.vue-router5.vue-router一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
lingchen0522·2024-02-03 12:54

vue学习笔记

vue学习笔记vue框架介绍Vue.js（读音/vju：/，发音类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。
zyl熬夜之路·2024-02-03 02:30

Vue学习笔记六

前端工程化一、模块化相关规范1.模块化概述传统开发模式的主要问题①命名冲突②文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护2.浏览器端模块化规范1.AMDRequire.js(http://www.requirejs.cn
神里の凌华·2024-02-03 02:00

Vue学习笔记：将数组数据使用Excel表格导出

Vue学习笔记：将数组数据使用Excel表格导出需求：数组数据使用Excel导出第一步：下载依赖命令行：npmixlsx第二步：建立下载公共jssrc下建立文件夹utils后建立data2Excel.js
前端互助会·2024-02-03 02:28

Vue学习笔记（一）

备注：为了毕设紧急学习的个人笔记，不是为了总结分享···es6模块化每个js都是独立的模块，import导入其他模块成员，export向外共享模块成员【附上b站vue视频的具体位置】铺垫知识-03.ES6模块化-默认导...P230-00:16·模块化语法1.默认导出：exportdefault，里面的才是能从外头访问到的成员→每个模块只能有一次exportdefault！！！2.默认导入：i
fancy努力闯关·2024-02-03 02:58

Vue 学习笔记

Vue学习笔记1前端工程化与webpack1.1前端工程化1.1.1实际的开发模块化（js的模块化、css的模块化、资源的模块化）组件化（复用现有的UI结构、样式、行为）规范化（目录结构的划分、编码规范化
称霸幼儿园18·2024-02-03 02:56

Vue学习笔记（一）JS导入导出

Vue学习笔记（一）JS导入导出js文件-导出、批量导出、默认导出showMessage.jsexportfunctionsimpleMessage(msg){console.log(msg);}exportfunctioncomplexMessage
老李笔记·2024-02-03 02:55

Vue组件之间的样式冲突问题【Vue学习笔记12】

1.组件之间的样式冲突问题默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因是：（1）单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的；（2）每个组件中的样式，都会影响整个index.html页面中的DOM元素。1.1思考：如何解决组件样式冲突的问题为每个组件分配唯一的自定义属性，在编写组
扶得一人醉如苏沐晨·2024-02-01 21:58

Vue学习之vue基础学习1

Vue学习之vue基础学习1下文将简述vue的基础知识包括声明式渲染、Attribute绑定、事件监听、表单绑定、条件渲染几个部分。
ciku·2024-02-01 20:09

Vue学习之使用HBuilderX创建并使用vue3.0项目

Vue学习之使用HBuilderX创建并使用vue3.0项目下文将简述如何使用HBuilderX创建并使用vue3.0项目，包含项目创建、目录介绍、如何引用组件、首页自定义设置。
ciku·2024-02-01 20:08

路由重定向和别名

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.路由重定向实例场景：路由重定向的应用场景：2.路由别名实例场景：路由别名的应用场景：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏
几何心凉·2024-02-01 07:57

Vue学习总结

声明：本文来源于黑马程序员PDF讲义双向绑定：修改表单项标签，发现vue对象data中的数据也发生了变化双向绑定的作用：可以获取表单的数据的值，然后提交给服务器事件绑定v-on:用来给html标签绑定事件的。需要注意的是如下2点：v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数v-on语法绑定事件时，事件名相比较js中的事件名，没有on同样，v-on也存在简写方式，即v-on:可以
买个等离子电视·2024-01-31 20:28

Vue学习Element-ui

声明：本文来源于黑马程序员PDF讲义Ajax我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax:全称AsynchronousJavaScriptAndXML，异步的JavaScript和XML。其作用有
买个等离子电视·2024-01-31 20:28

Vue学习笔记13-- Vue3之计算属性与监视

7、计算属性与监视1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){...//计算属性——简写letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——完整letfullName=computed({get(){r
jxncxgx·2024-01-31 00:24

Vue Router 动态路由

动态路由的使用2.动态路由的原理解析路由匹配路由参数的传递组件渲染动态路由的变化3.更多动态路由的实例3.1.动态路径匹配多层级3.2.动态路径的正则匹配3.3.编程式导航与动态路由总结⭐写在最后⭐专栏简介Vue
几何心凉·2024-01-30 19:24

Vue Router 路由组件传参

每天进步一点点本文内容⭐专栏简介1.路由的动态片段1.1基本使用1.2多个动态片段2.查询参数2.1传递查询参数2.2在路由导航中传递查询参数3.路由元信息4.Vuex状态管理总结⭐写在最后⭐专栏简介Vue
几何心凉·2024-01-30 19:24

Vue Router 编程式导航

聚沙成塔·每天进步一点点本文内容⭐专栏简介VueRouter核心原理1.使用`router.push`2.使用`router.replace`3.使用`router.go`⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到
几何心凉·2024-01-30 19:23

Vue Router 简介

聚沙成塔·每天进步一点点本文内容⭐专栏简介VueRouter简介主要特性：安装和基本用法：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！
几何心凉·2024-01-30 19:23

【Vue学习笔记_14】Vue CLI 2&3 脚手架

【Vue学习笔记_14】VueCLI2&3脚手架VueCLI初识VueCLI2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析VueCLI3VueCLI3
BugFrog1024·2024-01-30 18:48

前端VUE学习之初识vue-cli(脚手架)

一、了解vue-clivue-cli又称脚手架，说白了就是一个便捷开发项目的家伙，因为vue-cli可以自动构建出一个项目的骨架，以及配置一些复杂的webpack文件配置，在这里，如果深入了解过webpack这个玩意的话，会深刻体会这个玩意是多么复杂（至少我是这么觉得的，webpack安转这个配置那个，晕...）,所以啊，感谢大佬发明vue-cli，确实省去了一些构建项目的困难二、安装vue-cl
happy-p·2024-01-30 18:17

Vue学习笔记之侦听器

1、基本侦听器当简单响应式属性发生变化时，可通过添加属性的侦听器，自动监测属性变化事件，如下代码，定义了3个响应式属性，分别为question、answer、loading，侦听器定义在关键字watch区域，使用语法格式question(newQuestion,oldQuestion)定义侦听器函数，当输入包含?时，将自动调用异步函数getAnswer，从api中获取问题答案，并同步更新响应式属性
Three Big Stones·2024-01-29 23:48

Vue学习笔记之生命周期函数

生命周期示意图如下所示：beforeCreate：组件初始化之前触发该事件created：组件初始化完毕触发该事件beforeMount：Vue应用对象挂载DOM结点之前触发该事件mounted：DOM结点挂载成功之后触发该事件beforeUpdate：数据更新之前触发该事件updated：数据更新之后触发该事件beforeUnmount：DOM结点卸载之前触发该事件unmountd：结点卸载之后
Three Big Stones·2024-01-29 23:17

Vue学习之使用开发工具创建项目、gitcode管理项目

Vue学习之使用开发工具创建项目、gitcode管理项目翻阅与学习了vue的开发工具，通过对比最终采用HBuilderX作为开发工具，以下章节对HBuilder安装与基础使用介绍1.HBuilder下载从
ciku·2024-01-29 19:18
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他