Compare commits
No commits in common. 'main' and 'new_branch1' have entirely different histories.
main
...
new_branch
126 changed files with 65 additions and 22233 deletions
@ -1,23 +0,0 @@ |
|||||||
.DS_Store |
|
||||||
node_modules |
|
||||||
/dist |
|
||||||
|
|
||||||
|
|
||||||
# local env files |
|
||||||
.env.local |
|
||||||
.env.*.local |
|
||||||
|
|
||||||
# Log files |
|
||||||
npm-debug.log* |
|
||||||
yarn-debug.log* |
|
||||||
yarn-error.log* |
|
||||||
pnpm-debug.log* |
|
||||||
|
|
||||||
# Editor directories and files |
|
||||||
.idea |
|
||||||
.vscode |
|
||||||
*.suo |
|
||||||
*.ntvs* |
|
||||||
*.njsproj |
|
||||||
*.sln |
|
||||||
*.sw? |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
<template> |
|
||||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: { |
|
||||||
HelloWorld |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
#app { |
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
text-align: center; |
|
||||||
color: #2c3e50; |
|
||||||
margin-top: 60px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,58 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="hello"> |
|
||||||
<h1>{{ msg }}</h1> |
|
||||||
<p> |
|
||||||
For a guide and recipes on how to configure / customize this project,<br> |
|
||||||
check out the |
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|
||||||
</p> |
|
||||||
<h3>Installed CLI Plugins</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Essential Links</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|
||||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|
||||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|
||||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|
||||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|
||||||
</ul> |
|
||||||
<h3>Ecosystem</h3> |
|
||||||
<ul> |
|
||||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|
||||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|
||||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|
||||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'HelloWorld', |
|
||||||
props: { |
|
||||||
msg: String |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
||||||
<style scoped> |
|
||||||
h3 { |
|
||||||
margin: 40px 0 0; |
|
||||||
} |
|
||||||
ul { |
|
||||||
list-style-type: none; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
li { |
|
||||||
display: inline-block; |
|
||||||
margin: 0 10px; |
|
||||||
} |
|
||||||
a { |
|
||||||
color: #42b983; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
<Demo/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,54 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>当前求和为：{{ sum }}</h2> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<hr> |
|
||||||
<h2>当前信息为：{{ msg }}</h2> |
|
||||||
<button @click="msg+='!'">修改信息</button> |
|
||||||
<hr> |
|
||||||
<h2>姓名：{{ person.name }}</h2> |
|
||||||
<h2>年龄：{{ person.age }}</h2> |
|
||||||
<h2>薪资：{{ person.job.j1.salary }}</h2> |
|
||||||
<button @click="person.name+='~'">修改姓名</button> |
|
||||||
<button @click="person.age++">修改年龄</button> |
|
||||||
<button @click="person.job.j1.salary++">修改薪资</button> |
|
||||||
<h2></h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, watch, watchEffect} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
let msg = ref('你好呀') |
|
||||||
let person = reactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// 方法一： ref的对象监视，通过value实现 |
|
||||||
// watch(person, (newValue, oldValue) => { |
|
||||||
// console.log('person的值变了', newValue, oldValue) |
|
||||||
// }) |
|
||||||
|
|
||||||
watchEffect(() => { |
|
||||||
const x1 = sum.value |
|
||||||
const x2 = person.job.j1.salary |
|
||||||
console.log('watchEffect所指定的回调执行了') |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
msg, |
|
||||||
person |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,76 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>当前求和为：{{ sum }}</h2> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
console.log("___setup___") |
|
||||||
let sum = ref(0) |
|
||||||
|
|
||||||
// 通过组合API的形式的生命周期钩子 |
|
||||||
|
|
||||||
onBeforeMount(()=>{ |
|
||||||
console.log("___onBeforeMount___") |
|
||||||
}) |
|
||||||
onMounted(()=>{ |
|
||||||
console.log("___onMounted___") |
|
||||||
}) |
|
||||||
onBeforeUpdate(()=>{ |
|
||||||
console.log("___onBeforeUpdate___") |
|
||||||
}) |
|
||||||
onUpdated(()=>{ |
|
||||||
console.log("___onUpdated___") |
|
||||||
}) |
|
||||||
onBeforeUnmount(()=>{ |
|
||||||
console.log("___onBeforeUnmount___") |
|
||||||
}) |
|
||||||
onUnmounted(()=>{ |
|
||||||
console.log("___onUnmounted___") |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
sum |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
// // 通过配置项的形式使用生命周期 |
|
||||||
// beforeCreate() { |
|
||||||
// console.log('---beforeCreate---') |
|
||||||
// }, |
|
||||||
// |
|
||||||
// created() { |
|
||||||
// console.log("---created---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// beforeMount() { |
|
||||||
// console.log("---beforeMount---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// mounted() { |
|
||||||
// console.log("---mounted---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// beforeUpdate() { |
|
||||||
// console.log("---beforeUpdate---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// updated() { |
|
||||||
// console.log("---updated---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// beforeUnmount() { |
|
||||||
// console.log("---beforeUnmount---") |
|
||||||
// }, |
|
||||||
// |
|
||||||
// unmounted() { |
|
||||||
// console.log("---unmounted---") |
|
||||||
// } |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,26 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>当前求和为：{{ sum }}</h2> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<hr> |
|
||||||
<h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import usePoint from "@/hooks/usePoint"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
console.log("___setup___") |
|
||||||
let sum = ref(0) |
|
||||||
let point = usePoint() |
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
point |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
import {onBeforeUnmount, onMounted, reactive} from "vue"; |
|
||||||
|
|
||||||
export default function() { |
|
||||||
let point = reactive({ |
|
||||||
x: 0, |
|
||||||
y: 0 |
|
||||||
}) |
|
||||||
|
|
||||||
function savePoint() { |
|
||||||
console.log(event.pageX, event.pageY) |
|
||||||
point.x = event.pageX |
|
||||||
point.y = event.pageY |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
window.addEventListener('click', savePoint) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
window.removeEventListener('click', savePoint) |
|
||||||
}) |
|
||||||
|
|
||||||
return point |
|
||||||
} |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,37 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>{{ person }}</h2> |
|
||||||
<h2>姓名：{{ name }}</h2> |
|
||||||
<h2>年龄：{{ age }}</h2> |
|
||||||
<h2>薪资：{{ job.j1.salary }}</h2> |
|
||||||
<button @click="name+='~'">修改姓名</button> |
|
||||||
<button @click="age++">修改年龄</button> |
|
||||||
<button @click="job.j1.salary++">修改薪资</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive,toRef,toRefs} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
let person = reactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
person, |
|
||||||
// name:toRef(person, 'name'), |
|
||||||
// age: toRef(person, 'age'), |
|
||||||
// salary: toRef(person.job.j1, 'salary') |
|
||||||
...toRefs(person) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,39 +0,0 @@ |
|||||||
<template> |
|
||||||
<h4>当前的x值是： {{ x.y }}</h4> |
|
||||||
<button @click="x++">点击+1</button> |
|
||||||
<h2>{{ person }}</h2> |
|
||||||
<h2>姓名：{{ name }}</h2> |
|
||||||
<h2>年龄：{{ age }}</h2> |
|
||||||
<h2>薪资：{{ job.j1.salary }}</h2> |
|
||||||
<button @click="name+='~'">修改姓名</button> |
|
||||||
<button @click="age++">修改年龄</button> |
|
||||||
<button @click="job.j1.salary++">修改薪资</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
// let person = shallowReactive({ // 只考虑第一层的数据响应式 |
|
||||||
let person = shallowReactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
let x = shallowRef({y:0}) //shallow不处理对象类型的响应式 |
|
||||||
|
|
||||||
return { |
|
||||||
person, |
|
||||||
x, |
|
||||||
...toRefs(person) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,41 +0,0 @@ |
|||||||
<template> |
|
||||||
<h4>当前求和为： {{ sum }}</h4> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<h2>姓名：{{ name }}</h2> |
|
||||||
<h2>年龄：{{ age }}</h2> |
|
||||||
<h2>薪资：{{ job.j1.salary }}</h2> |
|
||||||
<button @click="name+='~'">修改姓名</button> |
|
||||||
<button @click="age++">修改年龄</button> |
|
||||||
<button @click="job.j1.salary++">修改薪资</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
let person = reactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// person = readonly(person) |
|
||||||
// person = shallowReadonly(person) |
|
||||||
// sum = readonly(sum) |
|
||||||
|
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
...toRefs(person) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
|
||||||
<Demo v-if="isShowDemo"/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
setup() { |
|
||||||
let isShowDemo = ref(true) |
|
||||||
|
|
||||||
return { |
|
||||||
isShowDemo, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,62 +0,0 @@ |
|||||||
<template> |
|
||||||
<h4>当前求和为： {{ sum }}</h4> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<h2>姓名：{{ name }}</h2> |
|
||||||
<h2>年龄：{{ age }}</h2> |
|
||||||
<h2>薪资：{{ job.j1.salary }}</h2> |
|
||||||
<h3 v-show="person.car">车辆信息：{{ person.car }}</h3> |
|
||||||
<button @click="name+='~'">修改姓名</button> |
|
||||||
<button @click="age++">修改年龄</button> |
|
||||||
<button @click="job.j1.salary++">修改薪资</button> |
|
||||||
<button @click="showRawPerson">输出最原始的person</button> |
|
||||||
<button @click="addCar">给人添加一台车</button> |
|
||||||
<button v-show="person.car" @click="person.car.name += '!'">修改车名</button> |
|
||||||
<button v-show="person.car" @click="changeCarPrice">修改价格</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, toRefs, toRaw, markRaw} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
|
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
let person = reactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
function showRawPerson() { |
|
||||||
console.log(person) |
|
||||||
const p = toRaw(person) |
|
||||||
console.log(p) |
|
||||||
} |
|
||||||
function addCar() { |
|
||||||
let car = {name:'奔驰', price:40} |
|
||||||
// person.car = car |
|
||||||
person.car = markRaw(car) |
|
||||||
console.log(person) |
|
||||||
} |
|
||||||
|
|
||||||
function changeCarPrice() { |
|
||||||
person.car.price++ |
|
||||||
console.log(person.car.price) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
person, |
|
||||||
...toRefs(person), |
|
||||||
showRawPerson, |
|
||||||
addCar, |
|
||||||
changeCarPrice |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
<template> |
|
||||||
<input type="text" v-model="keyWord"> |
|
||||||
<h3>{{keyWord}}</h3> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref, customRef} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
setup() { |
|
||||||
// 自定义ref |
|
||||||
function myRef(value) { |
|
||||||
let timer |
|
||||||
// console.log('---myRef---', value) |
|
||||||
return customRef((track,trigger)=>{ |
|
||||||
return { |
|
||||||
get() { |
|
||||||
console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`) |
|
||||||
track() // 通知vue追踪数据变化 |
|
||||||
return value |
|
||||||
}, |
|
||||||
set(newValue) { |
|
||||||
console.log(`有人从myRef这个容器中数据改为了：${newValue}`) |
|
||||||
clearTimeout(timer) |
|
||||||
timer = setTimeout(()=>{ |
|
||||||
value = newValue |
|
||||||
trigger() //通知vue去重新解析模板 |
|
||||||
}, 500) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
// let keyWord = ref('hello') // 使用默认的ref |
|
||||||
let keyWord = myRef('hello') |
|
||||||
|
|
||||||
return { |
|
||||||
keyWord, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
<template> |
|
||||||
<div className="app"> |
|
||||||
<h3>我是app组件（祖）{{ name }}-{{ price }}</h3> |
|
||||||
<child/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import child from "@/components/Child.vue"; |
|
||||||
import {reactive, toRefs, provide} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {child}, |
|
||||||
setup() { |
|
||||||
let car = reactive({ |
|
||||||
name: '奔驰', |
|
||||||
price: '40W' |
|
||||||
}) |
|
||||||
provide('car', car) //给自己的后代组件传递数据 |
|
||||||
return {...toRefs(car)} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.app { |
|
||||||
background-color: gray; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,21 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="child"> |
|
||||||
<h3>我是child组件（子）</h3> |
|
||||||
<son/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import son from "@/components/Son.vue"; |
|
||||||
export default { |
|
||||||
name: "Child", |
|
||||||
components:{son} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.child{ |
|
||||||
background-color: skyblue; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="son"> |
|
||||||
<h3>我是son组件（孙）{{car.name}}-{{car.price}}</h3> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {inject} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Son", |
|
||||||
setup() { |
|
||||||
let car = inject('car') |
|
||||||
console.log('---son---', car) |
|
||||||
|
|
||||||
return {car} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
.son{ |
|
||||||
background-color: orange; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app"> |
|
||||||
<h3>我是app组件（祖）</h3> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
setup() { |
|
||||||
let car = reactive({ |
|
||||||
name:'奔驰', |
|
||||||
price: '40W' |
|
||||||
}) |
|
||||||
let car2 = readonly(car) |
|
||||||
let sum = ref(0) |
|
||||||
|
|
||||||
console.log(isRef(sum)) |
|
||||||
console.log(isReactive(car)) |
|
||||||
console.log(isReadonly(car2)) |
|
||||||
console.log(isProxy(car)) |
|
||||||
|
|
||||||
return {...toRefs(car)} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.app{ |
|
||||||
background-color: gray; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,28 +0,0 @@ |
|||||||
<template> |
|
||||||
<h1>个人信息：</h1> |
|
||||||
<h2>姓名：{{name}}</h2> |
|
||||||
<h2>年龄：{{age}}</h2> |
|
||||||
<button @click="sayHello">点击</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
setup() { |
|
||||||
// 数据 |
|
||||||
let name = '张三' |
|
||||||
let age = 19 |
|
||||||
|
|
||||||
// 方法 |
|
||||||
function sayHello() { |
|
||||||
alert(`名字：${name}，年龄：${age}`) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
name, |
|
||||||
age, |
|
||||||
sayHello, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div className="app"> |
|
||||||
<h3>我是app组件</h3> |
|
||||||
<child/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import child from "@/components/Child"; |
|
||||||
import {reactive, toRefs, provide} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {child}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.app { |
|
||||||
background-color: gray; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,21 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="child"> |
|
||||||
<h3>我是child组件</h3> |
|
||||||
<son/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import son from "@/components/Son"; |
|
||||||
export default { |
|
||||||
name: "Child", |
|
||||||
components:{son} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.child{ |
|
||||||
background-color: skyblue; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<button @click="isShow=true">点我弹个窗</button> |
|
||||||
<teleport to="body"> |
|
||||||
<div v-if="isShow" class="mask"> |
|
||||||
<div class="dialog"> |
|
||||||
<h3>这是一个弹窗</h3> |
|
||||||
<h4>内容</h4> |
|
||||||
<h4>内容</h4> |
|
||||||
<h4>内容</h4> |
|
||||||
<button @click="isShow=false">关闭弹窗</button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</teleport> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Dialog", |
|
||||||
setup() { |
|
||||||
let isShow = ref(false) |
|
||||||
return {isShow} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.mask { |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||||
} |
|
||||||
|
|
||||||
.dialog { |
|
||||||
text-align: center; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
width: 300px; |
|
||||||
height: 300px; |
|
||||||
background-color: green; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="son"> |
|
||||||
<h3>我是son组件</h3> |
|
||||||
<Dialog/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Dialog from "@/components/Dialog.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Son", |
|
||||||
components:{Dialog} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.son{ |
|
||||||
background-color: orange; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
<template> |
|
||||||
<div className="app"> |
|
||||||
<h3>我是app组件</h3> |
|
||||||
<Suspense> |
|
||||||
<template v-slot:default> |
|
||||||
<Child/> |
|
||||||
</template> |
|
||||||
<template v-slot:fallback> |
|
||||||
<h3>加载中</h3> |
|
||||||
</template> |
|
||||||
</Suspense> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
// import child from "@/components/Child"; // 静态引入 |
|
||||||
import {defineAsyncComponent} from 'vue'; |
|
||||||
|
|
||||||
const Child = defineAsyncComponent(() => import('./components/Child.vue')) // 动态引用 |
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Child}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.app { |
|
||||||
background-color: gray; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="child"> |
|
||||||
<h3>我是child组件</h3> |
|
||||||
{{sum}} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Child", |
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
return new Promise((resolve,reject)=> { |
|
||||||
setTimeout(()=>{ |
|
||||||
resolve({sum}) |
|
||||||
}, 1000) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.child{ |
|
||||||
background-color: skyblue; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
<template> |
|
||||||
<h1>个人信息：</h1> |
|
||||||
<h2>姓名：{{ name }}</h2> |
|
||||||
<h2>年龄：{{ age }}</h2> |
|
||||||
<h2>工作种类：{{ job.type }}</h2> |
|
||||||
<h2>薪水：{{ job.salary }}</h2> |
|
||||||
<button @click="changeInfo">修改信息</button> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
setup() { |
|
||||||
// 数据 |
|
||||||
let name = ref('张三') |
|
||||||
let age = ref(19) |
|
||||||
let job = ref({ |
|
||||||
type: '前端工程师', |
|
||||||
salary: '30K' |
|
||||||
}) |
|
||||||
|
|
||||||
function changeInfo() { |
|
||||||
name.value = '李四' |
|
||||||
age.value = 88 |
|
||||||
job.value.type = '后端工程师' |
|
||||||
job.value.salary = '31K' |
|
||||||
console.log(name,age) |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
name, |
|
||||||
age, |
|
||||||
job, |
|
||||||
changeInfo, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
<template> |
|
||||||
<h1>个人信息：</h1> |
|
||||||
<h2>姓名：{{ person.name }}</h2> |
|
||||||
<h2>年龄：{{ person.age }}</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> |
|
||||||
</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] = '测试' |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
person, |
|
||||||
changeInfo, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,73 +0,0 @@ |
|||||||
<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> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
<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> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,36 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
<Demo/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,50 +0,0 @@ |
|||||||
<template> |
|
||||||
<h1>个人信息：</h1> |
|
||||||
姓：<input type="text" v-model="person.firstName"> |
|
||||||
<br> |
|
||||||
名：<input type="text" v-model="person.lastName"> |
|
||||||
<br> |
|
||||||
<span>全名： {{person.fullName}}</span> |
|
||||||
<br> |
|
||||||
全名：<input type="text" v-model="person.fullName"> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, computed} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
// computed:{ |
|
||||||
// fullName() { |
|
||||||
// return this.person.firstName+'-'+this.person.lastName |
|
||||||
// } |
|
||||||
// }, |
|
||||||
setup() { |
|
||||||
let person = reactive({ |
|
||||||
firstName: '张', |
|
||||||
lastName: '三' |
|
||||||
}) |
|
||||||
// 计算属性简写-只读 |
|
||||||
person.fullName = computed(()=>{ |
|
||||||
return person.firstName + '-' + person.lastName |
|
||||||
}) |
|
||||||
|
|
||||||
// 计算属性简写-只读 |
|
||||||
person.fullName = computed({ |
|
||||||
get() { |
|
||||||
return person.firstName + '-' + person.lastName |
|
||||||
}, |
|
||||||
set(val) { |
|
||||||
const nameArr = val.split('-') |
|
||||||
person.firstName = nameArr[0] |
|
||||||
person.lastName = nameArr[1] |
|
||||||
|
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
return { |
|
||||||
person, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
<Demo/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,87 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>当前求和为：{{ sum }}</h2> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<hr> |
|
||||||
<h2>当前信息为：{{ msg }}</h2> |
|
||||||
<button @click="msg+='!'">修改信息</button> |
|
||||||
<hr> |
|
||||||
<h2>姓名：{{ person.name }}</h2> |
|
||||||
<h2>年龄：{{ person.age }}</h2> |
|
||||||
<h2>薪资：{{ person.job.j1.salary }}</h2> |
|
||||||
<button @click="person.name+='~'">修改姓名</button> |
|
||||||
<button @click="person.age++">修改年龄</button> |
|
||||||
<button @click="person.job.j1.salary++">修改薪资</button> |
|
||||||
<h2></h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, watch} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
// watch: { |
|
||||||
// // Vue2中的实现 |
|
||||||
// // sum(newValue, oldValue) { |
|
||||||
// // console.log('sum的值变了', newValue, oldValue) |
|
||||||
// // } |
|
||||||
// // Vue2中的实现二 |
|
||||||
// // sum: { |
|
||||||
// // immediate: true, |
|
||||||
// // deep: true, |
|
||||||
// // handler(newValue, oldValue) { |
|
||||||
// // console.log('sum的值变了', newValue, oldValue) |
|
||||||
// // } |
|
||||||
// // } |
|
||||||
// }, |
|
||||||
|
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
let msg = ref('你好呀') |
|
||||||
let person = reactive({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// 情况一：监视ref的所有定义的一个响应式 |
|
||||||
// watch(sum, (newValue, oldValue) => { |
|
||||||
// console.log('sum值变化了', newValue, oldValue) |
|
||||||
// }, {deep: true, immediate: true}) |
|
||||||
|
|
||||||
// 情况二：监视ref的所有定义的多个个响应式 |
|
||||||
watch([sum, msg], (newValue, oldValue) => { |
|
||||||
console.log('sum和msg的值变化了', newValue, oldValue) |
|
||||||
}, {immediate: true}) |
|
||||||
|
|
||||||
// 情况三：监控reactive所定义的一个响应式数据中的全部属性，注意：此处无法正确的获取oldValue，强制开启deep |
|
||||||
// watch(person, (newValue, oldValue) => { |
|
||||||
// console.log('person对象的值变了', newValue, oldValue) |
|
||||||
// }, {deep: false}) |
|
||||||
|
|
||||||
// 情况四：监控reactive所定义的一个响应式数据中的某个属性 |
|
||||||
// watch(()=>person.age, (newValue,oldValue)=>{ |
|
||||||
// console.log('person.age对象的值变了', newValue, oldValue) |
|
||||||
// }) |
|
||||||
|
|
||||||
// 情况五：监控reactive所定义的一个响应式数据中的某些属性 |
|
||||||
watch([() => person.name, () => person.age], (newValue, oldValue) => { |
|
||||||
console.log('person.age和.name对象的值变了', newValue, oldValue) |
|
||||||
}) |
|
||||||
|
|
||||||
// 特殊情况 |
|
||||||
watch(() => person.job, (newValue, oldValue) => { |
|
||||||
console.log('person.job对象的值变了', newValue, oldValue) |
|
||||||
}, {deep: true}) |
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
msg, |
|
||||||
person |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<template> |
|
||||||
<Demo/> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive} from "vue"; |
|
||||||
import Demo from "@/components/demo.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Demo}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,67 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>当前求和为：{{ sum }}</h2> |
|
||||||
<button @click="sum++">点击+1</button> |
|
||||||
<hr> |
|
||||||
<h2>当前信息为：{{ msg }}</h2> |
|
||||||
<button @click="msg+='!'">修改信息</button> |
|
||||||
<hr> |
|
||||||
<h2>姓名：{{ person.name }}</h2> |
|
||||||
<h2>年龄：{{ person.age }}</h2> |
|
||||||
<h2>薪资：{{ person.job.j1.salary }}</h2> |
|
||||||
<button @click="person.name+='~'">修改姓名</button> |
|
||||||
<button @click="person.age++">修改年龄</button> |
|
||||||
<button @click="person.job.j1.salary++">修改薪资</button> |
|
||||||
<h2></h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {reactive, ref, watch} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Demo', |
|
||||||
// watch: { |
|
||||||
// // Vue2中的实现 |
|
||||||
// // sum(newValue, oldValue) { |
|
||||||
// // console.log('sum的值变了', newValue, oldValue) |
|
||||||
// // } |
|
||||||
// // Vue2中的实现二 |
|
||||||
// // sum: { |
|
||||||
// // immediate: true, |
|
||||||
// // deep: true, |
|
||||||
// // handler(newValue, oldValue) { |
|
||||||
// // console.log('sum的值变了', newValue, oldValue) |
|
||||||
// // } |
|
||||||
// // } |
|
||||||
// }, |
|
||||||
|
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
let msg = ref('你好呀') |
|
||||||
let person = ref({ |
|
||||||
name: '张三', |
|
||||||
age: 18, |
|
||||||
job: { |
|
||||||
j1: { |
|
||||||
salary: 20 |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// 方法一： ref的对象监视，通过value实现 |
|
||||||
// watch(person.value, (newValue, oldValue) => { |
|
||||||
// console.log('person的值变了', newValue, oldValue) |
|
||||||
// }) |
|
||||||
|
|
||||||
// 方法二： ref的对象监视，通过deep实现 |
|
||||||
watch(person, (newValue, oldValue) => { |
|
||||||
console.log('person的值变了', newValue, oldValue) |
|
||||||
},{deep: true}) |
|
||||||
|
|
||||||
return { |
|
||||||
sum, |
|
||||||
msg, |
|
||||||
person |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
# vue3_test |
|
||||||
|
|
||||||
## Project setup |
|
||||||
``` |
|
||||||
npm install |
|
||||||
``` |
|
||||||
|
|
||||||
### Compiles and hot-reloads for development |
|
||||||
``` |
|
||||||
npm run serve |
|
||||||
``` |
|
||||||
|
|
||||||
### Compiles and minifies for production |
|
||||||
``` |
|
||||||
npm run build |
|
||||||
``` |
|
||||||
|
|
||||||
### Lints and fixes files |
|
||||||
``` |
|
||||||
npm run lint |
|
||||||
``` |
|
||||||
|
|
||||||
### Customize configuration |
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
module.exports = { |
|
||||||
presets: [ |
|
||||||
'@vue/cli-plugin-babel/preset' |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
{ |
|
||||||
"compilerOptions": { |
|
||||||
"target": "es5", |
|
||||||
"module": "esnext", |
|
||||||
"baseUrl": "./", |
|
||||||
"moduleResolution": "node", |
|
||||||
"paths": { |
|
||||||
"@/*": [ |
|
||||||
"src/*" |
|
||||||
] |
|
||||||
}, |
|
||||||
"lib": [ |
|
||||||
"esnext", |
|
||||||
"dom", |
|
||||||
"dom.iterable", |
|
||||||
"scripthost" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,43 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "vue3_test", |
|
||||||
"version": "0.1.0", |
|
||||||
"private": true, |
|
||||||
"scripts": { |
|
||||||
"serve": "vue-cli-service serve", |
|
||||||
"build": "vue-cli-service build", |
|
||||||
"lint": "vue-cli-service lint" |
|
||||||
}, |
|
||||||
"dependencies": { |
|
||||||
"core-js": "^3.8.3", |
|
||||||
"vue": "^3.2.13" |
|
||||||
}, |
|
||||||
"devDependencies": { |
|
||||||
"@babel/core": "^7.12.16", |
|
||||||
"@babel/eslint-parser": "^7.12.16", |
|
||||||
"@vue/cli-plugin-babel": "~5.0.0", |
|
||||||
"@vue/cli-plugin-eslint": "~5.0.0", |
|
||||||
"@vue/cli-service": "~5.0.0", |
|
||||||
"eslint": "^7.32.0", |
|
||||||
"eslint-plugin-vue": "^8.0.3" |
|
||||||
}, |
|
||||||
"eslintConfig": { |
|
||||||
"root": true, |
|
||||||
"env": { |
|
||||||
"node": true |
|
||||||
}, |
|
||||||
"extends": [ |
|
||||||
"plugin:vue/vue3-essential", |
|
||||||
"eslint:recommended" |
|
||||||
], |
|
||||||
"parserOptions": { |
|
||||||
"parser": "@babel/eslint-parser" |
|
||||||
}, |
|
||||||
"rules": {} |
|
||||||
}, |
|
||||||
"browserslist": [ |
|
||||||
"> 1%", |
|
||||||
"last 2 versions", |
|
||||||
"not dead", |
|
||||||
"not ie 11" |
|
||||||
] |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,17 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang=""> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<noscript> |
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|
||||||
</noscript> |
|
||||||
<div id="app"></div> |
|
||||||
<!-- built files will be auto injected --> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,31 +0,0 @@ |
|||||||
<template> |
|
||||||
<div className="app"> |
|
||||||
<h3>我是app组件</h3> |
|
||||||
<Suspense> |
|
||||||
<template v-slot:default> |
|
||||||
<Child/> |
|
||||||
</template> |
|
||||||
<template v-slot:fallback> |
|
||||||
<h3>加载中</h3> |
|
||||||
</template> |
|
||||||
</Suspense> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
// import child from "@/components/Child"; // 静态引入 |
|
||||||
import {defineAsyncComponent} from 'vue'; |
|
||||||
|
|
||||||
const Child = defineAsyncComponent(() => import('./components/Child.vue')) // 动态引用 |
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
components: {Child}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.app { |
|
||||||
background-color: gray; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="child"> |
|
||||||
<h3>我是child组件</h3> |
|
||||||
{{sum}} |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {ref} from "vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "Child", |
|
||||||
setup() { |
|
||||||
let sum = ref(0) |
|
||||||
return new Promise((resolve,reject)=> { |
|
||||||
setTimeout(()=>{ |
|
||||||
resolve({sum}) |
|
||||||
}, 1000) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
.child{ |
|
||||||
background-color: skyblue; |
|
||||||
padding: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
// 引入的不再是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') |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
const { defineConfig } = require('@vue/cli-service') |
|
||||||
module.exports = defineConfig({ |
|
||||||
transpileDependencies: true, |
|
||||||
lintOnSave: false, // 关闭语法检查
|
|
||||||
}) |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="row"> |
|
||||||
<Banner/> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-2 col-xs-offset-2"> |
|
||||||
<div class="list-group"> |
|
||||||
<!-- router-link 的 replace 和 push模式 设置为replace后无法后退，默认为push模式--> |
|
||||||
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> |
|
||||||
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
|
||||||
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
|
||||||
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="col-xs-6"> |
|
||||||
<div class="panel"> |
|
||||||
<div class="panel-body"> |
|
||||||
<router-view></router-view> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Banner from "@/components/Banner.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "App", |
|
||||||
components: {Banner} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,23 +0,0 @@ |
|||||||
// 引入Vue
|
|
||||||
import Vue from "vue"; |
|
||||||
// 引入App
|
|
||||||
import App from "./App"; |
|
||||||
// 引入VueRouter
|
|
||||||
import VueRouter from "vue-router"; |
|
||||||
// 引入router
|
|
||||||
import router from "@/router"; |
|
||||||
|
|
||||||
// 设置Vue
|
|
||||||
Vue.config.productionTip = false |
|
||||||
|
|
||||||
// 使用插件
|
|
||||||
Vue.use(VueRouter) |
|
||||||
|
|
||||||
// 实例化Vue
|
|
||||||
new Vue({ |
|
||||||
components: { |
|
||||||
App |
|
||||||
}, |
|
||||||
render: h => h(App), |
|
||||||
router: router, |
|
||||||
}).$mount('#app') |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
<template> |
|
||||||
<h2>我是About的内容</h2> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: "About", |
|
||||||
mounted() { |
|
||||||
console.log('About组件挂着完成', this) |
|
||||||
window.aboutRoute = this.$route |
|
||||||
window.aboutRouter = this.$router |
|
||||||
}, |
|
||||||
beforeDestroy() { |
|
||||||
console.log('About组件即将销毁') |
|
||||||
}, |
|
||||||
// 通过路由规则进入该组件时被调用 |
|
||||||
beforeRouteEnter(to, from, next) { |
|
||||||
console.log('APP---beforeRouteEnter') |
|
||||||
if (to.meta.isAuth){ |
|
||||||
if (localStorage.getItem('school') === 'atguigu') { |
|
||||||
next() |
|
||||||
}else{ |
|
||||||
alert('学校名称错误，无权查看！') |
|
||||||
} |
|
||||||
}else{ |
|
||||||
next() |
|
||||||
} |
|
||||||
}, |
|
||||||
// 通过路由规则离开该组件时被调用 |
|
||||||
// beforeRouteLeave(to, from, next) { |
|
||||||
// |
|
||||||
// } |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,34 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class="row"> |
|
||||||
<Banner/> |
|
||||||
</div> |
|
||||||
<div class="row"> |
|
||||||
<div class="col-xs-2 col-xs-offset-2"> |
|
||||||
<div class="list-group"> |
|
||||||
<!-- router-link 的 replace 和 push模式 设置为replace后无法后退，默认为push模式--> |
|
||||||
<router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> |
|
||||||
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link> |
|
||||||
<!-- <a class="list-group-item active" href="./about.html">About</a>--> |
|
||||||
<!-- <a class="list-group-item" href="./home.html">Home</a>--> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="col-xs-6"> |
|
||||||
<div class="panel"> |
|
||||||
<div class="panel-body"> |
|
||||||
<router-view></router-view> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Banner from "@/components/Banner.vue"; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: "App", |
|
||||||
components: {Banner} |
|
||||||
} |
|
||||||
</script> |
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue