Vue2 & Vue3 中data 与setup 数据的调用情况
This commit is contained in:
云上贵猪
parent
3b57cd0171
commit
c8956bc0ab
78
.idea/workspace.xml
generated
78
.idea/workspace.xml
generated
@ -1,20 +1,41 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="AutoImportSettings">
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="" />
|
||||
<list default="true" id="82d74fc6-f54a-4255-8e7b-990e62fbaaf1" name="更改" comment="新项目">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/components/Person.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Person.vue" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="Vue Composition API Component" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="Git.Settings">
|
||||
<option name="RECENT_BRANCH_BY_REPOSITORY">
|
||||
<map>
|
||||
<entry key="$PROJECT_DIR$" value="master" />
|
||||
</map>
|
||||
</option>
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="ProjectColorInfo"><![CDATA[{
|
||||
"associatedIndex": 3
|
||||
}]]></component>
|
||||
<component name="ProjectColorInfo">{
|
||||
"associatedIndex": 3
|
||||
}</component>
|
||||
<component name="ProjectId" id="2wOjf2pz32CUW5I0w9ht0hb3zbS" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true">
|
||||
<ConfirmationsSetting value="2" id="Add" />
|
||||
</component>
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
<option name="showLibraryContents" value="true" />
|
||||
@ -23,15 +44,20 @@
|
||||
"keyToString": {
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"RunOnceActivity.git.unshallow": "true",
|
||||
"git-widget-placeholder": "master",
|
||||
"git-widget-placeholder": "dev",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.detected.package.tslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"settings.editor.selected.configurable": "preferences.keymap",
|
||||
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/vue3_01_hello/node_modules/typescript/lib",
|
||||
"ts.external.directory.path": "/Volumes/Date/01_Demo/07-Vue3/node_modules/typescript/lib",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
},
|
||||
"keyToStringList": {
|
||||
"vue.recent.templates": [
|
||||
"Vue Composition API Component"
|
||||
]
|
||||
}
|
||||
}]]></component>
|
||||
<component name="SharedIndexes">
|
||||
@ -49,11 +75,47 @@
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1745919613888</updated>
|
||||
<workItem from="1745919615396" duration="326000" />
|
||||
<workItem from="1745919615396" duration="2730000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="新项目">
|
||||
<option name="closed" value="true" />
|
||||
<created>1745920284467</created>
|
||||
<option name="number" value="00001" />
|
||||
<option name="presentableId" value="LOCAL-00001" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1745920284467</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="2" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="3" />
|
||||
</component>
|
||||
<component name="Vcs.Log.Tabs.Properties">
|
||||
<option name="TAB_STATES">
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State>
|
||||
<option name="FILTERS">
|
||||
<map>
|
||||
<entry key="branch">
|
||||
<value>
|
||||
<list>
|
||||
<option value="dev" />
|
||||
</list>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</State>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="新项目" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="新项目" />
|
||||
</component>
|
||||
</project>
|
||||
35
README.md
35
README.md
@ -1,33 +1,2 @@
|
||||
# vue3_01_hello
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
# vue3 学习库
|
||||
111
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name:'Person',
|
||||
data(){
|
||||
return{
|
||||
name:'张三',
|
||||
age:18,
|
||||
tel: '13700009999'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
//展示电话
|
||||
showTel(){
|
||||
alert(this.tel)
|
||||
},
|
||||
//修改电话
|
||||
setTel(){
|
||||
this.tel = '137888888888'
|
||||
},
|
||||
//修改年龄
|
||||
setAge(){
|
||||
this.age += 1;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Person',
|
||||
data(){
|
||||
return {
|
||||
a: 'vue2 data 中的数据',
|
||||
b: 0,
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
// vue2 的方法 methods
|
||||
methods:{
|
||||
vue2Data(){
|
||||
console.log(this.age + 1)
|
||||
}
|
||||
},
|
||||
// setup vue3 新语法
|
||||
setup(){
|
||||
let age = 18
|
||||
//会报错 因为setup 比data 还要在前面 所以无法在此使用 data 中的数据，报错内容：
|
||||
// Uncaught (in promise) Error: A listener indicated an asynchronous
|
||||
// response by returning true, but the message channel closed before
|
||||
// a response was received
|
||||
//let x = this.a
|
||||
return {age}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="setBox">
|
||||
<h1>姓名:{{name}}</h1>
|
||||
<h1>年龄:{{age}}</h1>
|
||||
<button @click="showTel">电话:{{name}}</button>
|
||||
<button @click="setAge">年龄+1</button>
|
||||
<button @click="setTel">电话修改</button>
|
||||
<h1>setup 的 age:{{age}}</h1>
|
||||
<!--<h1>姓名:{{name}}</h1>-->
|
||||
<hr>
|
||||
<button @click="vue2Data">这是从vue2 调动 vue3 setup的年龄 + 1</button>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@ -45,6 +44,4 @@
|
||||
border-radius: 1.5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user