ICode9

精准搜索请尝试: 精确搜索
  • VUE3——如何挂载全局属性和方法2021-11-30 14:33:21

    前言 之前看过VUE3的文档,现在是实操进行记录下,相关文档如下: provide/inject: https://v3.vuejs.org/guide/component-provide-inject.html#working-with-reactivity provide/inject: https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-provide provide/in

  • Vue3+Module功能+指定Getter模块+获取不到资源2021-11-30 11:04:40

    homejs文件中 getters方法名称:homeGetName   我一开始的调用写法: $store.getters["home/homeGetName"]   发现如何都获取不到内容   我的原因是:home/homeGetName内容中   home这个值不是你文件的名称     应该你导出文件时创建的名称     所以你要写成 $store.get

  • 为什么vue3 需要 Composition API?2021-11-29 21:35:00

    文章目录 什么是 Composition API?什么是可组合?Composables 和 Mixin 解决的类似问题组合物 vs Mixin数据/方法来源的清晰度命名冲突来自组件的变异模块的反应数据可组合的全局状态 结论 什么是 Composition API? Vue 3 引入了 Composition API,此后它席卷了整个社区。在我

  • 新手必经之路,记一个自己犯的又一个愚蠢问题2021-11-29 11:31:57

    判断页面某个元素是否存在,若存在执行某个函数。 因为这个div在vue3中用了v-if绑定了一个响应式的isVisable,所以一开始写的时候就直接if(isVisable==true) 结果此时就已经将isVisable重新赋值了 故选用直接操作dom的写法 if (document.getElementsByClassName('xxx').length>0){

  • 即将2022年了,Vue3.x详细版为尔奉上(对比Vue2.x,打包带走)2021-11-28 09:33:06

    Vue3知识已经为你总结好,赶紧学起来吧~~~ Vue3新特性体验--上(内附简单实例,可直接使用)_前端不释卷leo的博客-CSDN博客1、先创建一个简单vue2项目,node、vue-cli、webpack等准备完成之后,创建vue3-test文件夹,cd vue3-test,然后vue init webpack,配置项目信息,创建vue2项目(安装vue-router

  • Vue3学习与实战 · 配置使用vue-router路由2021-11-26 18:31:06

    随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用。 一、目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/

  • Vue3学习与实战 · 配置使用vue-router路由2021-11-26 18:30:00

    随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-router在Vue3中的配置和使用。 一、目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/

  • VUE3 手册2021-11-26 11:01:57

    setup setup函数,是在beforeCreate之前执行(创建实例前$el)。由于在执行setup 时尚未创建组件实例,因此在 setup 选项中没有 this。 setup 参数 使用setup时,它接受两个参数: props: 组件传入的属性context:包含3个属性 props是响应式的, 当传入新的props 时,会及时被更新。由于是响

  • vue3 动态修改 keepAlive2021-11-25 15:34:57

    需求场景: 跳转逻辑A跳转 B,B页面 表单填写过程中 跳转 选择地址等额选项时,我们需要将B页面 进行 keepAlive 缓存,达到 返回时不重新渲染 但是我们需要考虑 从 A 页面到 B 页面 需要全部重新加载,此类场景 我们需要 动态的去控制 keepAlive 流程图 A页面 > B页面(表单页面) <

  • Vue3学习与实战 · 全局挂载使用Axios2021-11-25 14:00:48

    在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口。但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI。 一、全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: impo

  • v-model 双向绑定原理 及其在 Vue2 和 Vue3 中的区别2021-11-24 20:03:20

    场景 总结一波 v-model 原理,先说结论:v-model 本身是 v-bind 和 v-on 结合在一起的语法糖,是用于原生标签(如input、textarea...)和自定义组件上的一个简化包装,在 vue2 中 props 接收的 value,事件为 $emit(事件);在 vue3 中接收的 modelValue,事件为 $emit('update:modelValue')。原生的

  • vue3初体验代码2021-11-24 18:04:27

    t<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> [v-cloak]{ display:none; } </style> </head> <body> <

  • 大屏可视化项目之vue3-seamless-scroll无缝滚动组件(一)——基本使用2021-11-24 17:58:14

    大屏可视化项目之vue3-seamless-scroll无缝滚动组件(一)——基本使用 vue3-seamless-scroll官网地址——Vue3.0 无缝滚动组件,支持Vite2.0 https://www.npmjs.com/package/vue3-seamless-scroll 效果图 1、安装 npm npm install vue3-seamless-scroll --save Yarn yarn add

  • vue3父传子2021-11-24 15:02:08

    1.father.vue <template> <div> <Son :data=name></Son> </div> </template> <script> import Son from './son' export default { components:{ Son }, setup() { const name = 

  • Vue3 新特性2021-11-22 22:32:40

                <template> <img alt="Vue logo" src="./assets/logo.png"> 名字是:{{name}}<br/> 年龄是:{{person.age}}<br/> 体型是:{{person.figure}} 朋友是:{{friends}} <button @click="changeMeg">改名 <

  • Vue3跨域代理2021-11-22 09:58:35

    1.在根目录上创建一个vue.config.js的文件夹 2. // 1. npm run build 打包代码 // 2. 把代码给后端 // 3. 后端把前端代码放入后端工程 // 4. 后端重启后端服务 // * 容易出问题的就是下面的配置 module.exports = { //devServer.proxy适用于本地开发使用, //生成环境请用第

  • vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?2021-11-22 09:31:15

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用。在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应。接下来就看看setup如何实现data的响应式功能? 一、ref setup 内的自定义属

  • vue3 + elementplus 教程2021-11-21 18:00:39

    一. 初始化 安装@vue/cli  ,  -g: 全局安装 vue-cli npm install @vue/cli -g 或者 yarn global add @vue/cli   二. 创建项目 vue create 项目名  进行项目初始化 D:\workspace\test>vue create element-plus-test ? Your connection to the default npm registry

  • vue3 配置轮播图 swiper62021-11-21 14:30:00

    本人用的是"swiper": "^6.3.0", 现在轮播图配置更加友好 <template> <swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swip

  • vue3+ts +vant 从0搭建移动端架子2021-11-20 23:32:24

    1. 前期准备 安装node,vue3,vscode   1.1 安装更新脚手架 npm install -g @vue/cli        npm update -g @vue/cli   1.2 vscode 插件 Volar  ,Vue 3 Snippets  开发vue3时需要关闭vetur插件 2. vue3官网  https://v3.cn.vuejs.org/    vant 官网https://vant-contrib

  • vue3学习笔记五:v-model使用2021-11-20 18:58:54

    1、VmodelTest.vue <template> <div @click="$emit('update:modelValue',modelValue+1)">counter:{{ modelValue }}</div> </template> <script> export default { props: { modelValue: { type: Number,

  • vue3+swiper4.5.12021-11-19 13:06:37

    安装 npm i swiper@4 -S 引入css文件 import 'swiper/dist/css/swiper.css' 引入swiper文件 文档 https://www.swiper.com.cn/usage/index.html import Swiper from 'swiper' 使用swiper 文档 https://www.swiper.com.cn/usage/index.html <div class="swiper-

  • vue2 Vue3 v-model 原理2021-11-19 09:06:52

    面试题:请阐述一下 v-model 的原理 v-model即可以作用于表单元素,又可作用于自定义组件,无论是哪一种情况(vue2, vue3),它都是一个语法糖,最终会生成一个属性和一个事件。 当其作用于表单元素时,vue会根据作用的表单元素类型而生成合适的属性和事件。例如: text 和 textarea 元

  • vue3-使用ref和reactive的区别2021-11-18 19:03:55

    温馨提示: 使用之前别忘了引入哦 1.相同点 1.都能使数据具有响应式 2.在template中取值写法相同(其实就是ref可以不用.value) 2.不同点 1.理论上用ref绑定简单数据类型,reactive绑定复杂类型,但是用ref也可以绑定复杂数据类型 2.使用ref,在js里调用绑定的值,需要从value中获取,如

  • vue3事件的绑定和移除2021-11-18 15:00:41

    onMounted和onBeforeUnmount是组合API,从Vue中引入的生命周期函数

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有