From cf1bae6111c93e0fef587c008a671d913f6b633f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E7=8C=AE=E7=90=BC?= <961895678@qq.com>
Date: Thu, 14 Apr 2022 16:43:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ggg.html"                                 | 42 +++++++++++++++++++
 .../hhh.html"                                 | 30 +++++++++++++
 .../hhh.html"                                 | 42 +++++++++++++++++++
 3 files changed, 114 insertions(+)
 create mode 100644 "\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/ggg.html"
 create mode 100644 "\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/hhh.html"
 create mode 100644 "\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\345\205\253\346\254\241\344\275\234\344\270\232 \345\261\200\351\203\250\347\273\204\344\273\266/hhh.html"
diff --git "a/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/ggg.html" "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/ggg.html"
new file mode 100644
index 0000000..90c6fcb
--- /dev/null
+++ "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/ggg.html"	
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>全局组件</title>
+</head>
+<body>
+    <div id="app">
+        <name></name>
+        <name></name>
+    </div>
+</body>
+<script>
+    Vue.component('name',{
+        data:function(){
+            return{
+                result:true
+            };
+        },
+        methods:{
+            change:function(){
+                console.log(this.result)
+                this.result=!this.result
+            }
+        },
+        template:'<div><button @click="change">点击</button><div v-if="result">内容</div></div>'
+    });
+    new Vue ({
+        el:"#app",
+        data:{
+            result:true
+        },
+        methods:{
+            change:function(){
+                this.result=!this.result
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/hhh.html" "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/hhh.html"
new file mode 100644
index 0000000..319621b
--- /dev/null
+++ "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\344\270\203\346\254\241\344\275\234\344\270\232  \345\205\250\345\261\200\347\273\204\344\273\266/hhh.html"	
@@ -0,0 +1,30 @@
+<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+
+</head>
+<body>
+    <div id="root">
+        <button @click="showCont">点击</button>
+        <div v-if="show">你好！node</div>
+    </div>
+
+    <script >
+        let root = new Vue({
+            el:'#root',
+            data:{
+                show:true
+            },
+            methods:{
+                showCont:function(){
+                    this.show = !this.show;
+                }
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\345\205\253\346\254\241\344\275\234\344\270\232 \345\261\200\351\203\250\347\273\204\344\273\266/hhh.html" "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\345\205\253\346\254\241\344\275\234\344\270\232 \345\261\200\351\203\250\347\273\204\344\273\266/hhh.html"
new file mode 100644
index 0000000..9ad3b89
--- /dev/null
+++ "b/\351\273\216\347\214\256\347\220\274/vue\344\275\234\344\270\232/\347\254\254\345\205\253\346\254\241\344\275\234\344\270\232 \345\261\200\351\203\250\347\273\204\344\273\266/hhh.html"	
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <title>局部组件</title>
+    <!-- 定义一个局部组件，实现商品遍历，数据在普通实例中 -->
+</head>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+<body>
+    <div id="app">
+        <tr>
+            <tb><product v-for="obj in products" :pro="obj"></product></tb>
+        </tr>
+    </div>
+
+    <script>
+       //局部组件
+       let product={
+           props:['pro'],
+           template:"<tb>{{pro.name}}---{{pro.price}}<br></tb>"
+       }
+        //创建根实例
+        new Vue({
+            el:'#app',
+            data:{
+                products:[
+                    {name:'vivo iqoo 9 pro',price:4999},
+                    {name:'白桃洗衣液',price:16.8},
+                    {name:'行李箱',price:899},
+                    {name:'洗衣机',price:5499},
+                    {name:'沙发',price:799}
+                ]
+            },
+            components:{
+                'product':product
+            }
+        })
+    </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

