zl程序教程

Vue笔记3

  • Vue笔记(2)

    Vue笔记(2)

    学习内容⊙动态绑定style样式 ⊙ 计算属性 ⊙ 事件监听 v-on⊙ v-on修饰符⊙ 条件判断不仅仅是可以动态绑定class,style样式也是可以动态绑定的动态绑定style 1.对象形式::style="{key(属性名), value(属性值)}" 试了一下,如果是像font-size这种中间有-连接的属性,需要使用驼峰法来

    日期 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笔记(5)

    Vue笔记(5)

    学习内容⊙ 组件可以访问Vue实例数据吗⊙ 父子组件的通信⊙ 组件通信-父传子⊙ 组件通信-子传父组件可以访问Vue实例数据吗 我们可以测试一下:得出的结果是不行的 Vue组件应该有自己保存数据的地方 这样会报错:我们看看正确的写法:我们来用组件实现一下之前的计数器:父子组件的通信 父传子写法但是也会觉得奇怪 为什么里面明明是变量却写成字符串的形式呢?其实有很多种写法: 注意: 如果我

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

    Vue笔记(6)

    学习内容⊙ 父组件访问子组件的方式: $refs⊙ 父子组件之间的访问⊙ 插槽slot的基本使用⊙ slot-具名插槽的使用父子组件的访问方式 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件子组件访问父组件: 使用children或者refs子组件访问父组件: 使用$parent$childrenthis.$children是一个数组类型,它包含所有的子组

    日期 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双向绑定原理面试题_面试可以记笔记吗

    vue双向绑定原理面试题_面试可以记笔记吗

    2019年6月6号,为了爱情,我离开工作了一年多的广州来到了杭州这个互联网城市。开始我的前端面试之旅…放下拧螺丝的扳手,开始造起了飞机…面试的第一家,一开始就问 Vue 双向绑定怎么实现。一脸蒙蔽,之前看过源码,但是没有深入研究,只回答出了使用 Object.definePropertyObject.defineProperty(obj, prop, { // ... get: function

    日期 2023-06-12 10:48:40     
  • Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得

    Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得

    虚拟列表背景手上有个字幕编辑器的项目,因为长视频也许会有几千条字幕,所以字幕编辑器的列表中就会有几千条列表项。 但是如果将这几千条列表项全部渲染在 DOM 中,就会造成浏览器轻则卡顿,重则卡死,根本无法正常使用。 针对这种情况,我通过 Google 了解到可以通过虚拟列表技术来解决。 虚拟列表做的事情,就是按需渲染。只需要渲染当前视图需要显示的几个条目和即将滚动到的几个条目。在开发者工具中可以发现

    日期 2023-06-12 10:48:40     
  • Vue.js 学习笔记 - 路由(Router)

    Vue.js 学习笔记 - 路由(Router)

    路由<router-link to="/foo">Go to Foo</router-link> <router-view></router-view>复制const routes = [ { path: '/foo', component: Foo }, { path: '/bar'

    日期 2023-06-12 10:48:40     
  • Vue学习笔记之ElementUI 最大值最小值

    Vue学习笔记之ElementUI 最大值最小值

    速记:使用ElementUI时候,需要填写最大值和最小值时候,在该col内套用一个row,然后再用3个col分割即可<el-row :gutter="15"> <el-col :span="8"> <el-row > <el-col :span="11">

    日期 2023-06-12 10:48:40     
  • Vuejs 设计与实现笔记(一)

    Vuejs 设计与实现笔记(一)

    编程方式的改变:Vuejs 等前端 MVVM 框架的出现其实是将我们从原来的命令式开发引入了声明式开发的情景中: 命令式开发:主要关注的是过程,程序执行的每一个步骤都需要我们亲力亲为。例如我们要通过编辑输入内容来实时显示到页面上,那我们需要先得到两个元素,监听输入框,在监听函数中得到新的内容并设置到页面中。&ensp;&ensp;&ensp;&ensp; 声明式开发

    日期 2023-06-12 10:48:40     
  • Vue开发、学习笔记,持续记录

    Vue开发、学习笔记,持续记录

    Vue每天学一些,慢慢的也学下来了。记一些笔记生命周期图:https://nicen.cn/collect/life.pngVue-Router学习:https://nicen.cn/vue-router.html开始Vue官网: https://vuex.vuejs.org/zh/基于Vue的各种UI库 Vuetify :https://vuetifyjs.com/zh-HansElement-

    日期 2023-06-12 10:48:40     
  • Vue Ant Admin学习笔记,持续记录

    Vue Ant Admin学习笔记,持续记录

    Vue Ant Admin基于Vue2.x的中后台管理系统:https://iczer.gitee.io/vue-antd-admin-docs/比较漂亮的,可以借鉴的:https://vue-admin-beautiful.com/admin-proAnt Design of  Vue: https://antdv.com/docs/vue/introduce-cn/(V2及以上版本为Vue3.

    日期 2023-06-12 10:48:40     
  • vue笔记

    vue笔记

    此处是 vue开发学习笔记目录-vue官网open in new window-1.传统的网页开发方式的弊端-2.第一个vue3.x应用-3.methods、computed、watch:区别-4.vue-行内样式和动态class-5.vue指令认识-6.vue单文件应用-7.Vue单文件应用续

    日期 2023-06-12 10:48:40     
  • Vue.js 滑动拼图验证码实现笔记

    Vue.js 滑动拼图验证码实现笔记

    背景关于验证码的使用场景还是非常多的,很多网站上的验证码可谓是五花八门,下面是我使用Vue.js实现滑动拼图验证码做的一个笔记。效果展示准备工作访问KgCaptcha网站,注册账号后登录控制台,访问“无感验证”模块,申请开通后系统会分配给应用一个唯一的AppId、AppSecret。提供后端SDK来校验token(即安全凭据)是否合法 ,目前支持PHP版、Python版、Java/JSP版、.Ne

    日期 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笔记:bin-code-editor使用

    Vue笔记:bin-code-editor使用

        npm 安装 npm i bin-code-editor -S # or yarn add bin-code-editor   引入 在 main.js 中写入以下内容: import Vue from 'vue'; import CodeEditor from 'bin-code-editor'; import 'bin-code-editor/l

    日期 2023-06-12 10:48:40     
  • vue笔记:vue组件的生命周期

    vue笔记:vue组件的生命周期

        vue组件的生命周期 Vue实例有一个完整的生命周期,从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。     beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和

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

    Vue笔记:Vue中使用mockjs

      前言   前后端分离的开发模式,前端需要向后端请求数据(ajax请求),但实际开发过程中,前后端会约定一份接口文档,但前后端开发进度并不一致,当后端没有完善接口功能时,前端需要在本地模拟数据返回,此时需要使用到mockjs。 安装 npm install mockjs --save-dev 目录结构    配置 1、api下的config.js:配置axi

    日期 2023-06-12 10:48:40     
  • Vue笔记:Vue制作个人简历并使用Nginx部署

    Vue笔记:Vue制作个人简历并使用Nginx部署

      一、实现效果 项目使用Vue3+ElementUI+BootStarp Github地址:https://github.com/Angell1/CV 测试页面:http://123.207.251.121:8888/ 环境:     部署 1、Vue打包 npm run build 注意:我使用vue3,所以自定义配置文件: module.export

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

    Vue笔记:vue-router

      目录 路由介绍 路由的基本配置 路由跳转 动态路由 嵌套路由 vue-router中的$route和$router 路由介绍 SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的组件。 单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端

    日期 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     
  • vue学习笔记

    vue学习笔记

    在上一节中我们自定义了一个Counter组件,按照官方的教程,我们不仅可以一次输出变量,还可以周期的改变变量的值 <template> <div id&#

    日期 2023-06-12 10:48:40     
  • vue读书笔记变量绑定

    vue读书笔记变量绑定

    我们看到官方的示例 <div id="counter"> Counter: {{ counter }} </div> const Counter = {

    日期 2023-06-12 10:48:40     
  • vue读书笔记开发环境搭建

    vue读书笔记开发环境搭建

    安装vue cli npm install -g @vue/cli 安装vue vue create my-project 安装过程中有可能因为网络的原因导致失败,需要更换淘宝源 npm

    日期 2023-06-12 10:48:40     
  •  Vue3学习笔记(五)——路由,Router

    Vue3学习笔记(五)——路由,Router

    一、前端路由的概念与原理 1.1. 什么是路由 路由(英文:router)就是对应关系。 1.2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同组件之间的切换需要通过前端路由来实现。 结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成! 1.3. 什么是前端路由 通俗易懂的概念:

    日期 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学习笔记——Vue中的ajax

    Vue学习笔记——Vue中的ajax

    4.1. 解决开发环境Ajax跨域问题 使用代理服务器 4.2.github用户搜索案例 4.2.1.效果 4.2.2接口地址 https://api.github.com/search/users?q=

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