Vue基础

Vue基础 第五讲笔记：v-show、v-if、v-bind

一、v-show根据真假切换元素的显示状态。注意：1、原理是修改元素display，实现显示隐藏。2、指令后面的内容，最终都会解释为布尔值。3、值为true元素显示，值为false元素隐藏。实例：=18"src="img/zhongqiu.jpg"alt="">varapp=newVue({el:"#app",data:{isShow:</
TraceurZzl·2023-09-25 15:05

Vue 基础回顾

Vue基础结构h函数：创建虚拟domrender：把h函数创建的虚拟dom返回$mount：把虚拟dom转为真实dom渲染到浏览器Vue生命周期image.pngVue语法与概念上差值表达式指令（Vue
KK_boy·2023-09-25 08:28

vue基础篇笔记(一)

1、Vue是什么？官方上：e(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。vue:基本mvvm(model-view-viewmodel)的设
团酱·2023-09-24 18:21

Vue基础

vue安装好细的Vue安装与配置_vue配置_LCLANNADT的博客-CSDN博客脚手架src/main.js是应用的入口文件可以在这里导入和配置Vue相关的插件、库、以及全局组件、指令src/App.vue这是应用的主组件，也是根组件，可以在这里定义应用的整体样式、布局以及全局的数据和方法src/components用于存放应用的组件文件，可以在这里创建各种子组件，按需引入到主组件或其他组件中
cycs·2023-09-24 08:48

【VUE基础】Vuex

1.什么是VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。其实最简单理解为，在我们写Vue组件中，一个页面多个组件之间想要通信数据，那你可以使用VuexVuex是一个专为Vue.js应用程序开发的状态管理模式Vuex状态管理===管理组件数据流动===全局数据管理Vue的全局数据池，在这里
攻城狮·建哥·2023-09-24 01:32

Vue基础知识点（面试可用）：v-if和v-show的区别

①简述v-if和v-show的区别？v-if在编译过程中会被转化成三元表达式，条件不满足时不渲染此节点。元素销毁和重建控制显示隐藏。v-show会被编译成指令，条件不满足时控制样式将此节点隐藏（display:none）css样式控制。使用场景v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景。v-show适用于需要非常频繁切换条件的场景。扩展补充：display:none、visibi
不写八个·2023-09-23 17:28

Vue 基础入门

一.Vue基础(一)Vue简介Vue是一套用于动态构建用户界面的渐进式JavaScript框架。特点：采用组件化模式，提高代码复用率，且让代码更好维护。
码字小萌新♡·2023-09-23 17:16

Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

1.插值1.1.1文本{{msg}}1.1.2html使用v-html指令用于输出html代码1.1.3属性HTML属性中的值应使用v-bind指令1.1.4表达式Vue提供了完全的JavaScript表达式支持{{str.substr(0,6).toUpperCase()}}{{number+1}}{{ok?‘YES’:‘NO’}}我的Id是js动态生成的插值的html代码如下：Vue的插值案例
心动的代码~·2023-09-21 14:14

Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

目录插值指令过滤器计算属性和监听属性Vue购物车结算案列插值1.文本2.html3.属性4.class、style绑定5.表达式双大括号插值（Mustache语法）：双大括号插值是Vue中最常用的插值语法，使用双大括号{{}}将表达式包裹起来，表达式将会被求值后显示在HTML中。{{msg}}案列源码插值.f30{font-size:30px;}文本{{msg}}thml解析{{msg2}}表达式
小徐o·2023-09-21 07:00

Vue基础知识Vue.extend详解

Vue.extend属于Vue的全局API，但是在实际业务开发中我们很少使用，因为使用extend写法比常用的Vue。components写法要繁琐一些。但是在一些独立组件开发场景中，Vue.extend+$mount这对组合是我们需要去关注的。学习开始之前我们先看一眼官方文档是怎么介绍的Vue.extend(options)我这里直接截图过来了在vue项目中，我们有了初始化的根实例之后，页面之间
小铃铛的打怪之路·2023-09-21 05:11

一遍关于vue基础语法上篇

目录一.插值1.1.文本1.2.html1.2.3.属性1.1.4.表达式演示效果：二.指令2.1.v-if/v-else-if/v-else2.2.v-show2.3.v-for2.4.v-bindv-onv-model2.5.动态参数演示效果：三.过滤器3.1.局部过滤器基本应用3.2.局部过滤器串行使用3.3.局部过滤器传参3.4.全局过滤器演示效果：四.计算属性&监听属性4.1.计算属性4
✘君临沂·2023-09-20 22:29

一遍关于vue基础语法下篇

目录一.事件处理器演示效果：二.表单演示效果：三.组件通信父转子演示效果：四.组件通信子转父演示效果：好啦，今天的分享就到这了，希望能够帮到你呢！一.事件处理器事件修饰符Vue通过由点(.)表示的指令后缀来调用修饰符，.stop.prevent.capture.self.once按键修饰符Vue允许为v-on在监听键盘事件时添加按键修饰符：全部的按键别名：.enter.tab.delete(捕获"
✘君临沂·2023-09-20 22:26

Vue 小结

此次讲解围绕以下几个方面展开：MV*框架模式Vue.js的概述VueMVVM的实现Vue与React的对比有Vue基础如何快速上手WeexMV*框架模式历史最早期的Web开发是洪荒时代，开发者可能写着类似以下的代码
FantasticLBP·2023-09-20 21:49

Vue基础语法的进阶，事件处理器，自定义组件及组件通信

目录一、事件处理器1.概述2.实例二、语法整合1.作用2.实例三、自定义组件1.概述2.实例四、组件通信(1)讲述(2)父传子(3)子传父学习后的收获一、事件处理器1.概述在Vue中，事件处理器是用来处理DOM事件的方法。它可以在Vue组件中定义和使用，用于响应用户的交互操作。事件处理器的作用是监听DOM事件，并在事件触发时执行相应的逻辑代码。通过事件处理器，可以实现用户与页面的交互，例如点击按钮
云小君·2023-09-20 21:48

Vue基础语法【下】

目录一、事件处理器1.事件修饰符.stop.prevent.capture.self.once2.按键修饰符.enter.tab.delete.esc.space.up.down.left.right.ctrl、.alt、.shift、.meta二、表单赋值与取值三、自定义组件1.组件介绍2.局部组件3.全局组件4.组件通信组件传参【父传子】组件传参【子传父】一、事件处理器1.事件修饰符Vue通过
孤留光乩·2023-09-20 15:27

Vue基础语法

Vue模板语法有2大类：1.插值语法：功能：用于解析标签体内容。写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。2.指令语法：功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。举例：v-bind:href=“XXX”或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。备注：Vue中有很多的指令，且形式都是：v-?
萤火！·2023-09-20 11:46

vue基础语法（vue2)

文章目录vue基础语法vue基础语法定义在类中的是方法方法：name:function(){}name(){}{{}}:用在内容中，而不为属性调用function一般要加（）v-once:修改一次，第一次改完
嗷嗷待哺的簸箕板·2023-09-20 11:46

Vue基础语法【上】

目录前言一、插值1.文本插值2.html解析3.属性4.表达式5.截取6.三元运算符二、指令1.v-if2.v-for3.v-bind4.v-on5.v-if|v-else|v-else-if6.自定义指令三、过滤器1.局部过滤2.全局过滤四、计算属性与监听属性1.计算属性2.监听属性五、购物车案例前言Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它的核心思想是将数据和视图进
孤留光乩·2023-09-20 11:45

vue基础知识十三：Vue中的$nextTick有什么作用？

一、NextTick是什么官方对其的定义在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM什么意思呢？我们可以理解成，Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html结构{{message}}构建一个vue实例constvm=newVue({el:'#app
小爱同学-Allen·2023-09-20 09:08

vue基础知识十四：说说你对vue的mixin的理解，有什么应用场景？

一、mixin是什么Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂Vue中的mixin先来看一下官方定义mixin（混入），提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如da
小爱同学-Allen·2023-09-20 09:35

ES6新语法及vue基础

https://www.angularjs.net.cn/es6新语法:(多看多用)1字符串方法//字符串方法includes包含//letstr="ijahsdjkhasd";//console.log(str.includes("jjj"));//false//console.log(str.includes("ij"));//true//console.log(str.includes("a
公诚士·2023-09-20 08:03

Vue基础指令 & 指令修饰符

目录Vue.js简介Vue.js目录：Vue.js模板语法插值语法(Mustache)v-html指令v-text指令v-on指令v-bind指令v-if指令v-if与v-show的区别：v-model指令指令修饰符Vue.js简介Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不
未飞·2023-09-19 23:21

【Vue】模块基本语法「上篇」

v-else|v-else-if2.2v-show2.3v-for2.4动态参数三、过滤器3.1局部过滤器3.2全局过滤器四、计算属性&监听属性4.1计算属性4.2监听属性五、案例实操5.1购物车案例Vue
匿瘾:·2023-09-19 20:53

Vue基础语法

目录1.插值（Interpolation）案例：效果图：2.指令（Directives）2.1什么是指令？2.2常见指令示例v-if/v-else-if/v-else：v-for：下拉框动态参数3.过滤器（Filters）3.1什么是过滤器？3.2过滤器的使用案例4.计算属性和监听器（ComputedProperties&Watchers）4.1计算属性的作用计算属性的主要用途：计算属性的优势：4
Ar.小白·2023-09-19 16:04

Vue基础之模板语法介绍

前言上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。一、插值1.1、文本1.2、html1.3、属性1.4、class、style绑定1.5、表达式在Vue的模板语法中，插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。最简单的用法是在模板中直接插入数据值，例如：{{message}}上面的代码将把Vue实例中的m
〔Lisa〕·2023-09-19 07:11

Vue2电商前台项目——完成Search搜索模块业务

Vue2电商前台项目——完成Search搜索模块业务Vue基础知识点击此处——Vue.js文章目录Vue2电商前台项目——完成Search搜索模块业务一、项目开发的步骤二、各种请求数据并展示数据1、写Search
POTATO！·2023-09-18 19:23

Vue2电商前台项目——完成Detail详情页模块业务

Vue2电商前台项目——完成Detail详情页模块业务Vue基础知识点击此处——Vue.js文章目录Vue2电商前台项目——完成Detail详情页模块业务一、项目开发步骤二、配置路由规则+滚动行为1、配置路由规则
POTATO！·2023-09-18 19:23

超全vue面试题整理

vue基础vue是什么是一个动态构建用户界面的渐进式JavaScript框架。用来创建单页应用的web应用框架。优势：Vue是一个轻量级框架，只关注图层，是一个构建数据的视图集合，大小只有十几KB。
想学好前端的小宝·2023-09-17 23:43

VUE基础知识总结,坚持每天一遍,一篇就够用了

Vue是目前`前端三大框架`之一:AngularReactVue-理念:`自动化+数据驱动`-自动完成DOM的相关操作,数据变更时自动更新相关DOM元素-作者希望用户:只要关心数据的变化即可,DOM的操作全自动Vue分三个版本:-vue1:已淘汰-`vue2`:目前占有率较高-vue3:以后的主流Vue开发方式:-脚本:同jQuery引入脚本即可,适合入门阶段-脚手架:适合实际开发!Vue语法:n
床前明月慌·2023-09-17 10:35

vue语法【笔记】

这里写目录标题为什么要使用MVVMVUE基础语法学习代码demo2.html案例结果：代码demo03.html测试结果：代码demo04案例测试结果：为什么要使用MVVMMVVM模式和MVC模式一样，
Code L·2023-09-17 06:54

vue基础知识十二：双向数据绑定是什么

一、什么是双向绑定我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子当用户填写表单时，View的状态就被更新了，如果此时可以自动更新Model的状态，那就相当于我们把Model和Vie
小爱同学-Allen·2023-09-16 22:08

vue基础知识十一：Vue组件之间的通信方式都有哪些？

一、组件间通信的概念开始之前，我们把组件间通信这个词进行拆分组件通信都知道组件是vue最强大的功能之一，vue中每一个.vue我们都可以视之为一个组件通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的。广义上，任何信息的交通都是通信组件间通信即指组件(.vue)通过某种方式来传递信息以达到某个目的举个栗子我们在使用UI框架中的table组件，可能会往table组件中传入某些数据
小爱同学-Allen·2023-09-16 22:06

模版语法、列表渲染、文本指令、事件指令、属性指令、vue中的style和class、条件渲染、v-for能循环的

vue基础1模版语法2文本指令2.1模版语法v-text2.2文本指令v-html2.3文本指令v-show2.4文本指令v-if2.5v-show把图片的显示隐藏3事件指令ES6对象语法演变3.1v-on
我可以将你更新哟·2023-09-16 03:45

11.前端：vue

艾编程架构课程第十九---二十三节笔记未完待续艾编程前端第一课：实现电商购物车01-Vuejs介绍02-Vuejs-快速下载和安装03-Vuejs实操系列04-Vuejs实操系列-插值表达式05-Vue
CJ-小门·2023-09-15 17:26

Vue基础（2）- 使用Vue的第一步

1.官方文档传送门https://cn.vuejs.org/2.其实vue的使用操作很像我们平常在做的导包入包，官方提供了两个版本的vue，but在学习阶段建议使用开发版本，即完整版，除了可以完整的看到整个框架涵盖的内容，同时包括所有完整的警告提示，在学习阶段中容易让我们发现错误及时改正；生产版本，也可以称之为mini版本，运行速度较快，代码压缩，but没有帮助的提示信息。3.html中插入有关h
Mojov·2023-09-15 16:11

vue基础知识十：Vue中组件和插件有什么区别？

一、组件是什么回顾以前对组件的定义：组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求，例如输入框，可以替换为日历、时间、范围等组件作具体的实现调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或
小爱同学-Allen·2023-09-15 00:12

Vue基础集合

目录Vue1、渐进式框架2、VueAPI风格选项式API组合式API选择哪一种书写？在生产项目中：3、Vue开发前的准备创建Vue项目问：创建Vue项目的命令是什么？4、模板语法文本插值使用JS表达式原始HTML5、属性绑定简写动态绑定多个值6、条件渲染`v-if`和`v-show`的区别7、列表渲染遍历对象的时候名称要不一样通过key管理状态数组变化侦测变更方法替换一个数组8、事件处理内联事件处
海量的海·2023-09-14 07:03

vue基础一（模板语法，事件绑定，表单输入绑定，计算属性，侦听器）

vue1.vue简介1.1mvvm模式1.2组件化1.3安装和使用1.3.1在HTML中1.3.2在node中1.4为什么要把data对象变成函数并return1.5关于vue3的根节点1.6生命周期2.模板语法（指令）2.1内容渲染指令2.1.1{{}}2.1.2v-html2.1.3Attribute2.1.4表达式2.2条件渲染2.2.1v-if2.2.2v-show2.2.3v-if和v-
今天晚上一定要早睡·2023-09-13 22:23

Vue3.0组合式API（三）-----模板语法

目录一、Vue基础1.1Vue格式1.2mustache语法1.3计算属性二、基本语法2.1属性绑定2.2条件与循环2.2.1显示/隐藏标签2.2.2遍历生成标签2.3用户交互2.3.1监控用户动作2.3.2
chuck-Gemini·2023-09-13 22:22

vue基础 组合式和响应式 && 模板语法 && 计算属性

模板语法|Vue.js根据文档组合式和响应式响应式响应api单网页实例式组合式组合式api单网页实例模板语法文本插值{{msg}}最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法(即双大括号)：import{onMounted,ref,version}from'vue'constver=ref('ok')//ver={value:'ok'}consttt=()=>{ver.val
sk古月·2023-09-13 22:51

Vue基础-day02

computed计算属性出现的目的是解决模板中存放过多的逻辑会让模板过重且难以维护的问题计算属性的基于他们的依赖进行缓存的watchwatch监听器用来监听data中数据的值，只要监听的数据一变化，他就能执行相应的函数注意：通常情况下用computed，当需要在数据变化时执行异步或者开销较大的操作时，用watchmountedmounted钩子函数很特殊，他表示页面一加载进来就执行函数里面的内容（
慢慢慢热型·2023-09-13 18:11

javaweb04-vue基础

话不多说，参考官网地址Vue官网集成Vue应用。一、Vue快速入门（1）新建HTML页面，引入Vue.js我这里用的是CDN方式（2）在核心区域创建Vue应用，定义数据模型``` Vue.createApp({  data(){   return{    message:'HelloWorld'   }  } }).mount('#app')```（3）编写视图```   {{message}} 
阴天吃鱼·2023-09-13 09:35

vue基础知识八：为什么data属性是一个函数而不是一个对象？

一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数constapp=newVue({el:"#app",//对象格式data:{foo:"foo"},//函数格式data(){return{foo:"foo"}}})组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象Vue.component('component1',{tem
小爱同学-Allen·2023-09-12 23:44

vue基础知识九：动态给vue的data添加一个新的属性时会发生什么？怎样解决？

一、直接添加属性的问题我们从一个例子开始定义一个p标签，通过v-for指令进行遍历然后给botton标签绑定点击事件，我们预期点击按钮时，数据新增一个属性，界面也新增一行{{value}}动态添加新属性实例化一个vue实例，定义data属性和methods方法constapp=newVue({el:"#app",data:()=>{item:{oldProperty:"旧属性"}},methods
小爱同学-Allen·2023-09-12 23:42

vue页面添加水印（可用于H5，APP）

实现代码相对简单，相信有点vue基础的人都能看懂新建vue组件watermark.vue{{info}}constprops=defineProps({info:{type:String,default
abs625·2023-09-12 19:46

vue基础-axios封装/同步请求

本章介绍Vue项目中如何使用Axios封装http请求，请求/响应拦截器部分写的比较简单，后续项目中可以补充。1、/src/utils/目录下建立一个htttp.js导入axios设置axios请求参数创建axios实例请求拦截器响应拦截器封装get请求导出封装post请求导出//0、导入axiosimportaxiosfrom'axios'//1、设置axios请求参数axios.default
不会叫的狼·2023-09-11 13:00

vue基础-axios详解

1.1背景Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中,也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理。1.2vue请求模块选择2应用2.1安装axios依赖npminstallaxios--save2.2GET方法1、引用axios模块importaxiosfrom"axios";2、get请求发
不会叫的狼·2023-09-11 13:59

Vue2电商前台项目——项目的初始化及搭建

Vue2电商前台项目——项目的初始化及搭建Vue基础知识点击此处——Vue.js文章目录Vue2电商前台项目——项目的初始化及搭建一、项目初始化1、脚手架目录介绍2、项目的其他配置二、项目的路由分析及搭建
POTATO！·2023-09-11 05:03

Vue2电商前台项目——完成Home首页模块业务

Vue2电商前台项目——完成Home首页模块业务Vue基础知识点击此处——Vue.js文章目录Vue2电商前台项目——完成Home首页模块业务一、项目开发的步骤二、Home首页拆分静态组件1、完成TypeNav
POTATO！·2023-09-11 05:01

基于vue-cli3 + axios 构建多页面应用H5移动端电商网站项目（下）X

基于vue-cli3+axios构建多页面应用H5移动端电商网站（下）如果有web前端html+css+js+vue基础的小伙伴，可以直接跳过上一篇，直接阅读此文。
青铜小菜姬·2023-09-10 23:43
上一页 2 3 4 5 6 7 8 9 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他