From a579fd6000b215ec89a1ea752692dc71b5c270b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E7=BE=8E=E9=9B=AA?= <3140918699@qq.com>
Date: Fri, 15 Apr 2022 11:46:47 +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

---
 .../demo.html"                                | 133 ++++++++++++++++++
 .../demo01.html"                              | 124 ++++++++++++++++
 2 files changed, 257 insertions(+)
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo.html"
 create mode 100644 "\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo01.html"
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo.html"
new file mode 100644
index 0000000..3ecbc9d
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo.html"
@@ -0,0 +1,133 @@
+<!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>
+<style>
+ .main{
+     clear:both;
+     margin-top:20px
+     }
+.catalog{ 
+    width:200px;
+    float:left;
+    text-align:center;
+    background:peru;
+    }
+
+.product{
+    width:70%;
+    float:right
+    }
+
+li{
+    list-style:none;
+    width:300px;
+    float:left
+}
+
+ .ctalog-item{
+     height:50px;
+     line-height:50px
+     }
+</style>
+<body>
+    <div id="app">
+        <app :catalogs="catalogs" :products="products"><span>hot</span></app>
+    </div>
+</body>
+<script>
+    let product = {
+        props:['product'],
+        template:"<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>"
+    }
+
+    let catalog = {
+        data:function(){
+            return {catid:0}
+        },
+        methods:{
+            catshow:function(){
+                this.show = ! this.show;
+            }
+        },
+        props :['catalog'],
+        template:"<div>{{catalog.name}}</div>",
+        components:{
+
+        }
+    }
+
+    //总管理器
+    let app = {
+        methods:{
+            choicecat:function(i){
+                // 事件里直接写上 函数名即可 v-on:click="choicecat" 
+                //也可以传递参数  v-on:click="choicecat（参数）"
+                this.catid = i;
+            }
+        },
+        data:function(){
+            return{catid:1}//就是目录id
+        },
+        props:['catalogs','products'],
+        template:"<div class='main'>"+// 只能由一个根元素
+                  "<div class='catalog' ><catalog  class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog'  @click.native='choicecat(catalog.id)'></catalog></div><ul class='product'  >"+
+                  "<product v-for='product in products' :product='product'  v-show='(catid==product.cid)'></product>"+
+                 "</ul></div>",//组件里面要使用方法加上修饰符 .native
+           components:{
+               catalog,
+               product,
+           }
+        }
+        new Vue({
+            el:"#app",
+            data:{
+                catalogs:[
+                   {name : '动物', id : 1, img : ''},
+                   {name : '多肉', id : 2, img : ''}
+                ],
+                products:[
+                    {
+                    cid : 1,
+                    name : '中华田园犬幼崽',
+                    price : '300',
+                    img:'https://img2.baidu.com/it/u=2137005823,2265100377&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+                    },
+                    {
+                    cid : 1,
+                    name : '金毛犬幼崽',
+                    price : '800',
+                    img:'https://img0.baidu.com/it/u=4221536834,1416872490&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+                    },
+                    {
+                    cid : 1,
+                    name : '松狮犬幼崽',
+                    price : '700',
+                    img:'https://img0.baidu.com/it/u=2351387332,1002841612&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+                    },
+                    {
+                    cid : 2,
+                    name : '潘灯玉露十二卷',
+                    price : '298',
+                    img:'https://img1.baidu.com/it/u=2179871603,2016379352&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+                    },
+                    {
+                    cid : 2,
+                    name : '石莲花五十玲玉',
+                    price : '400',
+                    img:'http://t13.baidu.com/it/u=1070485153,3684889073&fm=224&app=112&f=JPEG?w=500&h=500'
+                    },
+                  
+                ],
+            },
+            //template:'<app :data='catalogs'/>,
+            components:{
+                app,
+            }
+        })
+</script>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo01.html" "b/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo01.html"
new file mode 100644
index 0000000..e0aded3
--- /dev/null
+++ "b/\346\235\250\347\276\216\351\233\252/vue-04-14-\347\273\204\344\273\266\351\225\266\345\265\214/demo01.html"
@@ -0,0 +1,124 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+    <title>组件</title>
+
+    <style>
+      .main{clear:both;margin-top:20px}
+      .catalog{ width:300px;float:left;text-align:center;background:grey;}
+      .product{width:70%;float:right}
+      li{list-style:none;width:300px;float:left}
+      .ctalog-item{height:50px;line-height:50px}
+
+
+    </style>
+</head>
+
+<body>
+<div id="app">
+    <app :catalogs="catalogs"  :products="products"><span>hot!</span></app>
+
+</div>
+
+
+</body>
+<script>
+
+  
+    let product ={
+        props:['product'],
+        template:"<li><img :src='product.img' width='100%'>{{product.name}}{{product.price}}</li>",
+    }
+
+    let catalog={
+        data:function(){
+          return {catid:0}
+        },
+        methods:{
+           catshow:function(){
+             this.show=!this.show
+           }
+        },
+        props:['catalog'],
+        template:"<div >{{catalog.name}}</div>",
+        components:{
+
+        }
+    }
+    //总管理器
+    let app={
+        methods:{
+            choicecat:function(i){// 事件里直接写上 函数名即可 v-on:click="choicecat" 也可以传递参数  v-on:click="choicecat（参数）"
+               this.catid=i
+            }
+        },
+        data:function(){
+            return {catid:1}//就是目录id
+         },
+        props:['catalogs','products'],
+        template:"<div class='main'>"+// 只能由一个根元素
+                  "<div class='catalog' ><catalog  class='ctalog-item' v-for='catalog in catalogs' :catalog='catalog'  @click.native='choicecat(catalog.id)'></catalog></div><ul class='product'  >"+
+                  "<product v-for='product in products' :product='product'  v-show='(catid==product.cid)'></product>"+
+                 "</ul></div>",//组件里面要使用方法加上修饰符 .native
+         components:{
+          catalog,
+          product,
+        }
+    }
+
+    new Vue({//最大的父类
+      el:"#app",
+      data:{
+         catalogs:[
+           {
+             name:'烧烤',
+             id:1,
+             img:''
+           },
+           {
+             name:'海鲜',
+             id:2,
+             img:'',
+           }
+         ],
+         products:[
+                {
+                  cid:1,
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
+                },
+                 {
+                  cid:1,
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
+                },
+                 {
+                  cid:1,
+                  name:'烤猪脚',
+                  price:'20',
+                  img:'https://img0.baidu.com/it/u=1643398587,3400884588&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=389'
+                },
+                {
+                  cid:2,
+                  name:'金昌鱼',
+                  price:'20',
+                  img:'https://img0.baidu.com/it/u=1272688782,2227068255&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427'
+                },
+         ],
+      },
+      //template:'<app  :data="catalogs" />',
+      components:{
+         app,
+      }
+    })
+
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee

