Skip to content

V
Vue3 范例演示

skyuning / Vue3 范例演示
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
Vue3 范例演示
提交 a9bbcb4c 编写于 作者: S skyun
浏览文件
操作

Fri Oct 20 00:57:00 CST 2023 inscode

上级 86fba3bf
隐藏空白更改
内联 并排
Showing with 129 addition and 110 deletion
src/assets/main.css
浏览文件 @ a9bbcb4c
@import "./base.css";
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
......@@ -23,13 +20,10 @@ a,
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
......@@ -51,7 +45,7 @@ a,
.match-width {
width: 100%;
}
fixtop {
.fix-top {
position: fixed;
top: 20px;
right: 20px;
......
src/views/lesson-1.vue
浏览文件 @ a9bbcb4c
......@@ -5,125 +5,143 @@
<main class="flex-col">
<Divider>基本数据类型</Divider>
<h2><code>num: {{num}}</code></h2>
<item class="head">
<name>变量名</name>
<lable>变量引用</lable>
<value>变量值</value>
</item>
<item>
<name>refNum</name>
<lable>ref(num)</lable>
<value>{{refNum}}</value>
<div class="item head">
<div class="name">变量名</div>
<div class="lable">变量引用</div>
<div class="value">变量值</div>
<div class="input"></div>
</div>
<div class="item">
<div class="name">refNum</div>
<div class="lable">ref(num)</div>
<div class="value">{{refNum}}</div>
<Input type="number" class="input" v-model="refNum" controls-outside />
</item>
<item>
<name>reactNum</name>
<lable>reactive(num)</lable>
<value>{{reactNum}}</value>
</div>
<div class="item">
<div class="name">reactNum</div>
<div class="lable">reactive(num)</div>
<div class="value">{{reactNum}}</div>
<Input type="number" class="input" v-model="reactNum" controls-outside />
</item>
</div>
<Divider>对象类型</Divider>
<Affix :offset-top="0">
<div style="background: #ffffff;">
<div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
<pre style="flex: 3">obj: {{obj}}</pre>
<pre style="flex: 4">refObj = ref(obj): {{refObj}}</pre>
<pre style="flex: 4">reactObj = reactive(obj): {{reactObj}}</pre>
</div>
<Divider dashed />
<item class="head mt10px">
<name>变量名</name>
<lable>变量引用</lable>
<value>变量值</value>
</item>
<Divider dashed />
</div>
</Affix>
<item>
<name>refObj.num</name>
<lable></lable>
<value>{{'' + refObj.num}}</value>
<div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
<pre style="flex: 1">obj: {{obj}}</pre>
<pre style="flex: 1">refObj = ref(obj): {{refObj}}</pre>
<pre style="flex: 1">reactObj= reactive(obj): {{reactObj}}</pre>
</div>
<Divider dashed />
<div class="item head mt10px">
<div class="name">变量名</div>
<div class="lable">变量引用</div>
<div class="value">变量值</div>
<div class="input"></div>
</div>
<div class="item">
<div class="name">refObj.num</div>
<div class="lable"></div>
<div class="value">{{'' + refObj.num}}</div>
<Input type="number" class="input" v-model="refObj.num" controls-outside />
</item>
<item>
<name>reactObj.num</name>
<lable></lable>
<value>{{'' + reactObj.num}}</value>
</div>
<div class="item">
<div class="name">reactObj.num</div>
<div class="lable"></div>
<div class="value">{{'' + reactObj.num}}</div>
<Input type="number" class="input" v-model="reactObj.num" controls-outside />
</item>
</div>
<Divider dashed />
<item>
<name>refObjNum</name>
<lable>ref(obj).num</lable>
<value>{{'' + refObjNum}}</value>
<div class="item">
<div class="name">refObjNum</div>
<div class="lable">ref(obj).num</div>
<div class="value">{{'' + refObjNum}}</div>
<Input type="number" class="input" v-model="refObjNum" controls-outside />
</item>
<item>
<name>reactObjNum</name>
<lable>reactObj.num</lable>
<value>{{'' + reactObjNum}}</value>
</div>
<div class="item">
<div class="name">reactObjNum</div>
<div class="lable">reactObj.num</div>
<div class="value">{{'' + reactObjNum}}</div>
<Input type="number" class="input" v-model="reactObjNum" controls-outside />
</item>
<item>
<name>refObjValueNum</name>
<lable>refObj.value.num</lable>
<value>{{'' + refObjValueNum}}</value>
</div>
<div class="item">
<div class="name">refObjValueNum</div>
<div class="lable">refObj.value.num</div>
<div class="value">{{'' + refObjValueNum}}</div>
<Input type="number" class="input" v-model="refObjValueNum" controls-outside />
</item>
<item>
<name>reactObjValueNum</name>
<lable>reactObj.value.num</lable>
<value>代码错误</value>
<Input type="number" disabled="true" class="input" v-model="reactObjValueNum" controls-outside />
</item>
<item>
<name>reactObjChild.a</name>
<lable>reactObj.child.a</lable>
<value>{{'' + reactObjChild.a}}</value>
<Input type="number" class="input" v-model="reactObjChild.a" controls-outside />
</item>
</div>
<div class="item">
<div class="name">reactObjValueNum</div>
<div class="lable">reactObj.value.num</div>
<div class="value">代码错误</div>
<span class="input" />
</div>
<Divider>对象类型</Divider>
<div class="objs flex-row match-width" style="background: #f8f8f8; padding: 10px;">
<pre style="flex: 1">refObj = ref(obj): {{refObj}}</pre>
<pre style="flex: 1">reactObj = reactive(obj): {{reactObj}}</pre>
<pre style="flex: 1">refObjChild = refObj.child: {{refObjChild}}</pre>
<pre style="flex: 1">reactObjChild = reactObj.child: {{reactObjChild}}</pre>
</div>
<Divider dashed />
<item>
<name>refObjNumToRef</name>
<lable>toRef(refObj.num)</lable>
<value>{{'' + refObjNumToRef}}</value>
<div class="item head mt10px">
<div class="name">变量名</div>
<div class="lable">变量引用</div>
<div class="value">变量值</div>
<div class="input"></div>
</div>
<div class="item">
<div class="name">refObjChild.a</div>
<div class="lable">refObj.child.a</div>
<div class="value">{{'' + refObjChild.a}}</div>
<Input type="number" class="input" v-model="refObjChild.a" controls-outside />
</div>
<div class="item">
<div class="name">reactObjChild.a</div>
<div class="lable">reactObj.child.a</div>
<div class="value">{{'' + reactObjChild.a}}</div>
<Input type="number" class="input" v-model="reactObjChild.a" controls-outside />
</div>
<!-- <Divider dashed />
<div class="item">
<div class="name">refObjNumToRef</div>
<div class="lable">toRef(refObj.num)</div>
<div class="value">{{'' + refObjNumToRef}}</div>
<Input type="number" class="input" v-model="refObjNumToRef" controls-outside />
</item>
<item>
<name>reactObjNumToRef</name>
<lable>toRef(reactObj.num)</lable>
<value>{{'' + reactObjNumToRef}}</value>
</div>
<div class="item">
<div class="name">reactObjNumToRef</div>
<div class="lable">toRef(reactObj.num)</div>
<div class="value">{{'' + reactObjNumToRef}}</div>
<Input type="number" class="input" v-model="reactObjNumToRef" controls-outside />
</item>
<item>
<name>refObjValueNumToRef</name>
<lable>toRef(reactObj.value.num)</lable>
<value>{{'' + refObjValueNumToRef}}</value>
</div>
<div class="item">
<div class="name">refObjValueNumToRef</div>
<div class="lable">toRef(reactObj.value.num)</div>
<div class="value">{{'' + refObjValueNumToRef}}</div>
<Input type="number" class="input" v-model="refObjValueNumToRef" controls-outside />
</item>
<item>
<name>reactObjValueNumToRef</name>
<lable>toRef(reactObj.value.num)</lable>
<value>{{'' + reactObjValueNumToRef}}</value>
</div>
<div class="item">
<div class="name">reactObjValueNumToRef</div>
<div class="lable">toRef(reactObj.value.num)</div>
<div class="value">{{'' + reactObjValueNumToRef}}</div>
<Input type="number" class="input" v-model="reactObjValueNumToRef" controls-outside />
</item>
</div> -->
<Divider dashed />
</main>
<fixtop>
<div class="fix-top">
<Button class="float-right" type="error" @click="forceUpdate">强制更新</Button>
</fixtop>
</div>
</template>
<script setup>
import { ref, reactive, toRef, toRefs, watch, onMounted, defineProps, getCurrentInstance } from 'vue'
const inst = getCurrentInstance()
function forceUpdate() {
console.log(obj)
inst.ctx.$forceUpdate()
}
......@@ -152,9 +170,10 @@ const reactObjNum = reactObj.num
const refObjValueNum = refObj.value.num
// const reactObjValueNum = reactObj.value.num // error
const refObjChild = refObj.child
const refObjChild = refObj.value.child
const reactObjChild = reactObj.child
console.log('reactfObjChild', reactObjChild)
console.log('refObjChild', refObjChild)
console.log('reactObjChild', reactObjChild)
console.log('----------------------------------------')
const refObjNumToRef = toRef(refObj, 'num')
......@@ -170,26 +189,32 @@ const reactObjValueNumToRef = toRef(reactObj.value, 'num')
</script>
<style scoped>
main item {
main .item {
display: flex;
align-item: center;
margin: 2px 20px;
}
main item > * {
main .item > * {
display: inline-block;
margin-right: 10px;
}
main item > name {
width: 200px;
main .item > .name {
flex: 1;
min-width: 200px;
}
main item > lable {
width: 200px;
main .item > .lable {
flex: 1;
min-width: 200px;
}
main item > value {
width: 100px;
main .item > .value {
flex: 1;
min-width: 100px;
text-align: center;
}
main item > .input {
main .item > .input {
flex: 1;
margin: 0px 20px;
width: 80px;
min-width: 80px;
text-align: center;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或