Vue学习

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

Vue学习:vue-resource 基本使用

GET请求getInfo(){this.$http.get('http://yapi.demo.qunar.com/mock/64532/bbyy_employee/user/aboutAs').then(function(result){console.log(result);console.log(result.body);//拿到服务器返回成功的数据console.log(result.da
Merbng·2023-09-08 05:15

VUE学习之实例属性$root, $parent

Vue子组件可以通过$root属性访问根实例的属性和方法Vue子组件可以通过$parent属性访问父组件实例的属性和方法下面写个简单的demo：Vue.component("first-child",{data:function(){return{msg:"firstchilddata"}},template:"",methods:{}});Vue.component("second-child"
夜跑者·2023-09-07 11:04

Vue学习笔记

文章目录前端框架Vue基础知识环境搭建线上尝试CDN使用VueCLIVite开发准备安装Vue工具VueCLI创建一个项目运行项目安装Vue高亮插件模板语法文本原始HTML属性Attribute使用javascript表达式条件渲染v-ifv-elsev-show列表渲染用v-for把一个数组映射为一组元素维护状态事件处理监听事件事件处理方法内联处理器中的方法表单输入绑定双向数据绑定修饰符组件基础
sober30·2023-09-06 18:45

[Vue学习]Vue开发(一)开始一个vue项目

开始项目前先在cmd或者git运行node-v和npm-v确认node和npm已安装并确认版本较新安装vue-cli(vue脚手架)国内使用npm速度慢的话,可以使用npminstall-gcnpm--registry=https://registry.npm.taobao.org安装淘宝镜像,之后只要使用cnpm就可以了然后安装vue-clicnpminstall-gvue-cli安装完成后运行
音无级鹦鹉螺号·2023-09-05 17:33

Vue学习记录

Vuevue是一套用于构建用户界面的渐进式JavaScript框架构建用户界面：使用某种方式拿到数据，将数据放到合适的位置渐进式：可以自底向上逐层应用vue特点：1.采用组件化开发，提高代码复用率，并且让代码更好的维护2.声明式编码，让编码人员无需直接操作DOM，提高开发效率3.使用虚拟DOM+Diff算法，尽量复用DOM节点vue安装1.直接使用script标签引入1.1直接用网址引入1.2去官
嘎嘎梨·2023-09-03 06:45

vue 循环勾选框_Vue学习笔记-遍历el-checkbox

Vue学习笔记-遍历el-checkoutv-model="checkAll":label="list.eventtypeid">全选:label="operate.actionid":key="operate.actionid
Miss豆子·2023-09-02 18:54

vue学习记录

正要学习，先记录一下学习资料，备忘1、Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）_逆境清醒的博客-CSDN博客2、vue3项目搭建教程（基于create-vue，vite，Vite+Vue）vue3项目搭建教程（基于create-vue，vite，Vite+Vue）_vue3搭建_逆境清醒的博客-CSDN博客
mangge08·2023-09-02 15:30

Vue学习的第六天

条件渲染v-ifYesNo#在元素上使用v-if条件渲染分组因为v-if是一个指令，所以必须将它添加到一个元素上titleparagraph#v-else可以使用v-else指令来表示v-if的else块0.5">NowyouseeNowyouv-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别#v-else-if充当v-if的“else-if块”，可以连续使
Easy_Dream·2023-09-01 11:19

Vue学习笔记router-link

组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名组件的属性有：1、to（必选参数）：类型string/location表示目标路由的链接，该值可以是一个字符串，也可以是动态绑定的描述目标位置的对象如下几种示例//下面是字符串的形式Home//下
少甜的草莓牛奶·2023-08-31 01:08

vue学习笔记 - 组件通信01

组件是vue最核心的功能，组件化你的前端页面，能大大的提高重用性，让代码可复用，维护起来简直爽的飞起，举例来说就比如一些评论输入框。在vue中使用组件Vue.component('input-number',{template:'-=max">+',props:{max:{type:Number,default:Infinity},min:{type:Number,default:-Infinit
我永远喜欢结城明日奈·2023-08-30 10:49

vue-vue2核心1

vue学习1-初识vue文章目录vue学习1-初识vuevue介绍初识vue模板语法数据绑定el与data两种写法理解MVVM数据代理回顾Object.defineproperty方法何为数据代理Vue
飘然渡沧海·2023-08-29 22:12

Vue学习笔记|路由、详细、入门

目录1.什么是路由2.前端路由和后端路由的区别3.路由应用实例4.嵌套路由5.路由传参6.路由缓存方式7.router相关函数8.组件不被销毁9.路由守卫10.路由器的两种工作模式11.注意点1.什么是路由路由是一组映射关系（key-value）key是路径，value可能是function或者component2.前端路由和后端路由的区别2.1后端路由1）value是function，用于处理客
***无名小卒·2023-08-28 22:18
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他