首頁 探索 說明
登入
lovecoding
/
VIP30
9
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

new

zsydgithub 1 年之前
父節點
20612cddcf
當前提交
035f84f4a1
共有 7 個文件被更改，包括 273 次插入 和 50 次删除
統一視圖 顯示文件統計
  1. 58 0
      v3_project/4_vue2和vue3的响应式/4_响应式.html
  2. 35 0
      v3_project/4_vue2和vue3的响应式/App.vue
  3. 29 0
      v3_project/5_setup的细节/App.vue
  4. 69 0
      v3_project/5_setup的细节/Child.vue
  5. 11 49
      v3_project/src/App.vue
  6. 69 0
      v3_project/src/components/Child.vue
  7. 2 1
      v3_project/vue.config.js

+ 58 - 0
v3_project/4_vue2和vue3的响应式/4_响应式.html
查看文件 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<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">
 
+  <title>Document</title>
 
+</head>
 
+<body>
 
+  <script>
 
+    //目标对象
 
+    const user = {
 
+      name: 'xiaoming',
 
+      age: 20,
 
+      friend: {
 
+        name: 'xiaohong',
 
+        age:18
 
+      }
 
+    }
 
+    //把目标对象换成代理对象
 
+    //参数1： user ---->目标对象
 
+    //参数2： handler----->处理器对象，用来监视数据和数据的操作
 
+    const proxyUser = new Proxy(user,{
 
+      //获取目标对象的属性
 
+      get(target,prop){
 
+        console.log('get方法的调用')
 
+        //反射对象
 
+        return Reflect.get(target,prop)
 
+      },
 
+      //修改目标对象的属性值|为目标对象添加新的值
 
+      set(target,prop,val){
 
+        console.log('set方法的调用')
 
+        return Reflect.set(target,prop,val)
 
+      },
 
+      //删除目标对象中的某个值
 
+      deleteProperty(target,prop){
 
+        console.log('delete方法的调用')
 
+        return Reflect.deleteProperty(target,prop)
 
+      }
 
+    })
 
+    //通过代理对象获取目标对象中的某个值
 
+    console.log(proxyUser.name)
 
+    //通过代理对象更新目标对象中的某个值
 
+    proxyUser.name = 'xiaolan'
 
+    console.log(user)
 
+    //通过代理对象向目标对象添加一个新的值
 
+    proxyUser.sex = '男'
 
+    console.log(user)
 
+
 
+    delete proxyUser.name
 
+    console.log(user)
 
+
 
+    //更新目标对象中某个属性对象的属性值
 
+    proxyUser.friend.name = 'peiqi'
 
+    console.log(user)
 
+  </script>
 
+</body>
 
+</html>

+ 35 - 0
v3_project/4_vue2和vue3的响应式/App.vue
查看文件 

@@ -0,0 +1,35 @@
 
+<template>
 
+  <div>
 
+
 
+  </div>
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent } from 'vue'
 
+
 
+export default defineComponent({
 
+  // vue2的响应式
 
+  //核心： 对象： 通过object.defineProperty对对象的已有属性的读取和修改进行劫持(监视、拦截)
 
+  //数组： 通过重写数组 更新数组 一系列更新元素的方法来实现元素修改的劫持
 
+
 
+  /* 
+    Oject.defineProperty(data,'count',{
 
+      get(){}
 
+      set(){}
 
+    })
 
+    arr[1] = ''
 
+  */
 
+  //vue3的响应式
 
+  // 通过proxy： 拦截对data任意属性的任意操作，包括属性值的读写，添加，删除
 
+  //reflect： 动态对被代理对象的相应属性进行特定的操作
 
+  setup () {
 
+    
+
 
+    return {}
 
+  }
 
+})
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 29 - 0
v3_project/5_setup的细节/App.vue
查看文件 

@@ -0,0 +1,29 @@
 
+<template>
 
+  <h2>父级组件</h2>
 
+  <h1>msg: {{ msg }}</h1>
 
+  <button @click="msg += '==='">更新数据</button>
 
+  <hr>
 
+  <Child :msg = "msg"></Child>
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent,ref } from 'vue'
 
+import Child from "./components/Child.vue"
 
+
 
