- vue2:
v-on="$listeners"
vue3:v-bind="$attrs"代替
- 过滤器
vue2:
<p class="font-26 gray">金额{{ detail.money | currency('', 2) }}</p>
import * as filters from './util/filter'
Object.keys(filters).forEach((k) => Vue.filter(k, filters[k]))
vue3:
<p class="font-26 gray">金额{{ $filters.currency(detail.money, '', 2) }}</p>
import * as filters from './util/filter'
import { createApp } from 'vue'
const app = createApp(App)
Object.keys(filters).forEach((k) => {app.config.globalProperties.$filters[k] = filters[k]})
-
插槽
vue2:const slots = this.$slots.default
vue3:
const slots = this.$slots.default()
-
$on,$off
vue2:
this.$on('form.addField', field => {
if (field) {
this.fields.push(field)
}
})
vue3:
util/mitt.js
import mitt from 'mitt'
const emitter = mitt()
export default emitter
import emitter from '@/utils/mitt.js'
emitter.on('form.addField', field => {
if (field) {
this.fields.push(field)
}
})
-
vue2:
在这里插入代码片
Vue.prototype. c o o k i e = c o o k i e v u e 3 : ‘ a p p . c o n f i g . g l o b a l P r o p e r t i e s . cookie = cookie vue3: `app.config.globalProperties. cookie=cookievue3:‘app.config.globalProperties.cookie = cookie` -
vue2:
Vue.use(Checkbox)
vue3:app.use(Checkbox)
-
npm i vant@next -S(vant 升级到vue3可用的版本)
-
router
main.js
vue2:
import Vue from 'vue'
vue3:
import { createApp } from 'vue'
const app = createApp(App)
app.use(router)
router/index.js
vue2:
import Vue from 'vue'
import Router from 'vue-router'
const router = new Router(routerList)
var routerList = {
mode: 'history',
base: '/keeper',
routes: [
{
path: '/',
redirect: '/login',
},
],
}
vue3:
import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter(routerList)
var routerList = {
history: createWebHistory('/keeper/'),
routes: [
{
path: '/',
redirect: '/login',
},
],
}
- vue2:
Vue.component('svg-icon', BaseSvg)
vue3:app.component('svg-icon', BaseSvg)
- element-ui 升级 element-plus
- vue-resource 改成axios
- vue2:
new Vue({
el: '#app',
router,
store,
render: (h) => h(App),
}).$mount('#app')
vue3
app
.use(router)
.use(require('vue-wechat-title'))
.use(ElementPlus)
.use(ElCheckbox)
.use(ElRadio)
.use(Calendar)
.use(Vant)
.mount('#app')
- vue-router to 不生效:最前面加一个反斜线
vue2:<van-cell v-if="platformId === '1'" title="服务协议" is-link to="policies/newServer" />
vue3:<van-cell v-if="platformId === '1'" title="服务协议" is-link to="/policies/newServer" />
- 路由匹配的name不可以重名,否则重名的匹配不到
- vue2: :value="" vue3:modelValue=""
- vue2: this.$set(config, ‘defaultValue’, event) vue3:config.defaultValue = event