zl程序教程

vue笔记四

  • [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )

    [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )

    调度执行执行调度的实质就是将更多的控制权交给用户,比方说在执行副作用函数的时候可以让用户特定的去处理一些方法,例如回顾上一节的代码执行一个自增同时输出 status 的方法:const data = { data: 'info', msg: ' ok ', status: 2 } let activeEffect; const eff

    日期 2023-06-12 10:48:40     
  • 人类高质量vue学习笔记(六)

    人类高质量vue学习笔记(六)

    1 npm 常用命令 npm 是 Node.js 的包管理工具,主要用来安装各种库和依赖(插件)。1.安装依赖在讲解 npm 之前,我们先看一下 vue 脚手架项目的两个重要目录:node_modules 和 package.json。node_modules:主要用来存放我们下载的依赖。package.json:主要保存与项目相关的元数据,以及项目的依赖项、版本等。(1) 普通安装方式命令:np

    日期 2023-06-12 10:48:40     
  • Vue学习笔记2-安装Vue

    Vue学习笔记2-安装Vue

    Vue学习笔记2-安装Vue一、安装Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。将 Vue.js 添加到项目中主要有四种方式:在页面上以 CDN 包的形式导入。 下载 JavaScript 文件并自行托管。 使用 npm 安装它。 使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了功能齐备的构建设置 (例如,热重载、保存时的

    日期 2023-06-12 10:48:40     
  • vue slot插槽_笔记本内存条插槽显示4个

    vue slot插槽_笔记本内存条插槽显示4个

    大家好,又见面了,我是你们的朋友全栈君。为什么使用slotslot(插槽)在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽插槽的目的是为了让我们原来的设备具备更多的扩展性比如电脑的USB我们可以插入U盘,手机,鼠标,键盘等等 组件中的插槽组件的插槽也是为了让我们的组件更具有扩展性让使用者决定组件内部的一些内容到底展示什么 例子移动开发中,几乎每个页面都有导航栏导航栏我们必然封装成

    日期 2023-06-12 10:48:40     
  • Vue笔记(4)

    Vue笔记(4)

    学习内容⊙ v-model双向绑定⊙ v-model结合radio⊙ v-model结合Checkbox⊙ 修饰符(lazy/number/trim)⊙组件化(重要)⊙ 父组件和子组件⊙ 语法糖注册组件⊙ 组件模板的分离写法v-model 表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定

    日期 2023-06-12 10:48:40     
  • Vue笔记(11) vue-router

    Vue笔记(11) vue-router

    学习内容⊙ vue-router的参数传递⊙ 导航守卫⊙ keep-alive参数传递第一种传参方式: App.vue 出来的效果就是这样的: 如果想取得query,也可以通过$route来获取 Profile.vue 第二种传参方式:App.vue 导航守卫 我们可以发现在进行网页跳转时,我们的标题并不会发生变化,这是因为我们index里面的标题就是router-test这个时候可以用到

    日期 2023-06-12 10:48:40     
  • Vue学习笔记之使用正则表达式提示Single character alternation in regex

    Vue学习笔记之使用正则表达式提示Single character alternation in regex

    0x00 概述在WebStrom中使用正则表达式,工具提示Single character alternation in regex0x01 问题Vue页面需要处理多选产生的列表,["a", "b", "c", "d"]复制转换成如下格式的字符串,入库a,b,c,d复制需要去掉 [ ,  ]  ,  " 

    日期 2023-06-12 10:48:40     
  • Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串

    Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串

    /** == 用于比较两者是否相等,忽略数据类型 === 用于更严谨的比较,值和值的数据类型都需要同时比较 */复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

    日期 2023-06-12 10:48:40     
  • Vue2.4中$attrs和$listeners的使用-学习笔记

    Vue2.4中$attrs和$listeners的使用-学习笔记

    首先我们来看下面的一张图,图中表示一个多级组件嵌套的情形。现在我们来讨论一种情况,A组件与C组件怎么通信,我们有多少种解决方案?我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力。使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件,这是一种解决方案,但

    日期 2023-06-12 10:48:40     
  • Vue3学习笔记(四)——组件、生命周期

    Vue3学习笔记(四)——组件、生命周期

    一、组件如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展,但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后,就可以像搭建积木一下来搭建我们的项目。1.0、SPASPA指的是Single Page Application,就是只有一张W

    日期 2023-06-12 10:48:40     
  • Vue学习笔记(一)

    Vue学习笔记(一)

    Vue 学习笔记(一)1. vue 简介Vue 是一套用于构建用户界面的前端框架1.1 vue 的两个特性数据驱动视图 使用了 vue 的页面,vue 会监听数据的变化,自动重新渲染页面的结构数据驱动视图是单向的数据绑定,即只能由数据来影响页面结构双向数据绑定 填写表单时,双向数据绑定可以让开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源中 1.2 MVVMvue 实现数据

    日期 2023-06-12 10:48:40     
  • Vue学习笔记(三)

    Vue学习笔记(三)

    Vue 学习笔记(三)1. 插槽插槽允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。我们使用标签时,开始标签和结束标签之间之前都没有写东西。组件的标签和正常的双标签,如 div、p 等一样,可以在里面写东西。但是,直接在里面写,会发现,写的东西不会显示出来,也找不到了,被丢弃了。其实这个也挺好理解的,组件本来就有东西了,vue 又不知道你写的东西要插到哪里去。所以,vue 提供

    日期 2023-06-12 10:48:40     
  • SortableJS / vue.draggable.next 使用笔记,持续记录

    SortableJS / vue.draggable.next 使用笔记,持续记录

    起步东西确实是好东西,奈何一开始文档没捋清,费了一番时间好好琢磨了一下。Github:https://github.com/SortableJS/vue.draggable.next,完整代码如下:<draggable v-model="myArray" group="people" @start="drag=true

    日期 2023-06-12 10:48:40     
  • Vue3学习笔记 怎么实现动画效果?

    Vue3学习笔记 怎么实现动画效果?

    有时候我们想做一些动画效果。过渡 transitioncss的属性transition 可以实现动画过渡效果。示例:点击按钮,让div的宽度变长。<template> <div class="box" :style="{width:width+'px'}"></div> <button @

    日期 2023-06-12 10:48:40     
  • Vue.js学习笔记

    Vue.js学习笔记

    在执行 npm run dev 命令的时候出现8080端口被占用# 根据端口号,查找被占用端口的进程 id netstat -nao|findstr "8080" # 结束进程,2228 为进程 id taskkill /pid 2228 /F复制使用v-for指令遍历组件时产生警告,提示需要在组件上增加一个key属性当使用v-for指令遍历组件时,需要在组件上添加一个key

    日期 2023-06-12 10:48:40     
  • Vue笔记:Vue3 Table导出为Excel

    Vue笔记:Vue3 Table导出为Excel

        1、安装 npm install -S file-saver 用来生成文件的web应用程序 npm install -S xlsx 电子表格格式的解析器 npm install -D script-loader 将js挂载在全局下npm install -S element-ui

    日期 2023-06-12 10:48:40     
  • Vue笔记:引入animate.css

    Vue笔记:引入animate.css

    转载:https://www.cnblogs.com/cbpm-wuhq/p/12753312.html 一:安装animate.css 在命令行中执行:npm install animate.css --save 二:在main.js中引入并使用 main.js中: import animated from 'animate.css' // npm install animate.cs

    日期 2023-06-12 10:48:40     
  • Vue笔记:vue项目引入bootstrap、elementUI、echarts

    Vue笔记:vue项目引入bootstrap、elementUI、echarts

      引入bootstrap 安装依赖包 cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev 全局引入在项目中根目录下的main.js中添加如下代码: import 'bootstrap' import $ from 'jqu

    日期 2023-06-12 10:48:40     
  • Vue笔记:Vue中使用组件

    Vue笔记:Vue中使用组件

     转载:https://blog.csdn.net/YYxiaobao0726/article/details/86577481 根组件引入其他组件 前言  一个.vue 文件就是一个单独的组件。 在 .vue 文件中, template 中都是html 代码,它定义了在页面中显示的内容,由于里面还有变量,也可以说定义了一个模版; script中都是js

    日期 2023-06-12 10:48:40     
  • Vue笔记:Vue基础

    Vue笔记:Vue基础

        目录 前言 hello Vue Vue挂载 数据绑定 事件绑定 计算属性和侦听器 条件渲染、列表渲染 双向绑定   前言 Vue.js 是一套构建用户界面的渐进式框架,你可以选择使用它的一部分功能,也可以使用全部功能。 以下代码的环境:https://codepen.io/pen   hello Vue Vue.js是以JavaScrip作为

    日期 2023-06-12 10:48:40     
  • 【vuejs】2/5vue学习笔记

    【vuejs】2/5vue学习笔记

        ### 准备开始 ------ #### 学员反馈 凃凃老师, 该拓展的一定要拓展, 即使有部分同学跟起来吃力 , 以后工作很可能在项目中遇到相似问题, 至少知道老师讲过 , 有对照也好解决. 可以说清楚有哪些必须掌握, 有哪些让有余力的同学掌握. #### 复习 - vue单文件方式 xxx.vue - 1:准备好配置文件 pack

    日期 2023-06-12 10:48:40     
  • vue学习:xmg vue学习笔记1/14代码案例

    vue学习:xmg vue学习笔记1/14代码案例

    ppt笔记参考:https://blog.csdn.net/qq_22182989/article/details/94393963 **************************** 官网:下载vuejs: https://cn.vuejs.org/v2/guide/installation.html

    日期 2023-06-12 10:48:40     
  • Vue3学习笔记(七)—— 状态管理、Vuex、Pinia

    Vue3学习笔记(七)—— 状态管理、Vuex、Pinia

    一、状态管理 1.1、什么是状态管理? 理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例: <script setup> import { ref } from 'vue' // 状态 const count = ref(0) // 动作 function increment() { count.value++ }

    日期 2023-06-12 10:48:40     
  • Vue3学习笔记(二)——组合式API(Composition API)

    Vue3学习笔记(二)——组合式API(Composition API)

    一、常用 Composition API 官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 组合式 API (Composition API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API: 响应式 API:例如&nb

    日期 2023-06-12 10:48:40     
  • 测试开发之Vue学习笔记-Vue基础

    测试开发之Vue学习笔记-Vue基础

    Vue基础 Vue官方文档: https://cn.vuejs.org/v2/guide/syntax.html 1. Vue环境搭建 (1)为什么用框架(Angular,React,Vue) 很多业务逻辑移动到前段实现,Javascript文件

    日期 2023-06-12 10:48:40     
  • Vue八股笔记自用2

    Vue八股笔记自用2

    路由 Vue-router的懒加载如何实现 箭头函数+import动态加载 const List = () => import(‘@/components/list.vue’) cons

    日期 2023-06-12 10:48:40     
  • 全面总结 Vue 3.0 的新特性!手把手教你如何入门Vue3.0(适合小白的保姆级教程)【尚硅谷vuejs3.0笔记】

    全面总结 Vue 3.0 的新特性!手把手教你如何入门Vue3.0(适合小白的保姆级教程)【尚硅谷vuejs3.0笔记】

    Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:Re

    日期 2023-06-12 10:48:40     
  • 慕课网前端项目:Vue2.0+Node.js+MongoDB全栈打造商城系统 笔记 整理【4/18】

    慕课网前端项目:Vue2.0+Node.js+MongoDB全栈打造商城系统 笔记 整理【4/18】

    第四章: vue-resource 上面打错了、应该是: cnpm i vue-resource -s   安装vue-resource cnpm i vue-resource --save 新建文件vue-resource.html 引入vue.js和vue-resource.js

    日期 2023-06-12 10:48:40     
  • Vue学习笔记之Vue中的路由使用

    Vue学习笔记之Vue中的路由使用

    Vue学习笔记之Vue中的路由使用 路由嵌套 在router.js中,添加对应路由: 在html中添加路由view: 对应的跳转路由地方,添加router-link: 路由重定向 在路由配置文件中,使用redirect即可。 对应的页面

    日期 2023-06-12 10:48:40     
  • Vue学习笔记——vuex

    Vue学习笔记——vuex

    5.1.理解vuex 5.1.1.vuex是什么 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理&

    日期 2023-06-12 10:48:40     
  • 测试开发之Vue学习笔记-H5实例百度音乐

    测试开发之Vue学习笔记-H5实例百度音乐

    Vue实例 25. Vue-实例-音乐列表 示例: src/route.js CopyimportVuefrom'vue'importVueRouterfrom"vue-router"importIndexfrom"../pages/index"importMusicNav

    日期 2023-06-12 10:48:40