+export default defineComponent({
 
+  setup () {
 
+    const msg = ref('在干嘛')
 
+
 
+    return {
 
+      msg
 
+    }
 
+  },
 
+  components: {
 
+    Child
 
+  }
 
+})
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 69 - 0
v3_project/5_setup的细节/Child.vue
查看文件 

@@ -0,0 +1,69 @@
 
+<template>
 
+  <h2>子级组件</h2>
 
+  <h3>msg: {{ msg }}</h3>
 
+  <h3>count: {{ count }}</h3>
 
+  <h3>{{ a }}</h3>
 
+  <!-- <button @click="add">点击</button> -->
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent ,ref} from 'vue'
 
+
 
+export default defineComponent({
 
+  name: 'Child',
 
+  props: ["msg"],
 
+  //数据初始化生命周期回调
 
+  beforeCreate(){
 
+    console.log("beforeCreate")
 
+  },
 
+  //setup 在beforeCreate回调之前就执行了 而且就执行一次
 
+  //setup执行的时候 组件没有创建出来 意味着组件实例对象this不能调用
 
+  //this是undefined 不能通过this调用  data/computed/methods/props 的东西
 
+
 
+  //setup返回值是一个方法和对象  内部的属性和方法都是给html模板去使用的
 
+  //setup中的对象的内部的属性和data函数中的return对象中的属性都可以在html模板当中使用
 
+  //setup中的对象中的属性和data函数中对象中的属性会合并成为组件对象的属性
 
+  //如果重名的话 setup数据优先
 
+  setup (props,content) {
 
+    console.log('setup',this)
 
+    console.log(props,content)
 
+    const a = 10
 
+    const c = ref(10)
 
+    /* 
+      props： 包含props配置声明且传入的所有属性的对象
 
+      attrs： 包含没有在props配置中声明的对象，this.$attrs
 
+      slots: 包含所有传入插槽内容的对象，相当于 this.$slots
 
+      emit: 用来分发自定义事件函数,相当于this.$emit
 
+    */
 
+   //注意： methods中可以访问setup所提供的属性和方法，但是在seup方法中不能访问data和methods
 
+    // function add(){
 
+    //   this.d++
 
+    // }
 
+    //setup不能是一个async函数： 因为返回值不是return对象，而是promise，模板看不到return对象中的属性数据
 
+    return {
 
+      a,
 
+      c
 
+    }
 
+  },
 
+  data(){
 
+    return{
 
+      count: 10,
 
+      a: 5,
 
+      d: 1
 
+    }
 
+  },
 
+  methods:{
 
+    // add(){
 
+    //   this.c++
 
+    //   console.log(this.c)
 
+    // }
 
+  },
 
+  mounted(){
 
+    console.log(this)
 
+  }
 
+})
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 11 - 49
v3_project/src/App.vue
查看文件 

@@ -1,63 +1,25 @@
 
 <template>
 
 <template>
 
-  <h2>reactive的使用</h2>
 
-  <h3>名字： {{user.name }}</h3>
 
-  <h3>年龄：{{ user.age }}</h3>
 
-  <h3>朋友: {{ user.firend }}</h3>
 
-
 
-  <h3>性别: {{ user.sex }}</h3>
 
+  <h2>父级组件</h2>
 
+  <h1>msg: {{ msg }}</h1>
 
+  <button @click="msg += '==='">更新数据</button>
 
   <hr>
 
   <hr>
 
-  <button @click="update">更新数据</button>
 
+  <Child :msg = "msg"></Child>
 
 </template>
 
 </template>
 
 
 
 <script lang="ts">
 
 <script lang="ts">
 
-import { defineComponent,reactive } from 'vue'
 
+import { defineComponent,ref } from 'vue'
 
