vue学习笔记

Vue学习笔记

记住：核心，数据驱动（虚拟化DOM操作）和组件化的概念第一部分.是部署项目vuehr项目遇见的问题，第一个问题：NodeSassdoesnotyetsupportyourcurrentenvironment:Windows64-bitwithUnsupportedruntime(83)Formoreinformationonwhichenvironmentsaresupportedpleasese
同学郑学习·2023-11-26 11:49

Vue学习笔记-总结

狂神说Vue笔记Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数据网络通信：axios页面跳转：vue-router状态管理：vuexVue-UI:ICE,ElementUI一、前端核心分析1.VUE概述Vue(读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设
学编程的LY·2023-11-26 11:48

【Vue学习笔记】三、vue组件与生命周期

【Vue学习笔记】三、vue组件与生命周期三、vue组件与生命周期1）vue组件2）组件之间的父子关系3）使用组件的三个步骤4）注册全局组件5）组件的props1.创建props自定义属性2.结合v-bind
Quindrich·2023-11-25 00:08

vue学习笔记——简单入门总结(三)

文章目录1.Vue的理解：1.1.mvvm模型：1.2.vue2的数据代理：1.3.vue2的生命周期：1.4.vue中的render函数：1.5.mixin混入：2.Vue组件间通信：2.0.props：2.1.全局事件总线：2.2.消息订阅与发布：2.3.Vuex插件通信：2.4.$nextTick：1.Vue的理解：1.1.mvvm模型：vue的思想参考了mvvm模型，model通过vm操作
只会写bug的靓仔·2023-11-24 20:35

Vue学习笔记

此学习笔记是看网易云课程的学习笔记。Vue全套精品课-网易云课堂#下载node，配置环境变量#初始化一个vue项目npminstall-gvue-cli#安装vue-clivueinitwebpacktest1#初始化一个vue项目cdtest1#进入项目npminstall#安装依赖npmrundev#运行项目#项目目录结构index.html项目根目录视图.postcssrc.js:postc
兮川·2023-11-24 08:46

Vue学习笔记-高德地图组件

公司之前一直使用的是百度地图组件，最近运营人员一直反映一个问题：有一些地区在百度地图上搜不到，地址搜索没有响应。我以为是地图API版本不对，更新了版本，这个问题还是存在。于是我就考虑换一个地图组件也解决这个问题，于是高德就成了我的第一选择。准备工作：在高德开放平台，注册成为开发者。高德开发者平台-应用.png申请Key，我申请的是Web端（JSAPI），不同的API效果可能不一样。实现方式：一：引
赵客缦胡缨v吴钩霜雪明·2023-11-23 22:01

Vue学习笔记（十）：获取跨层级组件实例

组件实例（正常到数据层）场景：1、e-charts2、input结点手动处于focus状态this.$refs.xxx获取DOMp获取父组件parent.ref获取子组件child.ref跨级获取组件：递归（麻烦），而且存在的问题是：子组件实例更新了，实例并不能缓存，父组件不能及时的知道更新ref是一个回调，可以在回调中处理v-ant-refbind：实例调用回调，传递过去更新的时候，把新的实例告
smartHui·2023-11-22 16:48

Vue学习笔记01day_05.数据双向绑定v-model

Document{{msg}}-->//创建Vue实例，得到ViewModelvarvm=newVue({el:'#app',data:{msg:'大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'},methods:{}});
菜鸟柱子·2023-11-22 02:23

vue学习笔记3----数据绑定

数据绑定将model和view绑定起来。例如value="name"，data中的name值发生变化，输入框中的值也会发生变化。单向数据绑定与双向数据绑定vue中有2种数据绑定的方式：单向数据绑定（v-bind）：数据只能从data流向页面；双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data；备注：双向数据绑定一般都应用在表单类（输入类）元素上（如：input、
lazy91·2023-11-22 01:19

vue学习笔记---(1)数据绑定(v-model && v-bind)和事件处理(v-on)

数据绑定和事件处理v-bindv-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。v-modelv-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。v-on事件处理绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略用在普通元素上时，只能监听原生DOM事件。用在
Tomcat20·2023-11-22 01:46

工程化开发 & 脚手架 Vue CLI【vue学习day6】

npminstall@vue/cli-g1.3.查看版本vue--version#或者vue-V二、使用VueCli创建一个开发Vue项目的标准化基础架子image.png基于vue-cli创建一个vue项目【Vue
扶得一人醉如苏沐晨·2023-11-21 08:52

vue学习笔记--条件渲染 v-if和v-show

目标：显示或隐藏一段文本原理：v-ifv-show分析：共同点：都可以通过该指令去控制文本的显示或者隐藏不同点：v-if直接从DOM上移除或者添加，v-show会在DOM上设置display:none属性适用场景：如果经常显示或者隐藏文本v-show提升性能，如果不常操作显示或者隐藏v-if节省内存例子：{{mes}}{{mes}}varvm=newVue({el:"#app",data:{mes
持续5年输出bug·2023-11-21 05:21

vue学习笔记

vue事件修饰符阻止控件提交的一些事件，如：表单的自动提交。事件修饰符v-on:click=""@clickvue计算属性vs方法vue计算属性vs方法watch实时监听某个变量修饰符lazy应用场景，表单元素绑定一个值，无需实时获取，当文本框失去焦点时，才会响应数据。v-mode.lazy="msg"numberv-model.number="age"输入的是数字时才会处理。trimv-mode
NikolasNull·2023-11-20 23:08

vue查询学习笔记

Vue学习笔记一、基础特性1.1、实例及选项1.1.1模板1.1.2数据1.1.3方法1.2生命周期1.3数据绑定1.3.1文本插值插值操作内置指令v-oncev-htmlv-textv-prev-cloak
青岛City·2023-11-20 16:27

Vue学习笔记-prop属性

1.prop的大小写(camelCasevskebab-case)HTML中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时，camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名：//Prop的大小写(camelCasevskebab-case)Vue.component('blog-post',
赵客缦胡缨v吴钩霜雪明·2023-11-20 14:05

2023/1/10 Vue学习笔记 - 路由基本使用

1路由的简介-router1、路由【route】就是一组key-value的对应关系。2、多个路由，需要经过路由器【router】的管理。SPA(singlepagewebapplication）应用-单页面web应用【一个index.html】真实例子：美团服务：https://bj.meituan.com/shenghuo/c20454/{"key":"/class","value":"班级组
@Autowire·2023-11-20 05:25

Vue学习笔记：vue-cli脚手架安装

vue-cli是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；vue-cli的优势:1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；2、提供了一套本地测试服务器，而且是一个热加载的服务器；3、提供了自己的一套集成打包上线的方案，webpack或者gulpify在创建项目的时候可以进行选择；有了以上优势，可以非常快速的搭建项目；vue-cli对系统的要求:vue-cli是
前端互助会·2023-11-19 20:33

Vue学习笔记-Router

一、路由的基本使用说明：一般情况下路由组件存放在‘views/pages’目录，非路由组件存放在‘components’目录1.使用步骤：定义路由组件注册路由在index.js文件中引入路由组件，并创建路由器。在main.js文件中注册路由器。使用路由GotoFoo2.相关APIVueRouter():用于创建路由器的构建函数newVueRouter({//多个配置项})exportdefault
code in China·2023-11-19 20:24

Vue学习笔记 8 - Vue-Router 详解

认识路由发展阶段(p100各种方式原理)：URL的hashURL的hash也就是锚点(#)，本质上是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。原地址：http://localhost:8080在控制台输入：location.hash='aaa'//http://localhost:8080/aaalocati
Caramely·2023-11-19 20:54

Vue学习笔记之15-vue-router详解

什么是路由路由是一个网络工程中的一个术语路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动路由器提供了两种机制:路由和传送路由是绝对数据包从来源到目的地的路径传送将输入端的数据转移到合适的输出段路由中有一个非常重要的概念叫路由表路由表本质就是一个映射表,决定了数据包的指向相关概念内网IP,每一个链接上网络的设备都有一个内网IP,这个内网IP是为了区分链接同一个局域网的不同设
风高物燥·2023-11-19 20:23

Vue学习笔记（三）：双向绑定和单向数据流

双向绑定：数据的更新，影响视图的更新；视图的更新影响数据的更新单向数据流多个属性双向绑定（sync这个API）1、Vue是单向数据流，不是双向绑定2、Vue的双向绑定不过是语法糖v-model3、Object.defineProperty是用来做响应式更新的，和双向绑定没关系课后：扩展PersonalInfoDemo对手机号做非空校验。如不合法，则给出错误提示。
smartHui·2023-11-19 16:19

Vue学习笔记--第六、七章（尚硅谷学习视频总结）

Vue学习笔记--第六、七章（尚硅谷学习视频总结）第六章VueRouter路由管理器6.1相关理解6.1.1vue-router的理解6.1.2对SPA应用的理解6.1.3路由的理解6.2基本路由6.3
萏语·2023-11-19 15:18

Vue学习笔记

Vue学习笔记数据绑定脚手架VueCLI组件组件化开发需要安装的插件自定义组件定义自己的组件使用自定义的组件普通组件--局部注册普通组件--全局注册普通组件的局部注册和全局注册的区别第三方组件Element-uicomputed
菊头蝙蝠·2023-11-17 01:41

2023/1/10 Vue学习笔记 - 全局事件总线的理解与案例 并且改造 todoList案例

1全局事件总线的理解与案例功能：任意组件间通信【父子子父爷孙。。。兄弟。。。】1、这个X需要所有的vc的可见-我们在Vue的原型对象上放即可，这里给出一个概念的问题：关于VueComponent:1.School组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，Vue.extend生成的。2、我们只需要写``或``，Vue解析时公帮我们创建school组件的实例对象，即Vu
@Autowire·2023-11-16 09:05

Vue学习笔记-消息订阅与发布(pubsub)

消息订阅与发布(pubsub)一种组件间的通信方式，适用于任意组件间通信使用步骤：1.安装pubsub第三方库npmipubsub-js2.在组件中引入importpubsubfrom'pubsub-js'3.数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身methods:{/*自定义回调函数，第一个参数为订阅的消息名称，第二个参数为消息发布方发布的数据*/callFun
theLuckyLong·2023-11-16 09:03

Vue学习笔记-$nextTick方法

nextTick语法：this.$nextTick(回调函数)作用：在下一次DOM更新时，执行指定的回调函数用法场景：当改变数据后，要基于更新后的新DOM进行操作时，需要在nextTick所指定的回调函数执行
theLuckyLong·2023-11-16 09:03

Vue学习笔记-全局事件总线

全局事件总线(GlobalEventBus)一种支持所有组件间的通信方式（原理：相当于提供一个全局对象，这个对象能够被任意组件访问到，并且这个对象能够调用Vue内置函数）安装全局事件总线newVue({el:'#app',render:h=>h(App),beforeCreate(){//将Vue实例对象放在Vue原型对象上的X属性中,即，安装全局事件总线Vue.prototype.$bus=th
theLuckyLong·2023-11-16 09:57

Vue学习笔记（尚硅谷天禹老师）

Vue学习笔记（尚硅谷天禹老师讲解）1.Vue核心1.1.Vue简介1.1.1.官网英文官网中文官网1.1.2.介绍与描述动态构建用户界面的渐进式JavaScript框架作者：尤雨溪1.1.3.Vue的特点遵循
m0_67391907·2023-11-15 07:24

Vue 学习笔记 05——状态管理Vuex

Vue学习笔记01——iviewVue学习笔记02Vue学习笔记03——组件篇Vue学习笔记04——TabPanelVue学习笔记05——状态管理Vuex========================
thingir·2023-11-11 17:23

【vue学习笔记】vue3引入unplugin-auto-import并接入element-ui

vue3引入unplugin-auto-import并接入element-ui接上一篇vue3部署：【vue学习笔记】vue3+vite+route实现框架构建一、引入自动引入插件1.unplugin-auto-importnpmiunplugin-auto-import-D2
猿职场·2023-11-11 09:13

Vue学习笔记（张天禹老师Vue）

文章目录1Vue基础1.1介绍Vue1.2Vue的安装1.3Hello小案例1.3Hello案例分析1.4模板语法1.5数据绑定1.6el和data两种写法1.7MVVM模型1.8Object.defineProperty1.9数据代理1.10Vue里面的数据代理1.11Vue的命名规范2Vue中的事件2.1事件处理2.2事件修饰符2.3键盘事件2.4事件总结2.5姓名案例2.6计算属性2.7侦听
玖菱霜叶·2023-11-11 08:23

Vue学习笔记06 Vuex-模块化编程

文章目录Vue学习笔记06Vuex理解vuex如何使用？
nuise_·2023-11-07 10:06

【VUE学习笔记】VUEX模块化编码--手写VS自动生成

对于vuex的state，getters，commit，dispatch函数，建议选择自动生成手写VUEX自动生成this.$store.state.分类.数据…mapState(‘分类’,[‘数据’])this.$store.getters[‘分类/数据’]…mapGetters(‘分类’,[‘数据’])this.$store.commit(‘分类/函数’,数据)…mapMutations(‘分
DayHeart·2023-11-07 10:58

vue学习笔记，从基础到项目

一.基础部分**vue后台管理现成的项目vue-element-admin，搜索下载即可创建vue项目（通常不操作index.html文件，因为它未被打包，东西越少越好）D:(切换到自己想要的磁盘，我想存在d盘)①node-v检查node是否安装完成（未安装的话安装下）②npm-v检查npm是否安装（未安装的话执行npminstall-gnpm）③安装脚手架npminstallvue-cli-g（
一个没有灵魂的女程序媛·2023-11-06 20:18

【vue学习笔记】vue单组件

本文是阅读1所做的笔记。组件的生命周期vue3组件的生命周期写法称为CompositionAPI（组合式API）。vue3组件的生命周期的函数统一放在setup里运行：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptued。被包含在中的组件，相比正常的会多出两个生命周期钩
蔚尺丈八声·2023-11-05 18:15

Vue学习笔记之Webpack搭建本地服务器及配置文件的分离

1、webpack提供了一个可选的本地开发服务器（修改的文件先存储在内存中），这个本地开发服务器基于node.js搭建的，内部使用express框架，可以实现我们想要的浏览器自动刷新显示我们修改后的结果，就避免了我们每次修改了代码都要执行npmrunbuild进行打包动作，界面上才会更新我们修改的东西。2、环境安装：[email protected]
大数据时代·2023-11-03 04:00

VUE学习笔记：22.模块化开发之webpack搭建本地服务器

1.webpack搭建本地服务器步骤：第一步：安装依赖包[email protected]第二步：在webpack的配置文件webpack.config.json中设置开发服务器dev-server的使用letpath=require('path')//导入path模块letwebpack=require('
new nm个对象·2023-11-03 04:29

vue学习笔记（一）（学自尚硅谷）

一、vue学习的基本语法vue2的使用要先下载vue.js文件，然后引入html页面如何使用vue，Vue的基本语法是什么？Vue可以实现在标签体和标签属性中的数值绑定。分别叫做差值语法与绑定语句下面首先演示插值语法，要用到{{}}。见下：我是{{name}}newVue({//首先创建一个Vue对象el:"#boxOne",//通过el来确定数据要绑定到的容器data:{name:"程咬金",/
湫鹤椿水·2023-11-02 20:15

vue学习笔记

1.vue对象和插值语法1.想要vue工作必须new一个vue对象出来，容器依旧符合html模板规范，只是加入了一些vue的语法例如双括号{{}},2.容器和一个vue示例对象是一一对应的，不能多个容器被一个vue对象服务3.真实开发中一般只有一个vue示例，并且配合组件一起使用4.{{xxxx}}xxx可以是js表达式，也可以读取vue示例中data所有的属性5.{{}}是插值语法，使用在标签体
头发不会掉·2023-11-02 02:31

【Vue学习笔记_06】v-if/v-show条件判断

【Vue学习笔记_06】v-if/v-show条件判断v-if指令v-else指令v-else-if指令案例-用户登录切换v-show指令配套可执行代码示例=>GitHubv-if指令当v-if绑定的条件满足
BugFrog1024·2023-10-28 18:16

Vue学习笔记---Vue单文件组件（SFC）规范

.vue文件用于表示一个单一组件，其内使用类html语法，顶级标签有template,script,style和自定义的标签，一个完整简单的vue单文件如下{{msg}}exportdefault{data(){return{msg:"helloworld"}}}.example{}自定义标签模板template里面包含该组件的html结构，可以在该组件内使用其他组件，需要在script中导入并写
前端小黑·2023-10-24 16:10

Vue学习笔记-校验IP是否在同一网段

一.IP地址分类D和E不对民用组织开放，所以我们能使用IP地址的只有ABC三类。A、B、C三类IP地址的特征：当将IP地址写成二进制形式时，A类地址的第一位总是0，B类地址的前两位总是10，C类地址的前三位总是110。主机号:用于识别该网络中的主机。A类地址（1）A类地址第1字节为网络地址，其它3个字节为主机地址。它的第1个字节的第一位固定为0.（2）A类地址网络号范围：1.0.0.0—126.0
赵客缦胡缨v吴钩霜雪明·2023-10-24 13:13

day5 vue 笔记 axios 动态组件 插槽 自定义指令 ESLints

系列文章目录day1学习vue2笔记vue指令day2学习vue2笔记过滤器侦听器计算属性axiosday3vue2学习笔记vue组件day4vue学习笔记组件生命周期数据共享数组常用方法day5vue
满篇翔·2023-10-24 07:33

day1学习vue2笔记 vue指令

系列文章目录day1学习vue2笔记vue指令day2学习vue2笔记过滤器侦听器计算属性axiosday3vue2学习笔记vue组件day4vue学习笔记组件生命周期数据共享数组常用方法day5vue
满篇翔·2023-10-24 07:03

【Vue学习笔记】—— vue的基础语法 { }

学习笔记作者：oMingvuev-on:简称@newVue({methods:{show1(){console.log("show1")},show2(){console.log("show2")}}}).$mount('#app')v-model（数据双向绑定）varvm=newVue({el:'#app',data:{name:''}}-只要input内容发生变化，vueapp实例的data中
微风拂晚霞·2023-10-23 08:43

Vue学习笔记（篇二）——Vue基础语法

Vue基础语法1、Mustache语法形如"{{message}}"的语法格式，称之为Mustache语法注：mustache（胡子/胡须）2、v-once该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。举例代码（练习）：{{message}}{{message}}constapp=newVue({
Etui۹(･༥･´)و ̑̑·2023-10-23 08:12

Vue学习笔记一 列表形式数据展示

1.MVC和MVVM1.1MVC模式  MVC模式是Web后端的常用的开发模式。model层一般都是实体类，有时候会多一个dao层用于专门写sql的操作，view层是前端，controller层编写业务逻辑。1.2MVVM模式  Vue.js框架为了方便开发，使用了MVVM模式，它是前端页面的一种开发模式，分为M,V和VM，MVVM提供了数据的双向绑定。2.数据双向绑定document{{msg}
皮卡猴·2023-10-22 07:24

20231012-黑马Vue学习笔记-第一天

文章目录Vue的概念Vue2官网创建一个Vue实例安装Vue开发者工具Vue指令案例-波仔的学习之旅常见的事件类型案例-小黑的书架案例-小黑记事本Vue的概念Vue是一个用于构建用户界面的渐进式框架Vue2官网https://v2.cn.vuejs.org/创建一个Vue实例Document{{msg}}{{friend.name+''+(friend.age>=18?'成年':'未成年')}}/
ぃ咔哇依°ヽ·2023-10-21 22:31

20231014-黑马Vue学习笔记-第二天

文章目录指令修饰符v-bind操作CSS案例-京东秒杀Tab导航高亮案例-小黑学习网（v-model应用于其他表单元素）computed计算属性-简略写法computed计算属性和methods方法的区别computed计算属性-完整写法成绩案例watch侦听器案例-水果购物车指令修饰符①按键修饰符@keyup.enter->键盘回车监听②v-model修饰符v-model.trim->去除首尾空
ぃ咔哇依°ヽ·2023-10-21 22:31

20231018-黑马Vue学习笔记-第三天

文章目录Vue生命周期生命周期案例开源可视化图表工程化开发环境安装根组件（App.vue）普通组件的注册使用Vue生命周期①创建：beforeCreate、created②挂载：beforeMount、mounted③更新：beforeUpdate、updated④销毁：beforeDestroy、destroyedDocument计数器-{{count}}+constapp=newVue({el
ぃ咔哇依°ヽ·2023-10-21 22:29
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他