diff --git "a/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html" "b/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b2be6bfc368e81c57b52ef0e3048f34e62a7addf
--- /dev/null
+++ "b/\346\242\205\346\242\246\347\224\234/Vue 03-23/demo1.html"	
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+    <!-- 构建vue项目,写一个商品的列表，里面图片链接等，可以用vue里面的data的数据 -->
+<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>商品列表</title>
+</head>
+
+<!-- 防止页面加载时出现闪烁问题 -->
+<style>
+    [v-cloak]{
+        display: none;
+    }
+
+    .price{
+        font-size: 18px;
+        font-weight: 1000;
+        color:red;
+    }
+
+    .wenzi{
+        font-size: 15px;
+        font-weight: 1000;
+
+    }
+</style>
+
+
+<body>
+    <div id="app" v-cloak>
+        <div v-html="imgs">
+
+        </div>
+         <!-- <div v-html="imgs">
+
+        </div>   -------这个是显示html里面的图片 -->
+        
+
+        <!-- 这是显示文本内容 -->
+        <div class="text">
+            <p class="wenzi">{{wenzi}}</p>
+            <p class="price">{{price}}</p>
+        </div>
+
+    </div>
+
+
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+
+    <script>
+        var app = Vue.createApp({
+            data: function () {
+                return {
+                    price: "$100",
+                    wenzi: "披萨大减价，快来抢购吧！",
+                    imgs: '<img src ="https://img2.baidu.com/it/u=849995377,520435495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" width=200px >'
+                }
+            }
+        })
+        app.mount("#app");
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
