成都动力无限 网站 差,搜索引擎谷歌,wordpress自定义工具栏,周口航迪科技网站建设公司怎么样vue3前端开发,感受一下组合式api和VUE2选项式的差异#xff01;今天开始#xff0c;正式开始#xff0c;进入学习Vue3的内容。以后代码#xff0c;案例分享#xff0c;都会采用组合式api的模式为大家做展示。
今天是第一节#xff0c;带大家感受一下#xff0c;Vue3的组…vue3前端开发,感受一下组合式api和VUE2选项式的差异今天开始正式开始进入学习Vue3的内容。以后代码案例分享都会采用组合式api的模式为大家做展示。
今天是第一节带大家感受一下Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先大家需要提前使用npm,脚手架在本地搭建好一个基础的Vue3项目。然后看下面的代码分享。 templateh3入口文件/h3Base //templatescript setup
import Base from ./components/Base.vue/script
以上代码是入口文件app.VUE的内容。里面很简单调用了一个自定义组件Base.vue。看得出来不需要再使用components对象包裹了。直接import就可以拿去使用了。 templateh3初步了解vue3组合式api/h3p{{ count }}/pbutton clickaddHandle加法运算/button
/template
script setup
import { ref } from vue
const count ref(0)
const addHandle () count.value
//this.$refs.username
/script
这个代码是Base.vue的内容里面很简单。定义了一个变量。count。一个按钮点击事件。让变量count的值自增1. 如图是可以正常执行如果大家要是使用之前Vue2版本的代码需要写很长。 templateh3初步了解vue3组合式api/h3p{{ count }}/pbutton clickaddHandle加法运算/button
/template
script
//vue3组合式api样式如下
// import { ref } from vue
// const count ref(0)
// const addHandle () count.value
//vue2选项式如下所示:
export default{data(){return {count:0}},methods:{addHandle(){this.count}}
}
/script
这段代码是使用了vue2版本选项式api风格编辑的。可以明显看到内容较多。
vue3 的是script标签里写一个setup.是新语法糖效果可以省去一些麻烦。它会知道默认导入哪些你需要的文件。
