免费做四年级题的网站,做网站公众号要多少钱,网站开发收税,家具在线设计网站目录 一、引言
二、示例代码
2.1. 工程结构图
2.2. main.js
2.3. App.vue
2.4. BaseCount.vue
三、运行效果 一、引言
在Vue CLI脚手架中一个组件的data选项必须是一个函数#xff0c;以此保证每个组件实例#xff0c;维护独立的一份数据对象。每次创建新的组件实…目录 一、引言
二、示例代码
2.1. 工程结构图
2.2. main.js
2.3. App.vue
2.4. BaseCount.vue
三、运行效果 一、引言
在Vue CLI脚手架中一个组件的data选项必须是一个函数以此保证每个组件实例维护独立的一份数据对象。每次创建新的组件实例都会新执行一次data 函数得到一个新对象。对于Java后端开发的同学相信一定很熟悉这就是面向对象的概念。data函数的使用与我们前面章节讲到的data对象的使用方法是一样的。 二、示例代码
2.1. 工程结构图 2.2. main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip falsenew Vue({render: h h(App),
}).$mount(#app)2.3. App.vue
templatediv classAppBaseCount/BaseCountBaseCount/BaseCountBaseCount/BaseCount/div
/templatescript
import BaseCount from ./components/BaseCount.vue
export default {components: {BaseCount}
}
/scriptstyle
.base-count {margin: 20px;
}
/style
2.4. BaseCount.vue
templatediv classbase-countbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div
/templatescript
export default {// data必须是一个函数以此保证每个组件实例维护独立的一个数据对象data () {console.log(调用data函数创建新的一个数据实例对象)return {count: 1314}}
}
/scriptstyle
/style
三、运行效果
我们可以看到控制面板输出了三次日志即App.vue中的三个BaseCount.vue组件分别通过data函数创建了独立的数据对象
