418 changed files with 1 additions and 78238 deletions
--- a/01_初识Vue/基础模板.html
+++ b/01_初识Vue/基础模板.html
@ -13,7 +13,7 @@
  Vue.config.productionTip = false  // 组织开发环境提示
  // 创建Vue实例
-  const vm = new Vue({
+  const x = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
--- a/16_自定义指令/1.自定义指令.html
+++ b/16_自定义指令/1.自定义指令.html
@ -1,50 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍的n值是：<span v-big="n"></span></h2>
    <button @click="n++">n+1</button>
    <hr/>
    <input type="text" v-fbind:value="n" >
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const x = new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            // big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在模板被重新解析时
            big(element, binding) {
                element.innerText = binding.value * 10
            },
            fbind: {
                // 绑定时调用
                bind(element, binding){
                    element.value = binding.value
                },
                // 渲染时调用
                inserted(element, binding){
                    element.focus()
                },
                // 重新渲染时调用
                update(element, binding){
                    element.value = binding.value
                    element.focus()
                }
            }
        }
    })
 </script>
 </body>
 </html>
--- a/16_自定义指令/demo.html
+++ b/16_自定义指令/demo.html
@ -1,30 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>focus</title>
    <style>
        .demo {
            background-color: orange;
        }
    </style>
 </head>
 <body>
 <button id="btn">显示输入框</button>
 <script type="text/javascript">
    const btn = document.getElementById("btn")
    btn.onclick = () => {
        const input = document.createElement('input')
        input.className = 'demo'
        input.value = 99
        input.onclick = ()=>alert(1)
        document.body.appendChild(input)
        input.parentElement.style.backgroundColor = "skyblue"
        input.focus()
    }
 </script>
 </body>
 </html>
--- a/17_生命周期/1.引出生命周期.html
+++ b/17_生命周期/1.引出生命周期.html
@ -1,39 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>引出生命周期</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h2 v-if="isShowHello">你好</h2>
    <h2 :style="{opacity}">欢迎学习Vue</h2>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            isShowHello: true,
            opacity: 1
        },
        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
        mounted() {
            console.log('mounted')
            setInterval(() => {
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        }
    })
    // setInterval(()=>{
    //   vm.opacity -= 0.01
    //   if (vm.opacity <= 0) vm.opacity = 1
    // },16)
 </script>
 </body>
 </html>
--- a/17_生命周期/2.分析生命周期.html
+++ b/17_生命周期/2.分析生命周期.html
@ -1,101 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root" x="1">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">n+1</button>
    <button @click="bye">销毁vm</button>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        // template: `
        //     <div>
        //         <h2>当前的n值是：{{n}}</h2>
        //         <button @click="add">n+1</button>
        //     </div>
        // `,
        data: {
          n: 1,
        },
        methods: {
            add() {
                console.log("add")
                this.n++
            },
            bye() {
                console.log("bye")
                this.$destroy()
            }
        },
        watch: {
            n() {
                console.log("n变了")
            }
        },
        // 常用的生命周期包含 mounted和beforeDestroy
        // mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作）
        // beforeDestroy： 清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）
        // 初始化步骤1， 初始化了生命周期和事件，但是没有开始数据代理
        beforeCreate(){
            console.log("beforeCreate")
            console.log(this)
            // debugger
        },
        // 初始化步骤2，完成数据监测，数据代理
        created() {
            console.log("created")
            console.log(this)
            // debugger
        },
        // Vue开始解析模板，在内存中生成虚拟DOM，但未渲染页面，此时对DOM的操作都会在渲染真实DOM时失效
        beforeMount() {
            console.log("beforeMount")
            console.log(this)
            document.querySelector('h2').innerText = "Test"
            // debugger
        },
        // 将虚拟DOM渲染成真实DOM, 完成渲染后所有DOM操作都会生效，此时完成初始化操作
        mounted() {
            console.log("mounted")
            console.log(this)
            // debugger
        },
        // 当数据更新后触发更新流程，此时data数据已更新，并步骤之后会生成新的虚拟DOM并与老的虚拟DOM做对比，执行updated来将差异重新渲染
        beforeUpdate() {
            console.log("beforeUpdate")
            console.log(this.n)
            console.log(this.$el)
            // debugger
        },
        // 完成重新渲染
        updated() {
            console.log("updated")
            console.log(this.n)
            // debugger
        },
        // 完全销毁一个vm实例，清理它与实例的连接，解绑全部指令和自定义监听事件
        beforeDestroy() {
            console.log("beforeDestroy")
            this.add()
            debugger
        },
        // 完成销毁
        destroyed() {
            console.log("destroyed")
        }
    })
 </script>
 </body>
 </html>
