[Vue @Component] Simplify Vue Components with vue-class-component
Vue with Class Component Components
2023-09-14 09:00:50 时间
While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-component
flattens component development by allowing you to add your data properties and handlers directly as properties of your class.
Install:
npm install vue-class-component --save
jsconfig.json:
{ "compilerOptions": { "experimentalDecorators": true } }
App.vue:
<template> <h1 @click="onClick"> {{message}} </h1> </template> <script> import Vue from "vue" import Component from "vue-class-component" @Component({}) export default class App extends Vue { message = "Hello from class" onClick() { this.message = "Goodbye" } } </script>
相关文章
- 那些年曾经没回答上来的vue面试题
- Vue-DevTool这么方便,你会用吗?
- vue代码编辑器组件_vue activiti
- html使用vue axios,使用 Vue和axios
- VUE组件封装_vue使用组件
- vue关闭eslint检测_eslint with error prevention
- Object.assign(this.$data, this.$options.data())-vue清空数据
- alert弹窗样式自定义-Vue.js开发移动端经验总结
- 前端面试题汇总-Vue篇
- 这款Spring Boot + Vue开源博客系统实战项目太赞了!
- Vue组件通信的其他方式
- vue.js入门篇之Vue.js 样式绑定
- Mac升级卸载vue/cli2.9.6--无法卸载vue
- Vue中使用webpack别名的方法详解编程语言
- vue操作的填坑之旅详解编程语言
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue结合Redis,加快数据读取速度(vue读取redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)