4 dagen geleden · 45d7d3c4e7
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,49 @@
 
				+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
			
 
				+
			
 
				+# dependencies
			
 
				+**/node_modules
			
 
				+# roadhog-api-doc ignore
			
 
				+/src/utils/request-temp.js
			
 
				+_roadhog-api-doc
			
 
				+ant-pro
			
 
				+
			
 
				+# production
			
 
				+/dist
			
 
				+/.vscode
			
 
				+
			
 
				+# misc
			
 
				+.DS_Store
			
 
				+npm-debug.log*
			
 
				+yarn-error.log
			
 
				+
			
 
				+/coverage
			
 
				+.idea
			
 
				+yarn.lock
			
 
				+package-lock.json
			
 
				+*bak
			
 
				+.vscode
			
 
				+
			
 
				+# visual studio code
			
 
				+.history
			
 
				+*.log
			
 
				+
			
 
				+functions/mock
			
 
				+.temp/**
			
 
				+
			
 
				+# umi
			
 
				+.umi
			
 
				+.umi-production
			
 
				+
			
 
				+# screenshot
			
 
				+screenshot
			
 
				+.firebase
			
 
				+
			
 
				+# mine
			
 
				+testWebpack
			
 
				+test
			
 
				+笔记
			
 
				+面试
			
 
				+练习题
			
 
				+测试代码
			
 
				+.mp4
			
 
				+.mp3
			
--- a/10-vuecli/vueapp/myapp/.gitignore
+++ b/10-vuecli/vueapp/myapp/.gitignore
@@ -0,0 +1,23 @@
 
				+.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/10-vuecli/vueapp/myapp/README.md
+++ b/10-vuecli/vueapp/myapp/README.md
@@ -0,0 +1,24 @@
 
				+# myapp
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+yarn install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+yarn serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+yarn build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+yarn lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/10-vuecli/vueapp/myapp/babel.config.js
+++ b/10-vuecli/vueapp/myapp/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/10-vuecli/vueapp/myapp/jsconfig.json
+++ b/10-vuecli/vueapp/myapp/jsconfig.json
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "target": "es5",
			
 
				+    "module": "esnext",
			
 
				+    "baseUrl": "./",
			
 
				+    "moduleResolution": "node",
			
 
				+    "paths": {
			
 
				+      "@/*": [
			
 
				+        "src/*"
			
 
				+      ]
			
 
				+    },
			
 
				+    "lib": [
			
 
				+      "esnext",
			
 
				+      "dom",
			
 
				+      "dom.iterable",
			
 
				+      "scripthost"
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
--- a/10-vuecli/vueapp/myapp/package.json
+++ b/10-vuecli/vueapp/myapp/package.json
@@ -0,0 +1,43 @@
 
				+{
			
 
				+  "name": "myapp",
			
 
				+  "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/10-vuecli/vueapp/myapp/public/favicon.ico
+++ b/10-vuecli/vueapp/myapp/public/favicon.ico
--- a/10-vuecli/vueapp/myapp/public/index.html
+++ b/10-vuecli/vueapp/myapp/public/index.html
@@ -0,0 +1,17 @@
 
				+<!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>
			
--- a/10-vuecli/vueapp/myapp/src/App.vue
+++ b/10-vuecli/vueapp/myapp/src/App.vue
@@ -0,0 +1,28 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <img alt="Vue logo" src="./assets/logo.png">
			
 
				+    <HelloWorld msg="Welcome to Your Vue.js App"/>
			
 
				+  </div>
			
 
				+</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/10-vuecli/vueapp/myapp/src/assets/logo.png
+++ b/10-vuecli/vueapp/myapp/src/assets/logo.png
--- a/10-vuecli/vueapp/myapp/src/components/HelloWorld.vue
+++ b/10-vuecli/vueapp/myapp/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
 
				+<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/10-vuecli/vueapp/myapp/src/main.js
+++ b/10-vuecli/vueapp/myapp/src/main.js
@@ -0,0 +1,8 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  render: h => h(App),
			
 
				+}).$mount('#app')
			
--- a/10-vuecli/vueapp/myapp/vue.config.js
+++ b/10-vuecli/vueapp/myapp/vue.config.js
@@ -0,0 +1,4 @@
 
				+const { defineConfig } = require('@vue/cli-service')
			
 
				+module.exports = defineConfig({
			
 
				+  transpileDependencies: true
			
 
				+})
			
--- a/9-vue基础/10_watch属性.html
+++ b/9-vue基础/10_watch属性.html
@@ -0,0 +1,57 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <h1>{{num1}}</h1>
			
 
				+        <h1>{{obj.userName}}</h1>
			
 
				+        <button @click="changeNum">按钮</button>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                num1:1,
			
 
				+                obj:{
			
 
				+                    userName:"张三",
			
 
				+                    age:18
			
 
				+                }
			
 
				+            },
			
 
				+            methods:{
			
 
				+                changeNum(){
			
 
				+                    this.num1 = 100;
			
 
				+                    this.obj.userName = "李四";
			
 
				+                }
			
 
				+            },
			
 
				+            // 监听属性
			
 
				+            // 当data 中观察属性发生变化了 那么就会触发watch中的函数
			
 
				+            watch:{
			
 
				+                // 函数名称对应的是要观察的data中的属性名
			
 
				+                num1(newVal,oldVal){
			
 
				+                    // 监听属性中默认有两个参数 第一个是修改后的值 第二个是修改前值
			
 
				+                    console.log(newVal,oldVal);
			
 
				+                   console.log("num1发生变化了"); 
			
 
				+                },
			
 
				+                // obj(newVal,oldVal){
			
 
				+                //     console.log(newVal,oldVal);
			
 
				+                //     console.log("obj发生变化了");
			
 
				+                // }
			
 
				+                // 监听对象中的属性变化
			
 
				+                obj:{
			
 
				+                    handler(newVal,oldVal){
			
 
				+                        console.log(newVal,oldVal);
			
 
				+                        console.log("obj发生变化了");
			
 
				+                    },
			
 
				+                    // 监听对象中的属性变化  可以使用deep属性  开启深度监听
			
 
				+                    deep:true
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/8_v-model.html
+++ b/9-vue基础/8_v-model.html
@@ -0,0 +1,35 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <!-- v-model 指令 实现数据的双向绑定 -->
			
 
				+        <!-- v-model 常用于表单元素 这个例子中主要是绑定input元素的value属性 -->
			
 
				+        <!-- 如果修改文本框里内容 v-model对应data中值也会发生变化 -->
			
 
				+        <!-- 如果通过js修改data中值 也会影响文本框里的值 -->
			
 
				+        <input type="text" v-model="val">
			
 
				+        <h1>{{val}}</h1>
			
 
				+        <button @click="changeVal">点击我</button>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                val:100
			
 
				+            },
			
 
				+            // 内部一般放置事件处理函数
			
 
				+            methods:{   
			
 
				+                changeVal(){
			
 
				+                    // 一般情况下使用this来访问Vue实例中data数据 
			
 
				+                    this.val = "hello world";
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/9_计算属性.html
+++ b/9-vue基础/9_计算属性.html
@@ -0,0 +1,47 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./js/vue.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="app">
			
 
				+        <h1>
			
 
				+            <span>{{num1}}</span>
			
 
				+            +
			
 
				+            <span>{{num2}}</span>
			
 
				+            =
			
 
				+            <!-- 使用计算属性方法 -->
			
 
				+            <!-- 用法与使用data属性相同 -->
			
 
				+             <!-- 虽然计算属性是一个方法  但是在使用时  直接使用属性名  不需要加() -->
			
 
				+            <span>{{num3}}</span>
			
 
				+        </h1>
			
 
				+        <button @click="changeNum">改变数组</button>
			
 
				+    </div>
			
 
				+    <script>
			
 
				+        new Vue({
			
 
				+            el:"#app",
			
 
				+            data:{
			
 
				+                num1:1,
			
 
				+                num2:2,
			
 
				+            },
			
 
				+            methods:{
			
 
				+                changeNum(){
			
 
				+                    this.num1 = 100;
			
 
				+                }
			
 
				+            },
			
 
				+            // 计算属性
			
 
				+            computed:{
			
 
				+                // 每一个计算属性其实就是一个方法
			
 
				+                num3(){
			
 
				+                    // 计算属性里面可以做很多的业务处理
			
 
				+                    // 只要相关联的数据发生变化 计算属性会自动重新计算
			
 
				+                    return this.num1 + this.num2;
			
 
				+                }
			
 
				+            }
			
 
				+        })
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/9-vue基础/练习2_商品列表.html
+++ b/9-vue基础/练习2_商品列表.html
@@ -90,6 +90,7 @@
 
				 
			
 
				     <script>
			
 
				         new Vue({
			
 
				+            // 绑定Vue实例到id为app的元素 (挂载点)
			
 
				             el: "#app",
			
 
				             data: {
			
 
				                 productDtoList: []