ICode9

精准搜索请尝试: 精确搜索
  • Vue3基础知识提炼2022-06-08 04:00:08

    1、{{}} data2、""等同{{}},数据单向绑定v-bind: 简化 :3、v-if v-else4、v-for="(i, index) in array"5、v-on: 等同 @ ,method6、[] 三元运算7、已算属性,conputed 8、组件,props,template 9、数据传递,$emit 10、数据双向绑定v-model

  • Vue3 语法糖2022-06-06 11:37:26

    <template> <node /> </template> <script setup> //要带.vue import node from './node.vue' import { ref,reactive } from 'vue' const props = defineProps({ foo: String })var a = ref(!1)var b = reactive({n:1}) de

  • Vite 创建一个Vue3项目2022-06-05 22:04:20

    Vite1.0 为vue3而生 Vite2.0 跨框架,流行版本,内部不包含框架相关内容,通过插件提供不同开发框架的功能 vite中index.html 是必须的,html里引入入口文件的js script之后,vite的server就对其进行解析 脚手架初始化项目,安装依赖 npm init @vitejs/app yarn // 安装依赖用yarn, npm有时

  • jeecgboot-vue3-AntDesign笔记(十四)——异步调用后端2022-06-04 11:04:40

    错误操作 handler function onDeleteRow(props) { console.log("on delete one row",props.row.id); deleteOne({"id":props.row.id}); console.log("delete succ."); loadData();//加载删除后的数据 } api expo

  • vue3状态驱动动态css2022-06-03 14:00:58

    - vue3单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上: template <div class="dynamicClass"></div> script     const theme = reactive({ border: '1px solid red', background: 'pink'

  • webpack创建ts+vue3项目2022-06-01 16:00:21

    既然都到了,创建项目这里,当然webpack和vue这些工具是必须要有的 1:查看是否安装成功 注意大小写,我在查询webpack时,使用了大写V他提示让我去下载,webpack   2:创建命令 vue create (vue3-ts-项目名字) (1)选择第三个选项进行手动选择   Please pick a preset:请选择预设的vue版本  

  • jeecgboot-vue3笔记(三)弹窗的使用2022-06-01 13:03:25

    需求描述 点击按钮,弹窗窗体(子组件),确定后在子组件中完成业务逻辑处理(例如添加记录),然后回调父组件刷新以显示最近记录。 实现步骤 子组件 子组件定义BasicModal <BasicModal v-bind="$attrs" @register="registerModal" title="登录样品" @ok="handleSubmit" :width="700" :help

  • jeecgboot-vue3-AntDesign笔记(十五)——页面水印2022-05-31 21:34:25

    应用效果 操作步骤 引入 import { useWatermark } from '/@/hooks/web/useWatermark'; 解构,获取变量 const { setWatermark, clear } = useWatermark(); 页面加载后添加水印 setWatermark('水印内容')

  • vue3中的reactive与ref对比2022-05-31 19:01:02

      定义数据方面:     1.ref用来定义:基本类型数据。     2.reactive用来定义:对象(或数组)类型数据。     注:ref也可以用来定义对象(或数组)类型数据,他内部会自动通过reactive转化为代理对象。   原理角度方面:     1.ref通过Object.defineProperty()的get和set实

  • Vue3的script setup语法糖这么好用的吗????2022-05-31 02:31:15

    最近发现这个vue3居然还可以这样写 原始写法 <template> <h1>Tangdoudou</h1> <h1>{{ num }}</h1> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: &

  • vue3在setup中获取异步数据并暴露出去2022-05-30 19:00:24

    使用生命周期钩子onBeforeMount setup(){ const postData = ref([]) onBeforeMount(async () => { const res = await axios.get('http://localhost:3002/postdata') postData.value = res.data }) return { ... postData }

  • jeecgboot-vue3笔记(六)主子组件数据加载2022-05-29 17:35:43

    需求 同 jeecgboot-vue3笔记(二)主子组件数据加载 https://www.cnblogs.com/mahongbiao/p/16303590.html 实现父组件切换记录行,加载该行相关的子组件记录,除了子组件export出loadData并由父组件通过ref调用外,还可以通过子组件export出prop(prop就是给外边调用的,因此不需要指明export)并

  • Vue全家桶之vue32022-05-29 17:32:29

    1、Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0   2、Vue3带来了什么 1.性能的提升 Vue3与Vue 2相比,在包大小(使用 tree-s

  • vue3为什么要用proxy实现双向数据绑定?2022-05-28 21:36:03

    一:object.defineProperty的缺点: 1.因为es5的object.defineProperty无法监听对象属性的删除和添加2.不能监听数组的变化,除了push/pop/shift/unshift/splice/spObject.definert/reverse,其他都不行3.Object.defineProperty只能遍历对象属性直接修改(需要深拷贝进行修改) 二:proxy的

  • vue3中使用keep-alive2022-05-28 20:34:47

      目的:介于产品非要我实现进入详情页出来页面筛选项不变这个需求~于是我学习了下 一、介绍 keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度。常用的用法是将组件或者路由缓存,现有的用法vue2.x与vue3.x有部分差别。以下主要将keepali

  • vue跑马灯vue3-marquee2022-05-28 13:34:59

    安装vue3-marquee 如果您使用的是 npm: npm install vue3-marquee@latest --save 如果您使用的是yarn: yarn add vue3-marquee@latest 用法 最常见的用例是全局注册组件。 // main.js import { createApp } from 'vue' import Vue3Marquee from 'vue3-marquee' import 'vue3-marqu

  • vue3 keep-alive实现前进更新后退销毁2022-05-28 10:34:33

    想要实现前进更新后退销毁,核心在操作keep-alive的include。 具体做法就是当进入新页面时将页面name保存,再次进入就将它之后的name删除。 具体实现: 正常情况下页面是线性前进的: A->B->C->D include数组数据[A,B,C,D] 当再次进入C,就认为是D返回C include数组数据[A,B,C] D页面就被销

  • vue3在setup中将函数赋给对象外调用,访问不到setup内部变量2022-05-26 03:00:06

    由于对js函数使用并不熟练,写vue的时候遇到一个坑,在setup中封装一个函数foo,用于操作对象内的变量,并把foo挂上window.addEventListener,结果发现event触发的时候,访问不到setup内的变量。 于是用下面这段原生js代码找出了问题: const obj = { count: 1, foo: () => { window.ad

  • vue3+quasar+capacitor开发多平台项目,使用quasar改变主题背景2022-05-26 00:03:26

    quasar的样式和其他的框架修改不太一样,需要我们使用动态的方式来进行变更,一般来说有两种方案进行主题修改 方案一: 修改样式所需文档: 这里是样式修改的说明:https://quasar.dev/style/color-palette#how-it-works 这里有大量的默认样式声明:https://quasar.dev/style/sass-scss-vari

  • vue3 axios中使用router进行跳转2022-05-25 12:32:26

    在axios文件中导入router,console输出为undefined (js/ts中无法使用vue声明的文件/不能使用useRouter ,useRoute,他们需要在setup中调用执行后才能用) 解决方法(推荐) 导入项目中已配置好的router import router from '@/router' 其他方法 window.location.href = "/login" 原文链接

  • Vue32022-05-25 10:02:26

    官方文档 vue 官方文档 项目搭建 // 在cmd终端输入下方命令,查看@vue/cli版本,确保@vue/cli版本在4.5.0以上 vue --version // 如果vue/cli版本过低或上方命令报错,需要安装或者升级你的@vue/cli npm install -g @vue/cli // 创建新项目 vue create vue_test // 可视化创建新项目 vue

  • 【摸鱼神器】一次搞定 vue3的 路由 + 菜单 + tabs2022-05-25 09:01:26

    做一个管理后台,首先要设置路由,然后配置菜单(有时候还需要导航),再来一个动态tabs,最后加上权限判断。 这个是不是有点繁琐?尤其是路由的设置和菜单的配置,是不是很雷同?那么能不能简单一点呢?如果可以实现设置一次就全部搞定的话,那么是不会很香呢? 我们可以简单封装一下,实现这个愿望。 定

  • vue32022-05-24 16:31:07

      ref函数:定义一个响应式的数据     语法:const userDefinedName = ref(initValue)     1.创建一个包含响应式数据的引用对象(reference对象,简称ref对象)      2.js中操作数据:xxx.value     3.在模版中读取数据时,不需要.value,直接使用:<div>{{xxx}}</div>    

  • vue3中当用reactive()中定义的对象再次赋值,页面不会自动更新解决方法2022-05-24 14:04:07

    在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同。在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性。然后赋值是我们经常进行的操作,那么该怎么解决呢? 问题:reactive定义的数据不能直接赋值 下述代码会报错: Cannot assign to "form" because i

  • Vue3 组合式总结2022-05-24 02:31:58

    组件通信 props emits 事件总线 eventbus 使用mitt库 通过defineExpose,getCurrentInstance provide inject v-model vuex 响应式 ref reactive toRef toRefs 监听 watch watchEffect keepalive activeted deavtiveted slot 插槽上通过v-bind向外界传递数据 插槽内部可以

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有