--- a/17_生命周期/3.总结生命周期.html
+++ b/17_生命周期/3.总结生命周期.html
@ -1,52 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>总结生命周期</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h2 v-if="isShowHello">你好</h2>
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="opacity = 1">透明度设置为1</button>
    <button @click="stop">停止变换</button>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            isShowHello: true,
            opacity: 1
        },
        methods: {
            stop() {
                this.$destroy()
            }
        },
        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
        mounted() {
            console.log('mounted')
            this.timer = setInterval(() => {
                console.log("setInterval")
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        beforeDestroy() {
            console.log("beforeDestroy-清除定时器")
            clearInterval(this.timer)
        }
    })
    // setInterval(()=>{
    //   vm.opacity -= 0.01
    //   if (vm.opacity <= 0) vm.opacity = 1
    // },16)
 </script>
 </body>
 </html>
--- a/18_非单文件组件/1.基本使用.html
+++ b/18_非单文件组件/1.基本使用.html
@ -1,79 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h1>{{msg}}</h1>
    <!--  第三步：编写组件标签  -->
    <xuexiao></xuexiao>
    <hr/>
    <!--  第三步：编写组件标签  -->
    <xuesheng></xuesheng>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 步骤一： 创建school组件
    const school = Vue.extend({
        // 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置
        //   el: '#root',
        template: `
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
          </div>
        `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    })
    // 步骤一： 创建student组件
    const student = Vue.extend({
        template: `
        <div>
          <h2>学生姓名：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: '小强',
                age: 18,
            }
        }
    })
    // 步骤二：注册组件（全局）
    // Vue.component('xuexiao', school)
    // Vue.component('xuesheng', student)
    // 创建Vue实例
    const vmx = new Vue({
        el: '#root',
        // 步骤二： 注册组件(局部注册)
        components: {
            xuexiao: school,
            xuesheng: student
        },
        data: {
            'msg': 'Hello Every One!'
        }
    })
 </script>
 </body>
 </html>
--- a/18_非单文件组件/2.几个注意点.html
+++ b/18_非单文件组件/2.几个注意点.html
@ -1,67 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>几个注意点</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h1>{{msg}}</h1>
    <xin-school></xin-school>
    <simple></simple>
 <!--    <xin-school/> 脚手架环境下可用此格式-->
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建school组件
    const school = Vue.extend({
        name: 'myschool',
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ address }}</h2>
          </div>
        `,
        data() {
            return {
                schoolName: '修仙学院',
                address: '长白山'
            }
        }
    })
    // 组件创建简写模式(常用方式，Vue通过组件绑定来识别下面代码未组件)
    const simple = {
        name: 'simple',
        template: `
            <div>
                <h2>{{ msg }}</h2>
            </div>`,
        data() {
            return {
                msg: "简写格式代码"
            }
        }
    }
    // 创建Vue实例
    // 组件命令规则
    // school
    // School
    // my-school
    // MySchool (脚手架使用)
    const vm = new Vue({
        el: '#root',
        data: {
            msg: '欢迎来到修仙世界！'
        },
        components: {
            XinSchool: school,
            Simple: simple
        }
    })
 </script>
 </body>
 </html>
--- a/18_非单文件组件/3.组件的嵌套.html
+++ b/18_非单文件组件/3.组件的嵌套.html
@ -1,94 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建student组件
    const student = Vue.extend({
        template: `
          <div>
          <h2>学生姓名：{{ studentName }}</h2>
          <h2>学生年龄：{{ age }}</h2>
          </div>
        `,
        data() {
            return {
                studentName: '小强',
                age: 18,
            }
        }
    })
    // 创建school组件
    const school = Vue.extend({
        name: 'myschool',
        template: `
          <div>
          <h2>学校名称：{{ schoolName }}</h2>
          <h2>学校地址：{{ address }}</h2>
          <student></student>
          </div>
        `,
        data() {
            return {
                schoolName: '修仙学院',
                address: '长白山'
            }
        },
        components: {
            student,
        }
    })
    // 创建Hello组件
    const hello = Vue.extend({
        template: `
          <div>
          <h1> {{ hellomsg }} </h1>
          </div>`,
        data() {
            return {
                hellomsg: "Hello, 您好"
            }
        }
    })
    // app组件
    const app = Vue.extend({
        template: `
          <div>
          <hello></hello>
          <school></school>
          </div>
        `,
        components: {
            school,
            hello
        }
    })
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        template: `<app></app>`,
        data: {
            msg: '欢迎来到修仙世界！'
        },
        components: {
            app
        }
    })
 </script>
 </body>
 </html>
