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