diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\210\222\346\214\207.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\210\222\346\214\207.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..3fdb577429e975776e85e5c8b5e182f878829b22
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\210\222\346\214\207.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\223\276.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\223\276.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..54a37d520e28ffe2554073a5b0c4e00415a7dc3f
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\223\276.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\225\257.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\225\257.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..15a485ace8bb2fd9be43e0be08f0e8295f9e17b4
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\346\211\213\351\225\257.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\200\263\351\245\260.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\200\263\351\245\260.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..fd613da7199da268889194b9d679c6190d9553f5
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\200\263\351\245\260.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\204\232\351\223\276.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\204\232\351\223\276.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..39d33f8227ef2e39374bd0de4ae4c9349c333220
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\350\204\232\351\223\276.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\351\241\271\351\223\276.jpeg" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\351\241\271\351\223\276.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..5f2ee438f746319f7a83134f82e5c1dd1a6e92ed
Binary files /dev/null and "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/img/\351\241\271\351\223\276.jpeg" differ
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\225\206\345\223\201\351\201\215\345\216\206.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\225\206\345\223\201\351\201\215\345\216\206.html"
new file mode 100644
index 0000000000000000000000000000000000000000..737d1c8c207c2899868876dc0c9234e2cdc22854
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\225\206\345\223\201\351\201\215\345\216\206.html"
@@ -0,0 +1,75 @@
+
+<!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>
+<style>
+
+    h1 {
+        margin-top: 3%;
+        text-align: center;
+    }
+
+    .two {
+        width: 600px;
+        margin: 5% 28%;
+        border: 4px solid black;
+        border-radius: 15px;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        padding-right: 20px;
+    }
+
+    img {
+        width: 250px;
+        margin-right: 20px;
+        margin: 15px 15px;
+    }
+
+</style>
+<body>
+    <!-- 音乐 -->
+    <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
+        src="//music.163.com/outchain/player?type=2&id=1892583113&auto=1&height=66"></iframe> -->
+    <h1>珠宝饰品的爱情寓意</h1>
+
+    <div class="main">
+
+        <language v-for="(arr) in arrs" :arr="arr"></language>
+
+    </div>
+    
+</body>
+
+<script>
+    // 定义一个局部组件，实现商品遍历，数据在普通实例中
+
+    let language = {
+        props: ['arr','index'], // 数组，对外暴露一个变量名
+        template: '<div class=two><img :src="arr.img">{{arr.name}}物语：{{arr.story}} <br> <br>寓意：“{{arr.moral}}”</div>',
+    }
+
+    new Vue({
+        el: '.main',
+        data: {
+            arrs: [ // vue怎么遍历数组,对象 v-for
+                { img: 'img/戒指.jpeg', name: '戒指', story: '爱你到心里，情愿为爱受戒', moral:'戒指既是爱情的信物，也是婚姻的象征，现在在订婚结婚时，戒指必不可少。男生送女生戒指，代表一辈子的承诺；女生送男生戒指，则代表你永远属于我。' },
+                { img: 'img/项链.jpeg', name: '项链', story: '我要你在我身边',          moral:'项链与“相恋”谐音，如果两人还未确定关系，送项链意味着想更进一步；项链佩戴在颈部，离心脏的位置特别近，已经相恋送项链，代表希望对方在自己的身边，不被抢走。' },
+                { img: 'img/手镯.jpeg', name: '手镯', story: '圈住你，只疼爱你一个',     moral:'手镯多为圆形，男生送女生手镯，代表想用手镯圈住女生，一心一意跟随。对于女生而言，手镯除了佩戴，还能传承，送给自己的孩子。' },
+                { img: 'img/手链.jpeg', name: '手链', story: '系住你一辈子',            moral:'男生送女生手链，意为想和女生紧紧系在一起；女生送男生手链意为执子之手，与子偕老。' },
+                { img: 'img/耳饰.jpeg', name: '耳饰', story: '你身上有我的印记，请和我一辈子', moral:'耳饰分别戴在左右耳，男生送女生耳饰意为“只能属于我”，而女生如果佩戴男生送的耳饰，则意为“我愿意聆听你的声音”。' },
+                { img: 'img/脚链.jpeg', name: '脚链', story: '缠住今生，系住来生',       moral:'中国传统文化中，月老的红绳就是缠在脚踝上，送女生脚链意为系住今生的一辈子，且期待来生结缘。' }
+            ]
+        },
+        components: {
+            language
+        }
+    })
+
+</script>
+</html>
\ No newline at end of file
diff --git "a/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\344\274\240\351\200\222.html" "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\344\274\240\351\200\222.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9ba80169284f1972fad622c69b36357e6fde0e52
--- /dev/null
+++ "b/\350\260\255\350\216\211\350\216\211/vue\344\275\234\344\270\232/4.13\345\261\200\351\203\250\347\273\204\344\273\266/\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211\344\270\216\345\217\202\346\225\260\344\274\240\351\200\222.html"
@@ -0,0 +1,110 @@
+<!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="app">
+        <name></name>
+
+
+        <school title="测试试题" content="测试内容"></school>
+        <school title="清华大学" content="最好的大学"></school>
+        
+    
+    <college :obj='obj' :score='score'></college>
+    <ul>
+        <li></li>
+    </ul>
+
+    <language v-for="(arr,index) in arrs":arr="arr" :index="index=index+1"></language>
+    </div>
+</body>
+<script>
+    //全局组件定义
+    Vue.component('name',{
+        data:function(){
+            return{
+                result:true
+            }
+        },
+        methods:{
+            change:function(){
+                console.log(this.result)
+                this.result=!this.result
+            }
+        },
+        template:'<div><div v-if="result">我那半推半就的人生</div> <button @click="change">点击</button></div> '
+    });
+     //全局组件定义
+     Vue.component('demoName', {//驼峰方式命名要在脚手架中使用
+        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>'
+
+    });//组件的定义？ 可复用的vue实例,实例都是隔离的
+
+    //定一个对象
+    let school = {
+        data: function () {
+            return {
+                // title:'标题',   跟props 同名会报错
+                // content:'内容'  跟props 同名会报错
+            }
+        },
+        props: ['title','content'],//数组，对外暴露一个变量名
+        template: '<div style="color:red">{{title}}{{content}}</div>',
+    }
+
+    //定一个对象
+    let college = {
+        data: function () {
+            return {
+            }
+        }
+    }
+
+    //定一个对象
+    let language = {
+        props: ['arr','index'],//数组，对外暴露一个变量名
+        template: '<div style="color:red">{{index}}  {{arr.name}}您好，请问您贵庚？--------------你说啥？我今年{{arr.age}}岁</div>',
+    }
+
+    //不能使用普通实例中的变量
+
+    new Vue({
+        el: "#app",
+        data: {
+            arrs: [//vue怎么遍历数组,对象 v-for
+                { 'name': 'php', age: 30 },
+                {name:'小谭',age:20}
+            ]
+        },
+
+        components: {
+            // 指令，过滤器,定义一个局部的指令，无非就是 components 中定义key = value 格式 value 必须是json格式
+            // 而且外层用到的 特殊标签就是key值
+            //schools: school,//第一个是key值，第二个是外层的json对象 这种格式可以
+            school,//简写方式 school:school 的简写                    这种简写格式也行
+            // schoolName:school,//驼峰方式不行还是要在脚手架
+            college,
+            language
+        }
+    })
+    //又没办法使用普通实例中的变量呢？-----》props
+
+    //作业定义一个局部组件，实现商品遍历，数据在普通实例中
+</script>
+</html>
\ No newline at end of file