--- a/18_非单文件组件/4.VueComponent.html
+++ b/18_非单文件组件/4.VueComponent.html
@ -1,79 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>VueComponent</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h1>{{msg}}</h1>
    <!--  第三步：编写组件标签  -->
    <xuexiao></xuexiao>
    <hr/>
    <!--  第三步：编写组件标签  -->
    <xuesheng></xuesheng>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 步骤一： 创建school组件
    const school = Vue.extend({
        // 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置
        //   el: '#root',
        template: `
          <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showName">点我提示学校名</button>
          </div>
        `,
        data() {
            return {
                schoolName: '尚硅谷',
                address: '北京'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    })
    // 步骤一： 创建student组件
    const student = Vue.extend({
        template: `
        <div>
          <h2>学生姓名：{{studentName}}</h2>
          <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: '小强',
                age: 18,
            }
        }
    })
    // 步骤二：注册组件（全局）
    // Vue.component('xuexiao', school)
    // Vue.component('xuesheng', student)
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        // 步骤二： 注册组件(局部注册)
        components: {
            xuexiao: school,
            xuesheng: student
        },
        data: {
            'msg': 'Hello Every One!'
        }
    })
 </script>
 </body>
 </html>
--- a/18_非单文件组件/5.一个重要的内置关系.html
+++ b/18_非单文件组件/5.一个重要的内置关系.html
@ -1,73 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>一个重要的内置关系</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <!--
    1、 VueComponent.prototype.__proto__ === Vue.prototype
    -->
    <school></school>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 为Vue的原型添加属性x
    Vue.prototype.x = 100
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h2>学校名称： {{ name }}</h2>
          <h2>学校地址： {{ address }}</h2>
          <button @click="showX">点击触发showX</button>
          </div>`,
        data() {
            return {
                name: "修仙学院",
                address: "天山"
            }
        },
        methods: {
            showX() {
                console.log(this)
                console.log(this.x)
            }
        }
    })
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            msg: 'Hello',
        },
        components: {
            school:school
        }
    })
    // 创建一个Demo构造方法
    function Demo() {
        this.a = 1
        this.b = 2
    }
    // 创建一个Demo实例
    const d = new Demo()
    console.log(Demo.prototype)  // 显示原型属性
    console.log(d.__proto__)  // 隐式原型属性
    console.log(Demo.prototype === d.__proto__)
    Demo.prototype.x = 99
    console.log(d.__proto__.x)
    console.log(d.x)
 </script>
 </body>
 </html>
--- a/19_单文件组件/App.vue
+++ b/19_单文件组件/App.vue
@ -1,19 +0,0 @@
 <template>
  <div>
    <School/>
    <Student/>
  </div>
 </template>
 <script>
  // 引入模块
  import School from './School'
  import Student from './Student'
  export default {
    name: "App",
    components: {
      School,
      Student
    }
  }
 </script>
--- a/19_单文件组件/School.vue
+++ b/19_单文件组件/School.vue
@ -1,49 +0,0 @@
 <template>
  <!--  组件的模板标签  -->
  <div class="demo">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
 </template>
 <!--  组件的交互标签  -->
 <script>
  export default {
    name: 'School',
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京'
      }
    },
    methods: {
      showName() {
        alert(this.schoolName)
      }
    }
  }
 // const school = Vue.extend({
 //   data() {
 //     return {
 //       schoolName: '尚硅谷',
 //       address: '北京'
 //     }
 //   },
 //   methods: {
 //     showName(){
 //       alert(this.schoolName)
 //     }
 //   }
 // })
 // 默认暴露
 // export default school
 </script>
 <!--  组件的样式标签  -->
 <style>
 .demo {
  background-color: orange;
 }
 </style>