+import Child from "./components/Child.vue"
 
 
 
 export default defineComponent({
 
 export default defineComponent({
 
-  //定义多个数据的响应式
 
-  //语法： const proxy = reactive(obj)
 
-  //接收一个普通对象然后返回该普通对象的响应式代理器对象
 
   setup () {
 
   setup () {
 
-    //需求： 显示用户相关信息，点击按钮，可以更新用户的相关信息
 
-    //把数据变为响应式的
 
-    const obj = ({
 
-      name: '小明',
 
-      age: 20,
 
-      firend: {
 
-        name: '小红',
 
-        age: 18,
 
-        cars: [1,2,3]
 
-      }
 
-    })
 
-    
-    //接收一个普通对象 然后返回该普通对象的响应式代理对象
 
-    const user = reactive<any>(obj)
 
-    //返回的是一个proxy代理对象 被代理这就是reactive传入的对象
 
-    console.log(user)
 
-
 
-    const update= ()=>{
 
-      //user： 代理对象  obj： 目标对象
 
-      // obj.name = '小兰'
 
-      user.name = '小兰'
 
-      user.age += 2
 
-      user.firend.name += '+++'
 
-      //user对象或者obj对象添加一个新的属性 哪种方式影响页面更新
 
-
 
+    const msg = ref('在干嘛')
 
 
 
-      // obj.sex = '男'
 
-
 
-      user.sex = '男'
 
-      //这种方式可以使页面更新渲染，最终也会添加到目标对象里面
 
-
 
-      //通过当前的代理对象找到该对象中的某个属性，更改属性中的某个数组的值
 
-      user.firend.cars[1] = 'bmw'
 
-      //通过当前的代理对象把目标对象中的某个数组属性添加一个新的属性
 
-      user.firend.cars[3] = ''
 
-    }
 
     return {
 
     return {
 
-      // obj,
 
-      user,
 
-      update
 
+      msg
 
     }
 
     }
 
+  },
 
+  components: {
 
+    Child
 
   }
 
   }
 
 })
 
 })
 
 </script>
 
 </script>

+ 69 - 0
v3_project/src/components/Child.vue
查看文件 

@@ -0,0 +1,69 @@
 
+<template>
 
+  <h2>子级组件</h2>
 
+  <h3>msg: {{ msg }}</h3>
 
+  <h3>count: {{ count }}</h3>
 
+  <h3>{{ a }}</h3>
 
+  <!-- <button @click="add">点击</button> -->
 
+</template>
 
+
 
+<script lang="ts">
 
+import { defineComponent ,ref} from 'vue'
 
+
 
+export default defineComponent({
 
+  name: 'Child',
 
+  props: ["msg"],
 
+  //数据初始化生命周期回调
 
+  beforeCreate(){
 
+    console.log("beforeCreate")
 
+  },
 
+  //setup 在beforeCreate回调之前就执行了 而且就执行一次
 
+  //setup执行的时候 组件没有创建出来 意味着组件实例对象this不能调用
 
+  //this是undefined 不能通过this调用  data/computed/methods/props 的东西
 
+
 
+  //setup返回值是一个方法和对象  内部的属性和方法都是给html模板去使用的
 
+  //setup中的对象的内部的属性和data函数中的return对象中的属性都可以在html模板当中使用
 
+  //setup中的对象中的属性和data函数中对象中的属性会合并成为组件对象的属性
 
+  //如果重名的话 setup数据优先
 
+  setup (props,content) {
 
+    console.log('setup',this)
 
+    console.log(props,content)
 
+    const a = 10
 
+    const c = ref(10)
 
+    /* 
+      props： 包含props配置声明且传入的所有属性的对象
 
+      attrs： 包含没有在props配置中声明的对象，this.$attrs
 
+      slots: 包含所有传入插槽内容的对象，相当于 this.$slots
 
+      emit: 用来分发自定义事件函数,相当于this.$emit
 
+    */
 
+   //注意： methods中可以访问setup所提供的属性和方法，但是在seup方法中不能访问data和methods
 
+    // function add(){
 
+    //   this.d++
 
+    // }
 
+    //setup不能是一个async函数： 因为返回值不是return对象，而是promise，模板看不到return对象中的属性数据
 
+    return {
 
+      a,
 
+      c
 
+    }
 
+  },
 
+  data(){
 
+    return{
 
+      count: 10,
 
+      a: 5,
 
+      d: 1
 
+    }
 
+  },
 
+  methods:{
 
+    // add(){
 
+    //   this.c++
 
+    //   console.log(this.c)
 
+    // }
 
+  },
 
+  mounted(){
 
+    console.log(this)
 
+  }
 
+})
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 2 - 1
v3_project/vue.config.js
查看文件 

@@ -1,4 +1,5 @@
 
 const { defineConfig } = require('@vue/cli-service')
 
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
 
 module.exports = defineConfig({
 
-  transpileDependencies: true
 
+  transpileDependencies: true,
 
+  lintOnSave: false
 
 })
 
 })