mirror of
https://github.com/luzhisheng/js_reverse.git
synced 2025-04-12 11:37:09 +08:00
vue学习
This commit is contained in:
yingfeng.ai
parent
e9308ef169
commit
812e2b55e4
@ -1,63 +1,60 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
<h2>{{ name }}</h2>
|
||||
<h2>{{ age }}</h2>
|
||||
<h2>{{ address }}</h2>
|
||||
<h2>{{ car.price }}-----{{ car.brand }}</h2>
|
||||
<h2>姓名：{{ person.name }}</h2>
|
||||
<h2>年龄：{{ person.age }}</h2>
|
||||
<h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
|
||||
<button @click="changeName">修改名字</button>
|
||||
<button @click="changeAge">修改年龄</button>
|
||||
<button @click="showTel">查看联系方式</button>
|
||||
<button @click="changeCar">修改汽车价格和名字</button>
|
||||
<ul>
|
||||
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
|
||||
</ul>
|
||||
<button @click="changeGame">修改第一个游戏的样式</button>
|
||||
<button @click="changeCar">修改车</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!--语法糖写法-->
|
||||
<script setup>
|
||||
// 响应式--基本数据类型
|
||||
import {ref} from "vue";
|
||||
// 响应式--对象数据类型
|
||||
import {reactive} from "vue";
|
||||
import {reactive, watch} from "vue";
|
||||
|
||||
let name = ref('ayf')
|
||||
let age = ref(19)
|
||||
let tel = '143334132144'
|
||||
let address = '北京昌平区'
|
||||
let car = reactive({brand: 'byd', price: 10000000})
|
||||
|
||||
let games = reactive([
|
||||
{id: 'ayf002', name: '王者荣耀'},
|
||||
{id: 'ayf001', name: '原神'},
|
||||
{id: 'ayf003', name: '三国志'},
|
||||
])
|
||||
|
||||
console.log(name)
|
||||
let person = reactive({
|
||||
name: '张三',
|
||||
age: 18,
|
||||
car: {
|
||||
c1: '奔驰',
|
||||
c2: '宝马',
|
||||
}
|
||||
})
|
||||
|
||||
function changeName() {
|
||||
name.value = 'dddd'
|
||||
person.name += '~~~'
|
||||
}
|
||||
|
||||
function changeAge() {
|
||||
age.value += 1
|
||||
}
|
||||
|
||||
function showTel() {
|
||||
alert(tel)
|
||||
}
|
||||
|
||||
function changeGame() {
|
||||
games[0].name = '王者荣耀国际版'
|
||||
person.age += 1
|
||||
}
|
||||
|
||||
function changeCar() {
|
||||
games[0].name = '王者荣耀国际版'
|
||||
person.car.c1 = "雅迪"
|
||||
}
|
||||
|
||||
|
||||
//监视某个属性
|
||||
watch(() => {
|
||||
return person.name
|
||||
}, (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
//监视某个对象
|
||||
watch(() => person.car, (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
//监视多个数据
|
||||
watch([() => person.car, () => person.name], (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
|
||||
46
学习VUE/hello_vue3/笔记/computed计算属性.vue
Normal file
46
学习VUE/hello_vue3/笔记/computed计算属性.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
姓：<input type="text" v-model="firstName"><br>
|
||||
名：<input type="text" v-model="lastName"><br>
|
||||
全名：<span>{{fullName}}</span>
|
||||
<button @click="changeFullName">修改全名</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
let firstName = ref('涨')
|
||||
let lastName = ref('三')
|
||||
|
||||
// 只读的计算属性
|
||||
// let fullName = computed(()=>{
|
||||
// return firstName.value + lastName.value
|
||||
// })
|
||||
|
||||
// 可读可写计算属性
|
||||
let fullName = computed({
|
||||
get(){
|
||||
return firstName.value + lastName.value
|
||||
},
|
||||
set(val){
|
||||
console.log(val)
|
||||
firstName.value = 'dddddd'
|
||||
}
|
||||
})
|
||||
|
||||
function changeFullName(){
|
||||
fullName.value = 'dddddd'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
67
学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
Normal file
67
学习VUE/hello_vue3/笔记/reactive监视某一个属性某个对象.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
<h2>姓名：{{ person.name }}</h2>
|
||||
<h2>年龄：{{ person.age }}</h2>
|
||||
<h2>汽车：{{ person.car.c1 }}-{{ person.car.c2 }}</h2>
|
||||
<button @click="changeName">修改名字</button>
|
||||
<button @click="changeAge">修改年龄</button>
|
||||
<button @click="changeCar">修改车</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {reactive, watch} from "vue";
|
||||
|
||||
let person = reactive({
|
||||
name: '张三',
|
||||
age: 18,
|
||||
car: {
|
||||
c1: '奔驰',
|
||||
c2: '宝马',
|
||||
}
|
||||
})
|
||||
|
||||
function changeName() {
|
||||
person.name += '~~~'
|
||||
}
|
||||
|
||||
function changeAge() {
|
||||
person.age += 1
|
||||
}
|
||||
|
||||
function changeCar() {
|
||||
person.car.c1 = "雅迪"
|
||||
}
|
||||
|
||||
|
||||
//监视某个属性
|
||||
watch(() => {
|
||||
return person.name
|
||||
}, (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
//监视某个对象
|
||||
watch(() => person.car, (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
//监视多个数据
|
||||
watch([() => person.car, () => person.name], (nValue, oValue) => {
|
||||
console.log(nValue, oValue)
|
||||
}, {deep: true})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
@ -3,12 +3,11 @@
|
||||
<h2>{{ name }}</h2>
|
||||
<h2>{{ age }}</h2>
|
||||
<h2>{{ address }}</h2>
|
||||
<h2>{{ car.price }}</h2>
|
||||
<h2>{{ car.brand }}</h2>
|
||||
<h2>{{ car.price }}-----{{ car.brand }}</h2>
|
||||
<button @click="changeName">修改名字</button>
|
||||
<button @click="changeAge">修改年龄</button>
|
||||
<button @click="showTel">查看联系方式</button>
|
||||
|
||||
<button @click="changeCar">修改汽车价格和名字</button>
|
||||
<ul>
|
||||
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
|
||||
</ul>
|
||||
@ -17,34 +16,6 @@
|
||||
|
||||
</template>
|
||||
|
||||
<!--基本写法-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!-- name: "Person",-->
|
||||
<!-- // setup() {-->
|
||||
<!-- // // 数据-->
|
||||
<!-- // let name = 'ayf'-->
|
||||
<!-- // let age = 19-->
|
||||
<!-- // let tel = '143334132144'-->
|
||||
<!-- // let address = '北京昌平区'-->
|
||||
<!-- //-->
|
||||
<!-- // function changeName() {-->
|
||||
<!-- // name = 'dddd'-->
|
||||
<!-- // }-->
|
||||
<!-- //-->
|
||||
<!-- // function changeAge() {-->
|
||||
<!-- // age += 1-->
|
||||
<!-- // }-->
|
||||
<!-- //-->
|
||||
<!-- // function showTel() {-->
|
||||
<!-- // alert(tel)-->
|
||||
<!-- // }-->
|
||||
<!-- //-->
|
||||
<!-- // return {name: name, age: age, changeName, changeAge, showTel, address}-->
|
||||
<!-- // }-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--语法糖写法-->
|
||||
<script setup>
|
||||
// 响应式--基本数据类型
|
||||
@ -56,7 +27,7 @@ let name = ref('ayf')
|
||||
let age = ref(19)
|
||||
let tel = '143334132144'
|
||||
let address = '北京昌平区'
|
||||
let car = reactive({brand: 'byd', price: 10000000})
|
||||
let car = ref({brand: 'byd', price: 10000000})
|
||||
|
||||
let games = reactive([
|
||||
{id: 'ayf002', name: '王者荣耀'},
|
||||
@ -81,6 +52,19 @@ function showTel() {
|
||||
function changeGame() {
|
||||
games[0].name = '王者荣耀国际版'
|
||||
}
|
||||
|
||||
|
||||
//字典覆盖方式
|
||||
function changeCar() {
|
||||
// reactive 才能用分方式
|
||||
// Object.assign(car, {brand: 'ft', price: 20000000})
|
||||
|
||||
// 不能这样写
|
||||
// car = {brand: 'ft', price: 20000000}
|
||||
|
||||
// 但是ref可以
|
||||
car.value = {brand: 'ft', price: 20000000}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
47
学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
Normal file
47
学习VUE/hello_vue3/笔记/监视reactive定义的对象数据.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
<h2>{{ me.name }}</h2>
|
||||
<h2>{{ me.age }}</h2>
|
||||
<button @click="changeName">修改名字</button>
|
||||
<button @click="changeAge">修改年龄</button>
|
||||
<button @click="changeAll">同时修改名字年龄</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from "vue";
|
||||
let me = reactive({name: '比亚迪', age: 100})
|
||||
|
||||
//方法
|
||||
function changeName(){
|
||||
me.name = "丰田"
|
||||
}
|
||||
|
||||
function changeAge(){
|
||||
me.age = 101
|
||||
}
|
||||
|
||||
function changeAll(){
|
||||
me = Object.assign(me, {name: '特斯拉', age: 200})
|
||||
}
|
||||
|
||||
//监视reactive定义的对象数据
|
||||
const stopWatch = watch(me, (nValue, oValue)=>{
|
||||
console.log(nValue, oValue)
|
||||
if(nValue >= 10){
|
||||
stopWatch()
|
||||
}
|
||||
}, {deep:true})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
47
学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
Normal file
47
学习VUE/hello_vue3/笔记/监视ref定义的对象数据.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
<h2>{{ me.name }}</h2>
|
||||
<h2>{{ me.age }}</h2>
|
||||
<button @click="changeName">修改名字</button>
|
||||
<button @click="changeAge">修改年龄</button>
|
||||
<button @click="changeAll">同时修改名字年龄</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
let me = ref({name: '比亚迪', age: 100})
|
||||
|
||||
//方法
|
||||
function changeName(){
|
||||
me.value.name = "丰田"
|
||||
}
|
||||
|
||||
function changeAge(){
|
||||
me.value.age = 101
|
||||
}
|
||||
|
||||
function changeAll(){
|
||||
me.value = {name: '特斯拉', age: 200}
|
||||
}
|
||||
|
||||
//监视ref定义的对象数据
|
||||
const stopWatch = watch(me, (nValue, oValue)=>{
|
||||
console.log(nValue, oValue)
|
||||
if(nValue >= 10){
|
||||
stopWatch()
|
||||
}
|
||||
}, {deep:true})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
36
学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
Normal file
36
学习VUE/hello_vue3/笔记/监视ref定义的数据.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="person">
|
||||
<h2>当前求和：{{sum}}</h2>
|
||||
<button @click="changeSum">点击我sum+1</button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
let sum = ref(0)
|
||||
|
||||
//方法
|
||||
function changeSum(){
|
||||
sum.value += 1
|
||||
}
|
||||
|
||||
//监视ref定义的数据,当你使用 watch 监听一个响应式的数据或 ref 时，它返回一个函数，这个函数被称为停止函数（stop function）。调用这个函数可以停止对该响应式数据的监听。
|
||||
const stopWatch = watch(sum, (nValue, oValue)=>{
|
||||
console.log(nValue, oValue)
|
||||
if(nValue >= 10){
|
||||
stopWatch()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.person {
|
||||
background-color: antiquewhite;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user