--- a/19_单文件组件/Student.vue
+++ b/19_单文件组件/Student.vue
@ -1,36 +0,0 @@
 <template>
  <!--  组件的模板标签  -->
  <div>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
 </template>
 <!--  组件的交互标签  -->
 <script>
  export default {
    name: 'Student',
    data() {
      return {
        name: '小强',
        age: '18'
      }
    },
  }
 // const school = Vue.extend({
 //   data() {
 //     return {
 //       schoolName: '尚硅谷',
 //       address: '北京'
 //     }
 //   },
 //   methods: {
 //     showName(){
 //       alert(this.schoolName)
 //     }
 //   }
 // })
 // 默认暴露
 // export default school
 </script>
--- a/19_单文件组件/index.html
+++ b/19_单文件组件/index.html
@ -1,12 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>单文件组件</title>
 </head>
 <body>
 <div id="root"></div>
 <script type="text/javascript" src="../vue.js"></script>
 <script type="text/javascript" src="./main.js"></script>
 </body>
 </html>
--- a/19_单文件组件/main.js
+++ b/19_单文件组件/main.js
@ -1,9 +0,0 @@
 import App from './App.vue'
 new Vue({
    el: "#root",
    template: `<App/>`,
    components: {
        App
    }
 })
--- a/19_单文件组件/vue_demo/.gitignore
+++ b/19_单文件组件/vue_demo/.gitignore
@ -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?
--- a/19_单文件组件/vue_demo/README.md
+++ b/19_单文件组件/vue_demo/README.md
@ -1,24 +0,0 @@
 # vue_demo
 ## 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/).
--- a/19_单文件组件/vue_demo/babel.config.js
+++ b/19_单文件组件/vue_demo/babel.config.js
@ -1,5 +0,0 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/19_单文件组件/vue_demo/jsconfig.json
+++ b/19_单文件组件/vue_demo/jsconfig.json
@ -1,19 +0,0 @@
 {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
 }
--- a/19_单文件组件/vue_demo/package-lock.json
+++ b/19_单文件组件/vue_demo/package-lock.json
--- a/19_单文件组件/vue_demo/package.json
+++ b/19_单文件组件/vue_demo/package.json
@ -1,43 +0,0 @@
 {
  "name": "vue_demo",
  "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": "^2.6.14"
  },
  "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",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
 }
--- a/19_单文件组件/vue_demo/public/favicon.ico
+++ b/19_单文件组件/vue_demo/public/favicon.ico
--- a/19_单文件组件/vue_demo/public/index.html
+++ b/19_单文件组件/vue_demo/public/index.html
@ -1,21 +0,0 @@
 <!DOCTYPE html>
 <html lang="">
 <head>
    <meta charset="utf-8">
    <!--  针对IE浏览器的特殊设置  -->
    <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>
--- a/19_单文件组件/vue_demo/src/App.vue
+++ b/19_单文件组件/vue_demo/src/App.vue
@ -1,20 +0,0 @@
 <template>
  <div>
    <img src="./assets/logo.png" alt="logo">
    <School/>
    <Student/>
  </div>
 </template>
 <script>
 // 引入模块
 import School from './components/School'
 import Student from './components/Student'
 export default {
  name: "App",
  components: {
    School,
    Student
  }
 }
 </script>
--- a/19_单文件组件/vue_demo/src/assets/logo.png
+++ b/19_单文件组件/vue_demo/src/assets/logo.png
--- a/19_单文件组件/vue_demo/src/components/School.vue
+++ b/19_单文件组件/vue_demo/src/components/School.vue
@ -1,49 +0,0 @@
 <template>
  <!--  组件的模板标签  -->
  <div class="demo">
    <h2>学校名称：{{ schoolName }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
 </template>
 <!--  组件的交互标签  -->
 <script>
  export default {
    name: 'School',
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京'
      }
    },
    methods: {
      showName() {
        alert(this.schoolName)
      }
    }
  }
 // const school = Vue.extend({
 //   data() {
 //     return {
 //       schoolName: '尚硅谷',
 //       address: '北京'
 //     }
 //   },
 //   methods: {
 //     showName(){
 //       alert(this.schoolName)
 //     }
 //   }
 // })
 // 默认暴露
 // export default school
 </script>
 <!--  组件的样式标签  -->
 <style>
 .demo {
  background-color: orange;
 }
 </style>
