Vue3较于Vue2的改变

el/2024/4/13 13:47:33

data选项应始终被声明为一个函数。

1.过度类名的更改:

  • Vue2.x写法
.v-enter,
.v-leave-to{opacity:0;}
.v-leave,
.v-enter-to{opacity:1;}
  • Vue3.x写法
.v-enter-from,
.v-leave-to{opacity:0;}
.v-leave-from,
.v-enter-to{opacity:1;}

移除keyCode作为v-on的修饰符,同时也不再支持config.keyCodes

移除v-on.native修饰符

Vue3替代原生点击事件(v-on.native)的方式是如下写法,在子组件emits:['close'],父组件可以直接触发事件

  • 父组件中绑定事件
<my-componentv-on:close="handleComponentEvent"v-on:click="handleNativeClickEvent"
>

子组件中声明自定义事件

<script>export default{emits:['close']}
</script>

移除过滤器(filter)

过滤器虽然看起来方便,但它需要一个自定义语法,打破大括号内表达式式“只是JavaScript”的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器


http://www.ngui.cc/el/3419086.html

相关文章

uniapp的picker标签实现多级联动

<picker class"form-item-picker" mode"multiSelector" //设置picker打开展示的内容列:range"newCategotyDeptList"//控制选择行的下标 :value"multDeptIndex"//设置picker内容展示的是name的值range-key"name"//监听每列…

react分环境打包配置

create-react-app 2.0生成的项目分环境打包 最近做的项目需要准备三个环境&#xff0c;一个开发环境&#xff08;development&#xff09;&#xff0c;一个演示环境&#xff08;demo&#xff09;&#xff0c;一个正式环境&#xff08;production&#xff09;&#xff0c;项目中…

uniapp实现多级菜单选择u-select

html <button v-for(item,index) in 5 :key"index" click"changeSelectClass(index)">选择菜单</button> //此组件可以根据children的深度自动增加子级菜单 <u-select click"show true" :default-value"defaultValue"…

uniapp返回上一页,触发上一页的刷新

在当前页触发上一页的run值更新 tapPre(){let pagesgetCurrentPages();//页面栈let prePagepages[pages.length-2]//上一页prePage.$vm.runMath.random();//触发上一页监听器uni.navgateBack();//返回上一页 }在上一页监听reFresh值变化了则触发执行 data(){return{run:} }, …

vue如何自定义修改网页title

document.titletitle名称 在vue中可以在前置守卫中修改或vue页created钩子中执行修改title

dotenv -e .env.development react-app-rewired build

> dotenv -e .env.development react-app-rewired build dotenv 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! react-admin0.1.0 build:dev: dotenv -e .env.development react-app-rewired buil…

TS的初识

1.什么时候会用到TS&#xff0c;规范数据类型的时候&#xff0c;如果往参数中规定传number类型&#xff0c;传其他类型报错这种情况可以使用ts //使用js规定传入的参数类型number function first(n1,n2){if(typeOf(n1)number&&typeOf(n2)number){//顺利进入方法return …

解决下载文件接收乱码问题及自定义下载文件类型

1.在文件接收的时候设置responseType为blob格式 export function personalCourseRecordExport(params) {return request({url: url,method: get,responseType: blob,params}) }2.调用接口下载文件 async downLoadTap(){ let resawait courseRecordExport({cardNo: this.cardNo}…

el-upload的自动上传文件

<el-upload name"multipartFiles" //设置上传文件的file参数值类似于formData.append("multipartFiles":file):on-exceed"handleExceed"//拦截触发非法验证提示class"uploadaDVen" multiple :action"imgUrls" //上传文件…