2 天之前 · 3b59381a89
--- a/.DS_Store
+++ b/.DS_Store
--- a/10-vuecli/vueapp/myapp/src/components/MyPageSix.vue
+++ b/10-vuecli/vueapp/myapp/src/components/MyPageSix.vue
@@ -70,6 +70,7 @@
 
				         // destroyed: 组件销毁完成后调用
			
 
				         destroyed() {
			
 
				             console.log("组件销毁完成后调用");
			
 
				+            // 清理定时器、事件监听等
			
 
				         }
			
 
				 
			
 
				 
			
--- a/10-vuecli/vueapp/myappthree/.gitignore
+++ b/10-vuecli/vueapp/myappthree/.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/myappthree/README.md
+++ b/10-vuecli/vueapp/myappthree/README.md
@@ -0,0 +1,24 @@
 
				+# myappthree
			
 
				+
			
 
				+## 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/myappthree/babel.config.js
+++ b/10-vuecli/vueapp/myappthree/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/10-vuecli/vueapp/myappthree/jsconfig.json
+++ b/10-vuecli/vueapp/myappthree/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/myappthree/package.json
+++ b/10-vuecli/vueapp/myappthree/package.json
@@ -0,0 +1,45 @@
 
				+{
			
 
				+  "name": "myappthree",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "axios": "^1.11.0",
			
 
				+    "core-js": "^3.8.3",
			
 
				+    "element-ui": "^2.15.14",
			
 
				+    "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/myappthree/public/favicon.ico
+++ b/10-vuecli/vueapp/myappthree/public/favicon.ico
--- a/10-vuecli/vueapp/myappthree/public/index.html
+++ b/10-vuecli/vueapp/myappthree/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/myappthree/src/App.vue
+++ b/10-vuecli/vueapp/myappthree/src/App.vue
@@ -0,0 +1,36 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <img alt="Vue logo" src="./assets/logo.png">
			
 
				+    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
			
 
				+    <ComOne />
			
 
				+    <ComTwo />
			
 
				+    <ComThree />
			
 
				+ </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// import HelloWorld from './components/HelloWorld.vue'
			
 
				+import ComOne from "./components/ComOne.vue";
			
 
				+import ComTwo from "./components/ComTwo.vue";
			
 
				+import ComThree from "./components/ComThree.vue" 
			
 
				+export default {
			
 
				+  name: 'App',
			
 
				+  components: {
			
 
				+    // HelloWorld,
			
 
				+    ComOne,
			
 
				+    ComTwo,
			
 
				+    ComThree
			
 
				+  }
			
 
				+}
			
 
				+</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/myappthree/src/assets/logo.png
+++ b/10-vuecli/vueapp/myappthree/src/assets/logo.png
--- a/10-vuecli/vueapp/myappthree/src/components/ComOne.vue
+++ b/10-vuecli/vueapp/myappthree/src/components/ComOne.vue
@@ -0,0 +1,74 @@
 
				+<template>
			
 
				+  <div class="com-one">
			
 
				+    <h1>我是ComOne组件</h1>
			
 
				+    <el-button type="primary">主要按钮</el-button>
			
 
				+    <el-button type="primary" icon="el-icon-edit" circle></el-button>
			
 
				+    <i class="el-icon-upload"></i>
			
 
				+    <div class="box">
			
 
				+    <el-form
			
 
				+      :model="numberValidateForm"
			
 
				+      ref="numberValidateForm"
			
 
				+      label-width="100px"
			
 
				+      class="demo-ruleForm"
			
 
				+    >
			
 
				+      <el-form-item
			
 
				+        label="年龄"
			
 
				+        prop="age"
			
 
				+        :rules="[
			
 
				+          { required: true, message: '年龄不能为空' },
			
 
				+          { type: 'number', message: '年龄必须为数字值' },
			
 
				+        ]"
			
 
				+      >
			
 
				+        <el-input
			
 
				+          type="age"
			
 
				+          v-model.number="numberValidateForm.age"
			
 
				+          autocomplete="off"
			
 
				+        ></el-input>
			
 
				+      </el-form-item>
			
 
				+      <el-form-item>
			
 
				+        <el-button type="primary" @click="submitForm('numberValidateForm')"
			
 
				+          >提交</el-button
			
 
				+        >
			
 
				+        <el-button @click="resetForm('numberValidateForm')">重置</el-button>
			
 
				+      </el-form-item>
			
 
				+    </el-form>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "ComOne",
			
 
				+  data() {
			
 
				+    return {
			
 
				+      numberValidateForm: {
			
 
				+        age: 10,
			
 
				+      },
			
 
				+    };
			
 
				+  },
			
 
				+  methods: {
			
 
				+    submitForm(formName) {
			
 
				+        // 校验表单 validate 校验表单是否通过
			
 
				+      this.$refs[formName].validate((valid) => {
			
 
				+        // 校验通过 valid 则为true
			
 
				+        if (valid) {
			
 
				+          alert("submit!");
			
 
				+        } else {
			
 
				+            // 校验不通过 valid 则false
			
 
				+          console.log("error submit!!");
			
 
				+          return false;
			
 
				+        }
			
 
				+      });
			
 
				+    },
			
 
				+    resetForm(formName) {
			
 
				+      this.$refs[formName].resetFields();
			
 
				+    },
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+.box{
			
 
				+    width: 400px;
			
 
				+    margin: 100px auto;
			
 
				+    text-align: left;
			
 
				+}
			
 
				+</style>
			
--- a/10-vuecli/vueapp/myappthree/src/components/ComThree.vue
+++ b/10-vuecli/vueapp/myappthree/src/components/ComThree.vue
@@ -0,0 +1,31 @@
 
				+<template>
			
 
				+    <div class="com-three">
			
 
				+        <h1>我是ComThree组件</h1>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    import axios from 'axios';
			
 
				+    export default{
			
 
				+        name:"ComThree",
			
 
				+        // 调用生命周期函数
			
 
				+        // created 当前组件创建成功后执行
			
 
				+        created(){
			
 
				+            // 发送请求
			
 
				+            axios({
			
 
				+                // method是请求方式 get post delete...
			
 
				+                method:"get",
			
 
				+                // url是请求地址
			
 
				+                url:"http://shop-api.edu.koobietech.com/prod/tagProdList"
			
 
				+                // then 是请求成功后执行
			
 
				+            }).then((res)=>{
			
 
				+                // res 就是返回的结构
			
 
				+                console.log(res.data.data);
			
 
				+            }).catch((err)=>{
			
 
				+                // catch 是请求失败后执行
			
 
				+                // err 就是返回的错误信息
			
 
				+                console.log(err);
			
 
				+            })
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
--- a/10-vuecli/vueapp/myappthree/src/components/ComTwo.vue
+++ b/10-vuecli/vueapp/myappthree/src/components/ComTwo.vue
@@ -0,0 +1,19 @@
 
				+<template>
			
 
				+    <div class="com-two">
			
 
				+        <!-- 通过ref 给标签起一个名字 -->
			
 
				+        <h1 ref="h1ref">我是ComTwo组件</h1>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+    export default{
			
 
				+        name:"ComTwo",
			
 
				+        // 生命周期函数
			
 
				+        // mounted 组件挂载完成后执行 页面所有内容都展示了
			
 
				+        mounted(){
			
 
				+            // ref vue 提供的 可以获取到页面上的元素 工具
			
 
				+            // 通过this.$refs.名字 就可以获取到元素
			
 
				+            console.log(this.$refs.h1ref)
			
 
				+        }
			
 
				+    }
			
 
				+</script>
			
--- a/10-vuecli/vueapp/myappthree/src/components/HelloWorld.vue
+++ b/10-vuecli/vueapp/myappthree/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/myappthree/src/main.js
+++ b/10-vuecli/vueapp/myappthree/src/main.js
@@ -0,0 +1,10 @@
 
				+import Vue from 'vue'
			
 
				+import ElementUI from 'element-ui';
			
 
				+import 'element-ui/lib/theme-chalk/index.css';
			
 
				+import App from './App.vue'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+Vue.use(ElementUI);
			
 
				+new Vue({
			
 
				+  render: h => h(App),
			
 
				+}).$mount('#app')
			
--- a/10-vuecli/vueapp/myappthree/vue.config.js
+++ b/10-vuecli/vueapp/myappthree/vue.config.js
@@ -0,0 +1,4 @@
 
				+const { defineConfig } = require('@vue/cli-service')
			
 
				+module.exports = defineConfig({
			
 
				+  transpileDependencies: true
			
 
				+})
			
--- a/8-ES6/5_数值新增方法.html
+++ b/8-ES6/5_数值新增方法.html
@@ -51,7 +51,7 @@
 
				 
			
 
				         // 最大安全数字 9007199254740991 2的53次方-1
			
 
				         // console.log(Number.MAX_SAFE_INTEGER);
			
 
				-        // // 最小安全数字 -9007199254740991 2的53次方+1
			
 
				+        // // 最小安全数字 -9007199254740991 -2的53次方+1
			
 
				         // console.log(Number.MIN_SAFE_INTEGER);
			
 
				 
			
 
				         // // 判断是否为安全数字 Number.isSafeInteger()
			
--- a/8-ES6/7_立即执行函数.html
+++ b/8-ES6/7_立即执行函数.html
@@ -22,9 +22,13 @@
 
				         
			
 
				         // fn();
			
 
				 
			
 
				+        // 立即执行函数
			
 
				+        // 函数定义完立即执行
			
 
				         (function(){
			
 
				             console.log("123");
			
 
				         })();
			
 
				+
			
 
				+        
			
 
				     </script>
			
 
				 </body>
			
 
				 </html>
			
--- a/8-ES6/8_解构赋值.html
+++ b/8-ES6/8_解构赋值.html
@@ -72,6 +72,9 @@
 
				         let {a,c} = fn();
			
 
				         console.log(a,c);
			
 
				 
			
 
				+        let a1 = 1;
			
 
				+        let a2 = 2;
			
 
				+
			
 
				 
			
 
				     </script>
			
 
				 </body>
			
--- a/9-vue基础/4_v-bind.html
+++ b/9-vue基础/4_v-bind.html
@@ -16,6 +16,7 @@
 
				 </head>
			
 
				 <body>
			
 
				     <div id="app">
			
 
				+        <!-- 绑定属性 只要给一个属性加上v-bind 那么后面的值会被解析成变量 -->
			
 
				         <img v-bind:src="imgSrc" alt="">
			
 
				         <!-- <div v-bind:class="a"> hello world</div> -->
			
 
				         <div v-bind:class="{'active':isActive}">hello world</div>
			
--- a/9-vue基础/6_v-if.html
+++ b/9-vue基础/6_v-if.html
@@ -8,6 +8,7 @@
 
				 </head>
			
 
				 <body>
			
 
				     <div id="app">
			
 
				+        <!-- v-if 直接移除元素 -->
			
 
				         <h1 v-if="isShow">hello world</h1>
			
 
				         <h1 v-else>你好世界</h1>
			
 
				         <!-- v-show 仅能控制元素的显示及隐藏 -->
			
--- a/9-vue基础/8_v-model.html
+++ b/9-vue基础/8_v-model.html
@@ -12,6 +12,7 @@
 
				         <!-- v-model 常用于表单元素 这个例子中主要是绑定input元素的value属性 -->
			
 
				         <!-- 如果修改文本框里内容 v-model对应data中值也会发生变化 -->
			
 
				         <!-- 如果通过js修改data中值 也会影响文本框里的值 -->
			
 
				+         <!-- mvvm 模型 -->
			
 
				         <input type="text" v-model="val">
			
 
				         <h1>{{val}}</h1>
			
 
				         <button @click="changeVal">点击我</button>
			
--- a/9-vue基础/练习2_商品列表.html
+++ b/9-vue基础/练习2_商品列表.html
@@ -92,8 +92,11 @@
 
				         new Vue({
			
 
				             // 绑定Vue实例到id为app的元素 (挂载点)
			
 
				             el: "#app",
			
 
				+            // data属性用于存储页面中要显示的数据
			
 
				             data: {
			
 
				-                productDtoList: []
			
 
				+                productDtoList: [],
			
 
				+                num:0,
			
 
				+                str:"hello world!",
			
 
				             },
			
 
				             methods: {
			
 
				                 getData() {