--- a/19_单文件组件/vue_demo/src/components/Student.vue
+++ b/19_单文件组件/vue_demo/src/components/Student.vue
@ -1,36 +0,0 @@
 <template>
  <!--  组件的模板标签  -->
  <div>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
 </template>
 <!--  组件的交互标签  -->
 <script>
  export default {
    name: 'Student',
    data() {
      return {
        name: '小强',
        age: '18'
      }
    },
  }
 // const school = Vue.extend({
 //   data() {
 //     return {
 //       schoolName: '尚硅谷',
 //       address: '北京'
 //     }
 //   },
 //   methods: {
 //     showName(){
 //       alert(this.schoolName)
 //     }
 //   }
 // })
 // 默认暴露
 // export default school
 </script>
--- a/19_单文件组件/vue_demo/src/main.js
+++ b/19_单文件组件/vue_demo/src/main.js
@ -1,26 +0,0 @@
 // 引入Vue
 import Vue from 'vue'
 // 引入App
 import App from './App.vue'
 Vue.config.productionTip = false
 // 创建Vue实例
 new Vue({
  render: h => h(App),
 }).$mount('#app')
 // el的写法
 // new Vue({
 //   el: '#app',
 //   render: h => h(App),
 // })
 // rander的完整写法
 // new Vue({
 //   el: '#app',
 //   render(createElement) {
 //     console.log("rander", typeof createElement)
 //     return createElement('h1', 'Hello')
 //   }
 // })
--- a/19_单文件组件/vue_demo/vue.config.js
+++ b/19_单文件组件/vue_demo/vue.config.js
@ -1,5 +0,0 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
 })
--- a/20_脚手架/vue3_test/.gitignore
+++ b/20_脚手架/vue3_test/.gitignore
@ -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?
--- a/20_脚手架/vue3_test/1.src_分析Vue3结构/App.vue
+++ b/20_脚手架/vue3_test/1.src_分析Vue3结构/App.vue
@ -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>
--- a/20_脚手架/vue3_test/1.src_分析Vue3结构/assets/logo.png
+++ b/20_脚手架/vue3_test/1.src_分析Vue3结构/assets/logo.png
--- a/20_脚手架/vue3_test/1.src_分析Vue3结构/components/HelloWorld.vue
+++ b/20_脚手架/vue3_test/1.src_分析Vue3结构/components/HelloWorld.vue
@ -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>
--- a/20_脚手架/vue3_test/1.src_分析Vue3结构/main.js
+++ b/20_脚手架/vue3_test/1.src_分析Vue3结构/main.js
@ -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')
--- a/20_脚手架/vue3_test/10.src_watchEffect函数/App.vue
+++ b/20_脚手架/vue3_test/10.src_watchEffect函数/App.vue
@ -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>
--- a/20_脚手架/vue3_test/10.src_watchEffect函数/assets/logo.png
+++ b/20_脚手架/vue3_test/10.src_watchEffect函数/assets/logo.png
--- a/20_脚手架/vue3_test/10.src_watchEffect函数/components/demo.vue
+++ b/20_脚手架/vue3_test/10.src_watchEffect函数/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/10.src_watchEffect函数/main.js
+++ b/20_脚手架/vue3_test/10.src_watchEffect函数/main.js
@ -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')
--- a/20_脚手架/vue3_test/11.src_vue3的生命周期/App.vue
+++ b/20_脚手架/vue3_test/11.src_vue3的生命周期/App.vue
@ -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>
--- a/20_脚手架/vue3_test/11.src_vue3的生命周期/assets/logo.png
+++ b/20_脚手架/vue3_test/11.src_vue3的生命周期/assets/logo.png
--- a/20_脚手架/vue3_test/11.src_vue3的生命周期/components/demo.vue
+++ b/20_脚手架/vue3_test/11.src_vue3的生命周期/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/11.src_vue3的生命周期/main.js
+++ b/20_脚手架/vue3_test/11.src_vue3的生命周期/main.js
@ -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')
--- a/20_脚手架/vue3_test/12.src_自定义hook/App.vue
+++ b/20_脚手架/vue3_test/12.src_自定义hook/App.vue
@ -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>
--- a/20_脚手架/vue3_test/12.src_自定义hook/assets/logo.png
+++ b/20_脚手架/vue3_test/12.src_自定义hook/assets/logo.png
--- a/20_脚手架/vue3_test/12.src_自定义hook/components/demo.vue
+++ b/20_脚手架/vue3_test/12.src_自定义hook/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/12.src_自定义hook/hooks/usePoint.js
+++ b/20_脚手架/vue3_test/12.src_自定义hook/hooks/usePoint.js
@ -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
 }
