zl程序教程

11-vue的使用

  • Vuex的简单使用

    Vuex的简单使用

    一、简介Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式 存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可 预测的方式发生变化。复制简而言之,Vuex采用类似全局对象的形式来管理所有组件的公用数据,如果想修改这个全局对象的数据,得按照Vuex提供的方式来修改(不能自己随意用自己的方式来修改)。二、优点是vue组件相互传递数据的重要工具 Vuex状态管理跟使用传统全局

    日期 2023-06-12 10:48:40     
  • 关于Vue使用es6模板字符串没反应的问题「建议收藏」

    关于Vue使用es6模板字符串没反应的问题「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 错误示范VScode发get请求的地址及参数使用单引号''包裹时,发现${this.keyWord}没有变颜色,跟字符串一个颜色,也就是没有将this.keyWord识别成变量,当成了一般字符串,发请求时带的参数问题请求不到结果search(){ this.$axios.get('https://api.gi

    日期 2023-06-12 10:48:40     
  • vuex-mapGetters使用案例解析

    vuex-mapGetters使用案例解析

    大家好,又见面了,我是你们的朋友全栈君。store/index.jsimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { msg:"Hello Vuex!", name

    日期 2023-06-12 10:48:40     
  • Vue之const的使用及注意点

    Vue之const的使用及注意点

    1.const定义的标识符必须初始化 const a;复制报错:const标识符未初始化定义并赋值: const a = 1;复制2.const修饰的标识符不能被修改 const a = 1; a = 2;复制报错: 再次给const修饰的标识符赋值3.常量的含义是指向的对象(内存地址)不能改变,对象的内部

    日期 2023-06-12 10:48:40     
  • 在 Vue3 中使用 IPFS 分布式存储和共享文件

    在 Vue3 中使用 IPFS 分布式存储和共享文件

    前言目前的互联网 HTTP协议 中心化严重,各种问题日益突出,http网络在下载文件和浏览网页时,只能一次从一个数据中心获取信息,当数据中心有问题、出现故障时,就会出现数据信息丢失或者网页无法找回。最初的 IPFS协议 只是为了解决中心化问题,ipfs基于网络数据分布式储存的网络基础,为了维护ipfs系统的稳定和长久发展,于是出现了filecoin,filecoin作为ipfs项目的奖励机制,fi

    日期 2023-06-12 10:48:40     
  • Vue.js - 使用Vue实现简简单单的分页功能

    Vue.js - 使用Vue实现简简单单的分页功能

    前言最近又开始考古之前的光年后台模板了,然后发现这个分页还挺好看的,但是实现起来很麻烦,所以就结合Vue2实现了一个动态的换页效果。Html<div id="page" class="container text-center"> <nav> <ul class="pagination pagi

    日期 2023-06-12 10:48:40     
  • Vuex的使用(五)——mapGetters的定义和用法[通俗易懂]

    Vuex的使用(五)——mapGetters的定义和用法[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。 参考文档:https://vuex.vuejs.org/zh/guide/当需要在组件中使用多个getters时,可以利用mapGetters批量生成计算属性(新增文件路径为src\components\componentE.vue,可以通过切换示例中注释的计算变量来查看对应的页面效果),代码如下:<template> <di

    日期 2023-06-12 10:48:40     
  • vuex mapGetters的使用「建议收藏」

    vuex mapGetters的使用「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { name: '张三', number: 0,

    日期 2023-06-12 10:48:40     
  • 从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之十三 || DTOs 对象映射使用,项目部署Windows+Linux完整版[通俗易懂]

    从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之十三 || DTOs 对象映射使用,项目部署Windows+Linux完整版[通俗易懂]

    大家好,又见面了,我是你们的朋友全栈君。本文3.0版本文章 本文内容,和netcore2.0一样,不需要更新。 更新很多小伙伴在用 IIS 发布的时候,总是会有一些问题,文章下边 #autoid-6-0-0 我也简单的动图展示了,如何 publish 到 IIS 的过程,如果你能看懂,却发现自己的项目有问题的话,可以直接down 我 published 好的项目,地址:https://git

    日期 2023-06-12 10:48:40     
  • Vue Router 的params和query传参的使用和区别(详尽)「建议收藏」

    Vue Router 的params和query传参的使用和区别(详尽)「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 首先简单来说明一下router和route的区别//$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word

    日期 2023-06-12 10:48:40     
  • 详解如何在vue项目中使用layui框架及采坑

    详解如何在vue项目中使用layui框架及采坑

    大家好,又见面了,我是你们的朋友全栈君。根据官网的文档,要在一个html文件下使用layui里面的组件库其实很简单,但是在vue项目中使用该ui库却存在着很多坑,下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui1.第一个坑:vue项目中使用npm安装引入时报错(目前并没有找到引入的合适的方式,知道的可以留言探讨)在官网中我们可以看到他提到支持npm安装,但是当我们安装成功后,在

    日期 2023-06-12 10:48:40     
  • vue插槽slot-scope_slot插槽的使用方法

    vue插槽slot-scope_slot插槽的使用方法

    大家好,又见面了,我是你们的朋友全栈君。vue中的插槽————slot什么是插槽?插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制怎么用插槽?默认插槽父组件<template> <div>

    日期 2023-06-12 10:48:40     
  • vue slot插槽_vue插槽的使用场景

    vue slot插槽_vue插槽的使用场景

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

    日期 2023-06-12 10:48:40     
  • vuex使用步骤_vuex的原理

    vuex使用步骤_vuex的原理

    大家好,又见面了,我是你们的朋友全栈君。前言每一个 Vuex 应用的核心就是 store(仓库)。store基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。你不能直接改变 store

    日期 2023-06-12 10:48:40     
  • vue怎么使用layui_layui动态添加输入框

    vue怎么使用layui_layui动态添加输入框

    大家好,又见面了,我是你们的朋友全栈君。vue-layer弹框插件 安装npm i --save vue-layer复制引用import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue);复制参数说明{ type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) t

    日期 2023-06-12 10:48:40     
  • vue项目中使用postcss-px2rem的方法总结「建议收藏」

    vue项目中使用postcss-px2rem的方法总结「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。vue项目中使用postcss-px2rem的2种方法在项目中为了屏幕适配,经常会用到rem,postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件.(下边的方法适用于使用cli2脚手架搭建的项目,现在好多数项目使用cli3搭建,我在后边的文章中增加了对cli3项目自适应的配置.)如何使用:1.安装npm i postc

    日期 2023-06-12 10:48:40     
  • Vue中NProgress进度条使用教程

    Vue中NProgress进度条使用教程

    安装npm安装npm install --save nprogress复制或CDN引入<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>复制导入// 导入nprogress.js impor

    日期 2023-06-12 10:48:40     
  • Vue04路由--SPA+ 使用路由建立多视图单页应用+router-link相关属性+【面试题:js中const,var,let区别】

    Vue04路由--SPA+ 使用路由建立多视图单页应用+router-link相关属性+【面试题:js中const,var,let区别】

    14天阅读挑战赛 努力是为了不平庸~目录1 vue中文件及文件夹命名规范2. SPA        2.1 SPA简介        2.2 SPA技术点3. 使用路由建立多视图单页应用        3.1 引入依赖库        3.2 创建自定义组件        3.3 创建路由3.3.1 什么是路由3.3.2 定义路由        3.4 创建和挂载根实例        3.5 使用

    日期 2023-06-12 10:48:40     
  • vue07登陆注册--跨域请求问题+ base64编码+axios使用+面试题【v-bind和v-modul和{{}}的区别】

    vue07登陆注册--跨域请求问题+ base64编码+axios使用+面试题【v-bind和v-modul和{{}}的区别】

    14天阅读挑战赛 努力是为了不平庸~目录1. 搭建项目1.1 使用vue-cli创建项目1.2 通过npm安装element-ui1.3 导入组件1.4 测试2 创建登录页面2.1 创建登录组件2.2 引入css(css.txt)2.3 配置路由2.4 在Login组件中将提交按键调整为100%宽度2.5 运行效果3. 后台交互3.1 引入axios3.2 axios/qs/vue-axios安装

    日期 2023-06-12 10:48:40     
  • Vue项目中使用TinymMCE富文本

    Vue项目中使用TinymMCE富文本

    之前在django项目中和一些静态页面中用过富文本编辑器 so many editors kindEditor,ckeditor,ueditor,wangeditor等等一系列的editor静态我们在vue项目中使用的是TinyMce废话不多说 直接开整引入文件放到vue项目中对应的文件下里2.引入js,在index.html中编写script标签<!DOCTYPE html> <

    日期 2023-06-12 10:48:40     
  • 【说站】Vuex中状态管理器的使用详解

    【说站】Vuex中状态管理器的使用详解

    这篇文章主要介绍了Vuex状态管理器的使用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下!一、Vuex是什么?Vuex在Vue项目开发时使用的状态管理工具。简单来说,就是对Vue的应用中多个组件的共享状态进行集中式的管理(读/写)Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Muta

    日期 2023-06-12 10:48:40     
  • vue使用md5_vuepress在线编辑文档

    vue使用md5_vuepress在线编辑文档

    大家好,又见面了,我是你们的朋友全栈君。 1,需求一直在找一个好用的富文本编辑器,但是发现现在富文本已经不流行了,现在流行md所以找md编辑器找到一个好用的:mavon-editorgithub:https://github.com/hinesboy/mavonEditor2,配置main.jsimport Vue from "vue"; import App from &q

    日期 2023-06-12 10:48:40     
  • vue使用axios解决跨域_vue前端解决跨域的方法

    vue使用axios解决跨域_vue前端解决跨域的方法

    大家好,又见面了,我是你们的朋友全栈君。工具版本: 【vue -V】:2.9.6 ide工具:VSCode / Idea前提:我们前端vue工程需要单独部署一、本地使用命令运行跨域问题。 外网访问的地址:https://www.runoob.com/try/ajax/json_demo.json 本地springboot接口访问的地址:http://192.168.3.12:8081/re

    日期 2023-06-12 10:48:40     
  • easycom模式使vue组件无需引入即可使用

    easycom模式使vue组件无需引入即可使用

    easycomHBuilderX 2.5.5起支持easycom组件模式。传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。如下:<template> <view class=&q

    日期 2023-06-12 10:48:40     
  • highcharts在vue中使用方法,兼容移动端

    highcharts在vue中使用方法,兼容移动端

    <template> <view> <highcharts :options="chartOptions"></highcharts> </view> </template>复制<script> // #ifdef H5 import {Chart} from &#x

    日期 2023-06-12 10:48:40     
  • Vue-监听使用方法和过滤器

    Vue-监听使用方法和过滤器

    前言今天是自学VUE整理知识点的第四天呢,今天整理一下过滤器,watch监听的知识点~~~~继续加油冲冲冲过滤器过滤器的作用:为页面中数据进行添油加醋有两种: 局部过滤器 全局过滤器格式:1.声明过滤器2.{{数据|过滤器的名字}}局部过滤器代码 局部⾃定义过滤器:关键用到的是使⽤filters属性,第⼀种和第⼆种声明⽅式都可以去实现。` Vue.component('myL

    日期 2023-06-12 10:48:40     
  • 「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信

    「后端小伙伴来学前端了」关于 Vue中 Slot 插槽的使用,实用且也是组件中必会的一个知识,另外也可以实现父子组件之间通信

    前言插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些。更多时候也会更加方便。今天介绍Vue中三种插槽吧:默认插槽、具名插槽、作用域插槽。环境准备先搭个初始环境给大家看看哈。一步一步讲完这个插槽。就是写了一个类别组件,分别渲染这三种数据。Category组件<template> <div class="

    日期 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     
  • vue-pdf使用demo

    vue-pdf使用demo

    <template> <div class="moduleIntro"> <el-button-group> <el-button type="primary" icon="el-icon-arrow-left" size="small" @click=

    日期 2023-06-12 10:48:40     
  • vue与jquery混用_vue怎么使用jquery

    vue与jquery混用_vue怎么使用jquery

    有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结合起来使用会大大提升开发效率。那么vue+jquery应该如何使用呢?一、首先引入vue文件(cdn或者下载到本地都行),参考vue官方连接 https://cn.vuejs.org/v2/gui

    日期 2023-06-12 10:48:40     
  • vue devtools如何使用调试_千牛提示opendevtools

    vue devtools如何使用调试_千牛提示opendevtools

    Write By Monkeyfly以下内容均为原创,如需转载请注明出处。关于Vue调试工具的最新说明【更新于2022年5月17日】: 由于时间久远,本文章中提到的 谷歌访问助手网站 已无法访问,强烈给大家推荐一个下载 vue-devtools 的插件商店,直接下载拖拽到扩展程序就可以了。简单方便:传送门 后续大家有新的方法可以在评论区留言,因为随着时间推移,链接很有可能会存在失效的问题。 前

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