「已注销」-优快云博客

<template> <input type="text" v-model="keyword"> <h2>{{ keyword }}</h2></template><script>import {customRef} from "vue";export default { name: 'App', setup() { //自定义ref function myRef(value, delay)

2022-03-13 14:44:48 513

原创 VUE3-toRaw函数与markRaw函数（16）

<template> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>薪资：{{ job.j1.salary }}K</h2> <h2 v-show="person.car">座驾信息：{{ person.car }}</h2> <hr> <button @click="showRawPerson">输

2022-03-13 09:54:01 248

原创 VUE3-readonly函数与shallowReadonly函数（15）

<template> <h4>当前求和为：{{ sum }}</h4> <button @click="sum++">点我++</button> <hr> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>薪资：{{ job.j1.salary }}K</h2> <button @c

2022-03-13 08:51:31 203

原创 VUE3-shallowReactive函数与shallowRef函数（14）

<template> <h2>当前的x.y值是：{{ x.y }}</h2> <button @click="x={y: 888}">点我替换x</button> <button @click="x.y++">点我x.y++</button> <hr> <h2>姓

2022-03-10 20:44:26 244

原创 VUE3-toRef函数与toRefs函数（13）

文章目录toRef函数toRefs函数toRef函数<template> <h3>{{ student }}</h3> <h1>学生姓名：{{ name }}</h1> <h1>学生年龄：{{ age }}</h1> <h1>学生薪资：{{ job.web.salary }}K</h1> <hr> <button type="button" @click

2022-03-10 17:08:40 417

本案例需要关闭语法检查。hook的使用就是模块化的思想，我们可以将一些公共的方法封装为一个js文件，放入hooks文件夹，这样所有组件都可以调用这个js文件，从而使得组件内部简单明了。文章目录目录结构App.vuehooks文件夹下的usePoint.jscomponents文件夹下的Demo.vuecomponents文件夹下的Test.vue目录结构App.vue<template> <button @click="isShowDemo = !isShowDemo".

2022-03-10 15:57:34 672

原创 VUE3-生命周期（11）

记得事先关闭语法检查。App.vue：<template> <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button> <Demo v-if="isShowDemo"/></template><script>import {ref} from 'vue'import Demo from './components/Demo'export defaul.

2022-03-07 23:24:15 135

原创 VUE3-watchEffect函数（10）

<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg+='！'">修改信息</button> <hr> <h2>姓名：{{ person.na

2022-03-07 22:23:24 134

原创 VUE3-watch监视ref数据的说明（9）

<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg+='！'">修改信息</button> <hr> <h2>姓名：{{ person.na

2022-03-07 22:04:39 1779

原创 VUE3-watch函数（8）

<template> <h2>当前求和为：{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为：{{ msg }}</h2> <button @click="msg+='！'">修改信息</button> <hr> <h2>姓名：{{ person.na

2022-03-05 11:43:33 101

原创 VUE3-computed函数（7）

<template> 姓：<input type="text" v-model="person.firstName"> <br> 名：<input type="text" v-model="person.lastName"> <br> 全名：<input type="text" v-model="person.fullName"> <br> 全名：{{ person.fullName }}

2022-03-04 21:07:48 479

原创 VUE3-setup的两个注意点（6）

在VUE3中，此案例的Demo.vue组件命名是不规范的，运行时会报错，此时需要关闭语法检查才能继续运行。组件名必须为多个单词App.vue<template> <Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷"> <template v-slot:qwe> <h3>测试数据1</h3> </template> <template.

2022-03-02 21:26:04 367

原创 VUE3-响应式原理（5）

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>V

2022-03-01 23:57:56 122

原创 VUE3-reactive函数（4）

<template> <h1>一个人的信息</h1> <h2>姓名：{{ person.name }}</h2> <h2>年龄：{{ person.age }}</h2> <h3>工作种类：{{ person.job.type }}</h3> <h3>工作薪水：{{ person.job.salary }}</h3> <h3>爱好：{{ pe

2022-03-01 21:58:10 93

原创 VUE3-ref函数（3）

<template> <h1>一个人的信息</h1> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h3>工作种类：{{ job.type }}</h3> <h3>工作薪水：{{ job.salary }}</h3> <button @click="changeInfo">修改人的信息</b

2022-03-01 21:30:40 148

原创 VUE3-初识setup（2）

<template> <h1>一个人的信息</h1> <h2>姓名：{{ name }}</h2> <h2>年龄：{{ age }}</h2> <h2>性别：{{ sex }}</h2> <button @click="sayHello">说话(Vue3所配置的——sayHello)</button> <br> <br>

2022-02-25 23:42:12 578

原创 VUE3-分析工程结构（1）

main.js文件：// 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数import { createApp } from 'vue'import App from './App.vue'// 创建应用实例对象--app（类似于之前Vue2中的vm，但app比vm更“轻”）const app = createApp(App)// 挂载app.mount('#app')Vue3组件中的模板结构可以没有根标签...

2022-02-25 22:15:33 330

原创 VUE3快速上手笔记汇总

话不多说

2022-02-23 20:30:29 349

[145-148]_美图公司官网导航栏练习.zip

[141-142]_移动端页面练习.zip

[84-86]_京东顶部导航条练习.zip

空空如也