--- a/20_脚手架/vue3_test/12.src_自定义hook/main.js
+++ b/20_脚手架/vue3_test/12.src_自定义hook/main.js
@ -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')
--- a/20_脚手架/vue3_test/13.src_toRef和toRefs/App.vue
+++ b/20_脚手架/vue3_test/13.src_toRef和toRefs/App.vue
@ -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>
--- a/20_脚手架/vue3_test/13.src_toRef和toRefs/assets/logo.png
+++ b/20_脚手架/vue3_test/13.src_toRef和toRefs/assets/logo.png
--- a/20_脚手架/vue3_test/13.src_toRef和toRefs/components/demo.vue
+++ b/20_脚手架/vue3_test/13.src_toRef和toRefs/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/13.src_toRef和toRefs/main.js
+++ b/20_脚手架/vue3_test/13.src_toRef和toRefs/main.js
@ -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')
--- a/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/App.vue
+++ b/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/App.vue
@ -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>
--- a/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/assets/logo.png
+++ b/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/assets/logo.png
--- a/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/components/demo.vue
+++ b/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/main.js
+++ b/20_脚手架/vue3_test/14.src_shallowReactive和shallowRef/main.js
@ -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')
--- a/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/App.vue
+++ b/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/App.vue
@ -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>
--- a/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/assets/logo.png
+++ b/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/assets/logo.png
--- a/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/components/demo.vue
+++ b/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/main.js
+++ b/20_脚手架/vue3_test/15.src_readonly与shallowReadonly/main.js
@ -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')
--- a/20_脚手架/vue3_test/16.src_toRaw与markRaw/App.vue
+++ b/20_脚手架/vue3_test/16.src_toRaw与markRaw/App.vue
@ -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>
--- a/20_脚手架/vue3_test/16.src_toRaw与markRaw/assets/logo.png
+++ b/20_脚手架/vue3_test/16.src_toRaw与markRaw/assets/logo.png
--- a/20_脚手架/vue3_test/16.src_toRaw与markRaw/components/demo.vue
+++ b/20_脚手架/vue3_test/16.src_toRaw与markRaw/components/demo.vue
@ -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>
--- a/20_脚手架/vue3_test/16.src_toRaw与markRaw/main.js
+++ b/20_脚手架/vue3_test/16.src_toRaw与markRaw/main.js
@ -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')
--- a/20_脚手架/vue3_test/17.src_customRef/App.vue
+++ b/20_脚手架/vue3_test/17.src_customRef/App.vue
@ -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>
--- a/20_脚手架/vue3_test/17.src_customRef/assets/logo.png
+++ b/20_脚手架/vue3_test/17.src_customRef/assets/logo.png
--- a/20_脚手架/vue3_test/17.src_customRef/main.js
+++ b/20_脚手架/vue3_test/17.src_customRef/main.js
@ -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')
--- a/20_脚手架/vue3_test/18.src_provide与inject/App.vue
+++ b/20_脚手架/vue3_test/18.src_provide与inject/App.vue
@ -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>
--- a/20_脚手架/vue3_test/18.src_provide与inject/assets/logo.png
+++ b/20_脚手架/vue3_test/18.src_provide与inject/assets/logo.png
--- a/20_脚手架/vue3_test/18.src_provide与inject/components/Child.vue
+++ b/20_脚手架/vue3_test/18.src_provide与inject/components/Child.vue
@ -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>
--- a/20_脚手架/vue3_test/18.src_provide与inject/components/Son.vue
+++ b/20_脚手架/vue3_test/18.src_provide与inject/components/Son.vue
@ -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>
--- a/20_脚手架/vue3_test/18.src_provide与inject/main.js
+++ b/20_脚手架/vue3_test/18.src_provide与inject/main.js
@ -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')
--- a/20_脚手架/vue3_test/19.src_响应式的判断/App.vue
+++ b/20_脚手架/vue3_test/19.src_响应式的判断/App.vue
@ -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>
--- a/20_脚手架/vue3_test/19.src_响应式的判断/assets/logo.png
+++ b/20_脚手架/vue3_test/19.src_响应式的判断/assets/logo.png
--- a/20_脚手架/vue3_test/19.src_响应式的判断/main.js
+++ b/20_脚手架/vue3_test/19.src_响应式的判断/main.js
@ -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')
--- a/20_脚手架/vue3_test/2.src_初识Vue3的setup/App.vue
+++ b/20_脚手架/vue3_test/2.src_初识Vue3的setup/App.vue
@ -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>
--- a/20_脚手架/vue3_test/2.src_初识Vue3的setup/assets/logo.png
+++ b/20_脚手架/vue3_test/2.src_初识Vue3的setup/assets/logo.png
--- a/20_脚手架/vue3_test/2.src_初识Vue3的setup/main.js
+++ b/20_脚手架/vue3_test/2.src_初识Vue3的setup/main.js
@ -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')
--- a/20_脚手架/vue3_test/20.src_Teleport/App.vue
+++ b/20_脚手架/vue3_test/20.src_Teleport/App.vue
@ -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>
--- a/20_脚手架/vue3_test/20.src_Teleport/assets/logo.png
+++ b/20_脚手架/vue3_test/20.src_Teleport/assets/logo.png
--- a/20_脚手架/vue3_test/20.src_Teleport/components/Child.vue
+++ b/20_脚手架/vue3_test/20.src_Teleport/components/Child.vue
@ -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>
--- a/20_脚手架/vue3_test/20.src_Teleport/components/Dialog.vue
+++ b/20_脚手架/vue3_test/20.src_Teleport/components/Dialog.vue
@ -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>
--- a/20_脚手架/vue3_test/20.src_Teleport/components/Son.vue
+++ b/20_脚手架/vue3_test/20.src_Teleport/components/Son.vue
@ -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>
--- a/20_脚手架/vue3_test/20.src_Teleport/main.js
+++ b/20_脚手架/vue3_test/20.src_Teleport/main.js
@ -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')
--- a/20_脚手架/vue3_test/21.src_Suspense/App.vue
+++ b/20_脚手架/vue3_test/21.src_Suspense/App.vue
@ -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>
--- a/20_脚手架/vue3_test/21.src_Suspense/assets/logo.png
+++ b/20_脚手架/vue3_test/21.src_Suspense/assets/logo.png
--- a/20_脚手架/vue3_test/21.src_Suspense/components/Child.vue
+++ b/20_脚手架/vue3_test/21.src_Suspense/components/Child.vue
@ -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>
--- a/20_脚手架/vue3_test/21.src_Suspense/main.js
+++ b/20_脚手架/vue3_test/21.src_Suspense/main.js
@ -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')
--- a/20_脚手架/vue3_test/3.src_ref函数的使用/App.vue
+++ b/20_脚手架/vue3_test/3.src_ref函数的使用/App.vue
@ -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>
--- a/20_脚手架/vue3_test/3.src_ref函数的使用/assets/logo.png
+++ b/20_脚手架/vue3_test/3.src_ref函数的使用/assets/logo.png
--- a/20_脚手架/vue3_test/3.src_ref函数的使用/main.js
+++ b/20_脚手架/vue3_test/3.src_ref函数的使用/main.js
@ -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')
--- a/20_脚手架/vue3_test/4.src_reactive函数的使用/App.vue
+++ b/20_脚手架/vue3_test/4.src_reactive函数的使用/App.vue
@ -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>
--- a/20_脚手架/vue3_test/4.src_reactive函数的使用/assets/logo.png
+++ b/20_脚手架/vue3_test/4.src_reactive函数的使用/assets/logo.png
--- a/20_脚手架/vue3_test/4.src_reactive函数的使用/main.js
+++ b/20_脚手架/vue3_test/4.src_reactive函数的使用/main.js
@ -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')
--- a/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue
+++ b/20_脚手架/vue3_test/5.src_vue3的响应式原理/App.vue
@ -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>
--- a/20_脚手架/vue3_test/5.src_vue3的响应式原理/assets/logo.png
+++ b/20_脚手架/vue3_test/5.src_vue3的响应式原理/assets/logo.png
--- a/20_脚手架/vue3_test/5.src_vue3的响应式原理/main.js
+++ b/20_脚手架/vue3_test/5.src_vue3的响应式原理/main.js
@ -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')
--- a/20_脚手架/vue3_test/6.src_setup的两个注意点/App.vue
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/App.vue
@ -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>
--- a/20_脚手架/vue3_test/6.src_setup的两个注意点/assets/logo.png
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/assets/logo.png
--- a/20_脚手架/vue3_test/6.src_setup的两个注意点/components/demo.vue
+++ b/20_脚手架/vue3_test/6.src_setup的两个注意点/components/demo.vue
@ -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>
--- a/Show More
+++ b/Show More