首頁 探索 說明
登入
lovecoding
/
W250511
10
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

vue3

zheng 1 天之前
父節點
3c5f9bb915
當前提交
1a9b2f1375
共有 3 個文件被更改，包括 50 次插入 和 3 次删除
分割檢視 顯示文件統計
  1. 12 2
      17.Vue3/project/src/App.vue
  2. 32 0
      17.Vue3/project/src/components/Demo13.vue
  3. 6 1
      9-vue基础/1_helloworld.html

+ 12 - 2
17.Vue3/project/src/App.vue
查看文件 

@@ -28,6 +28,9 @@ export default {
 
 <template>
 
   <div>
 
     <h1>首页</h1>
 
+    <Demo13 ref="flower"></Demo13>
 
+    <hr>
 
+    <hr>
 
     <Demo12 v-if="isShow"></Demo12>
 
     <hr>
 
     <hr>
 
@@ -66,7 +69,7 @@ export default {
 
 </template>
 
 
 <script lang="ts" setup>
 
-import {ref} from 'vue';
 
+import {ref,onMounted} from 'vue';
 
 import Demo1 from './components/Demo1.vue';
 
 import Demo2 from './components/Demo2.vue';
 
 import Demo3 from './components/Demo3.vue';
 
@@ -79,12 +82,19 @@ import Demo9 from './components/Demo9.vue';
 
 import Demo10 from './components/Demo10.vue';
 
 import Demo11 from './components/Demo11.vue';
 
 import Demo12 from './components/Demo12.vue';
 
+import Demo13 from './components/Demo13.vue';
 
 // export default {
 
 //   // components:{
 
 //   //   Demo1
 
 //   // }
 
 // }
 
-let isShow = ref(true)
 
+let isShow = ref(true);
 
+let flower = ref();
 
+onMounted(()=>{
 
+  console.log(flower.value,'花')
 
+  console.log(flower.value.vase)
 
+  console.log(flower.value.num)
 
+})
 
 </script>
 
 
 <style lang="scss" scoped>

+ 32 - 0
17.Vue3/project/src/components/Demo13.vue
查看文件 

@@ -0,0 +1,32 @@
 
+<template>
 
+  <div>
 
+    <h1>Ref</h1>
 
+    <p ref="aaa">哈哈哈哈哈</p>
 
+  </div>
 
+</template>
 
+
 
+<!-- <script> 
+export default {
 
+    data() {
 
+        return {
 
+            // aa:""
 
+        }
 
+    },
 
+    mounted() {
 
+        console.log(this.$refs.aaa,'你好a')
 
+    }
 
+}
 
+</script> -->
 
+<script lang="ts" setup>
 
+import { ref, reactive } from "vue";
 
+let aa = ref();
 
+let vase = ref("12");
 
+let num = ref("哈哈哈")
 
+console.log(aa.value,'你好');
 
+defineExpose({
 
+    vase,num
 
+})
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+</style>

+ 6 - 1
9-vue基础/1_helloworld.html
查看文件 

@@ -9,6 +9,7 @@
 
 <body>
 
     <div id="app">
 
         <h1>{{str}}</h1>
 
+        <p ref="bbb">哈哈哈</p>
 
     </div>
 
     <script>
 
         new Vue({
 
@@ -16,7 +17,11 @@
 
             el:"#app",
 
             // 实例的数据 这里的数据都是要显示在页面里的
 
             data:{
 
-                str:"hello world!"
 
+                str:"hello world!",
 
+                bbb:""
 
+            },
 
+            mounted() {
 
+                console.log(this.$refs.bbb.innerHTML)
 
             }
 
         })
 
     </script>