parent
42b1ac7548
commit
3133f09bd2
11 changed files with 234 additions and 75 deletions
@ -0,0 +1,73 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2 v-show="person.name">姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<h2 v-show="person.sex">性别：{{ person.sex }}</h2> |
||||
<h2>工作种类：{{ person.job.type }}</h2> |
||||
<h2>薪水：{{ person.job.salary }}</h2> |
||||
<h2>爱好：{{ person.hobby }}</h2> |
||||
<h2>c的值：{{ person.job.a.b.c }}</h2> |
||||
<button @click="changeInfo">修改信息</button> |
||||
<button @click="addSex">添加性别</button> |
||||
<button @click="deleteName">删除姓名</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref, reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 数据 |
||||
// let name = ref('张三') |
||||
// let age = ref(19) |
||||
// let job = reactive({ |
||||
// type: '前端工程师', |
||||
// salary: '30K', |
||||
// a: { |
||||
// b:{ |
||||
// c: 666 |
||||
// } |
||||
// } |
||||
// }) |
||||
// let hobby = reactive(['抽烟','喝酒','烫头']) |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
type: '前端工程师', |
||||
salary: '30K', |
||||
a: { |
||||
b: { |
||||
c: 666 |
||||
} |
||||
} |
||||
}, |
||||
hobby: ['抽烟', '喝酒', '烫头'] |
||||
}) |
||||
|
||||
function changeInfo() { |
||||
person.name = '李四' |
||||
person.age = 88 |
||||
person.job.type = '后端工程师' |
||||
person.job.salary = '31K' |
||||
person.hobby[0] = '测试' |
||||
} |
||||
|
||||
function addSex() { |
||||
person.sex = '男' |
||||
} |
||||
|
||||
function deleteName() { |
||||
delete person.name |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
changeInfo, |
||||
addSex, |
||||
deleteName |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<Demo @hello="showHelloMsg" msg="你好" user="Roger"> |
||||
<template v-slot:slot1> |
||||
<span>Roger</span> |
||||
</template> |
||||
</Demo> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup(){ |
||||
function showHelloMsg(value) { |
||||
alert(`showHelloMsg:${value}`) |
||||
} |
||||
|
||||
return { |
||||
showHelloMsg |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<button @click="test">触发showHelloMsg</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
beforeCreate() { |
||||
console.log('---beforeCreate---') |
||||
}, |
||||
props: ['msg', 'user'], |
||||
emits: ['hello'], |
||||
setup(props, context) { |
||||
console.log('---setup---', context) // $attrs $emits $slots |
||||
console.log('---setup---', context.slots) // $attrs $emits $slots |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18 |
||||
}) |
||||
|
||||
function test() { |
||||
context.emit('hello',666) |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
test |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<button @click="test">触发showHelloMsg</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
beforeCreate() { |
||||
console.log('---beforeCreate---') |
||||
}, |
||||
props: ['msg', 'user'], |
||||
emits: ['hello'], |
||||
setup(props, context) { |
||||
console.log('---setup---', context) // $attrs $emits $slots |
||||
console.log('---setup---', context.slots) // $attrs $emits $slots |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18 |
||||
}) |
||||
|
||||
function test() { |
||||
context.emit('hello',666) |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
test |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue