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