diff --git "a/\346\235\216\350\202\262\345\245\207/shop/index.html" "b/\346\235\216\350\202\262\345\245\207/shop/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f491ee3ee1c1fa4c86cdbe2edb4ecafbfa65eea3
--- /dev/null
+++ "b/\346\235\216\350\202\262\345\245\207/shop/index.html"
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>购物车</title>
+    <link rel="stylesheet" type="text/css" href="shop.css">
+    
+</head>
+
+<body>
+    <div id="app" v-cloak>
+        <template v-if="list.length">
+            <table>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>商品名称</th>
+                        <th>商品单价</th>
+                        <th>购买数量</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item,index) in list">
+                        <td>{{index +1}}</td>
+                        <td>{{item.name}}</td>
+                        <td>{{item.price}}</td>
+                        <td>
+                            <button @click="handleReduce(index)" :disabled="item.count === 1">-
+                            </button>
+                            {{item.count}}
+                            <button @click="handleAdd(index)">+</button>
+                            <td>
+                            <button @click="handleRemove(index)">移除</button>
+                        </td>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div>总价：￥{{totalPrice}}</div>                          
+        </template>
+        <div v-else>购物车为空</div>  
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="index.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\216\350\202\262\345\245\207/shop/index.js" "b/\346\235\216\350\202\262\345\245\207/shop/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..77125510011cf44d15601b97cc548d155ebde151
--- /dev/null
+++ "b/\346\235\216\350\202\262\345\245\207/shop/index.js"
@@ -0,0 +1,55 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        list: [
+            {
+                id: 1,
+                name: '苹果',
+                price: 1000,
+                count: 1
+            },
+            {
+                id: 2,
+                name: '小米',
+                price: 1928,
+                count: 1
+            },
+            {
+                id: 3,
+                name: '华为',
+                price: 6055,
+                count: 1
+            },
+            {
+                id: 1,
+                name: 'vivo ',
+                price: 2288,
+                count: 1
+            }
+        ]
+    },
+    computed: {
+        totalPrice: function () {
+            var total = 0;
+            for (var i = 0; i < this.list.length; i++) {
+                var item = this.list[i];
+                total += item.price * item.count;
+            }
+
+            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
+        }
+    },
+    methods: {
+        handleReduce: function (index) {
+            if (this.list[index].count === 1) return;
+            this.list[index].count--;
+        },
+        handleAdd: function (index) {
+            this.list[index].count++;
+        },
+        handleRemove: function (index) {
+            this.list.splice(index, 1);
+        }
+    }
+
+});
\ No newline at end of file
diff --git "a/\346\235\216\350\202\262\345\245\207/shop/shop.css" "b/\346\235\216\350\202\262\345\245\207/shop/shop.css"
new file mode 100644
index 0000000000000000000000000000000000000000..025a7b4f61ad17833b952fbb8288f2b2d4363e45
--- /dev/null
+++ "b/\346\235\216\350\202\262\345\245\207/shop/shop.css"
@@ -0,0 +1,21 @@
+[v-cloak]{
+    display: none;
+}
+table
+{
+    border: 1px solid #e9e9e9;
+    border-collapse:collapse;
+    border-spacing: 0;
+    empty-cells: show;
+}
+th,td{
+    padding: 8px 16px;
+    border: 1px solid red;
+    text-align: left;
+}
+th{
+    background: #f7f7f77f;
+    color: silver;
+    font-weight: 600;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git "a/\346\235\216\350\202\262\345\245\207/test/15175090689_1920x1200.jpg" "b/\346\235\216\350\202\262\345\245\207/test/15175090689_1920x1200.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..68d1f9a00e0ff8b7236bc9a562a274c1430f0c5b
Binary files /dev/null and "b/\346\235\216\350\202\262\345\245\207/test/15175090689_1920x1200.jpg" differ
diff --git "a/\346\235\216\350\202\262\345\245\207/test/css/test.css" "b/\346\235\216\350\202\262\345\245\207/test/css/test.css"
new file mode 100644
index 0000000000000000000000000000000000000000..f89566f33beb17e7b6a7dc3ffa3f04f2325d1ecb
--- /dev/null
+++ "b/\346\235\216\350\202\262\345\245\207/test/css/test.css"
@@ -0,0 +1,18 @@
+.abc
+{
+    background-color: aqua;
+    width: 600px;
+    height: 300px;
+    
+}
+.num
+{
+    background-color: aquamarine;
+    width: 500px;
+    height: 25000Px;
+    color: blue;
+}
+.num1
+{
+    background-color: chartreuse;
+}
\ No newline at end of file
diff --git "a/\346\235\216\350\202\262\345\245\207/test/index.html" "b/\346\235\216\350\202\262\345\245\207/test/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2ed8d39663a32c08a7fe4b3d753fd2548060be48
--- /dev/null
+++ "b/\346\235\216\350\202\262\345\245\207/test/index.html"
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue实战</title>
+
+
+
+    <link rel="stylesheet" href="css/test.css" type="text/css" />
+</head>
+
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
+
+    <div id="app">
+        <!-- {{message}} -->
+        <div :class='moercolor'>像个开关改动 app.has no</div>
+        <div :class="[hascolor?'abc': '']">拓展</div>
+        <div :class="[bgclolr,nums]">进阶</div>
+        <div :class="{'abc':hascolor,'num':noclolr}">
+            <h1>
+                啦啦啦
+            </h1>
+        </div>
+
+        <p v-if="age===18">今年18
+
+        </p>
+        <p v-else-if="age>18">成年人</p>
+
+        <p v-else>小学生</p>
+
+
+
+        <!-- Vue循环 -->
+
+        <ul>
+
+            <li v-for='(m,index) of message'>{{index+1}}*{{m.meg}}-{{m.time}}
+                <!-- app.message.push({meg:"ooo",time:"60"}) -->添加
+            </li>
+        </ul>
+        <ul>
+            <li v-for="u in user">{{u}}
+
+            </li>
+        </ul>
+        <!-- 冒泡排序 -->
+        <ul>
+            <h6>排序</h6>
+            <li v-for='(m,index) of timrsort'>{{index+1}}*{{m.meg}}-{{m.time}}
+                <!-- app.message.push({meg:"ooo",time:"60"}) -->添加
+            </li>
+        </ul>
+        <label style="color: aqua;">{{student}}</label>
+
+    </div>
+
+
+
+    <div id="app1">
+        <!-- {{message1}} -->
+        {{message1 | message2}}
+        </br>
+        {{newM}}
+
+        </br>
+        {{otherM()}}
+        <div v-model="ht">
+            <div v-html="ht">
+
+            </div>
+            <img v-bind:src="imgs" alt="" height="450px" width="600px">
+            <a :href="url">123</a>
+            <button v-on:click="but"> biu~ </button>
+
+        </div>
+
+        <label v-bind:title="message1" style="color: crimson;">
+            鼠标悬停查看时间信息
+        </label>
+        </br>
+        <!-- Vue判断 -->
+        <label v-if="CanSee">我看到你了
+
+        </label>
+    </div>
+
+
+
+    <script>
+        var app1 = new Vue({
+            el: "#app1",
+            data:
+            {
+                message1: '页面加载时间于' + new Date().toLocaleString(),
+                ht: "<h1>老李</h1>",
+                imgs: "15175090689_1920x1200.jpg",
+                url: "https://www.hao123.com/",
+                CanSee: true
+            },
+            computed: {
+                newM: function () {
+                    return this.url + "计算属性"
+                }
+            },
+            filters: {
+                message2: function (info
+                ) {
+                    return info + "管道"
+                }
+            },
+            // 方法
+            methods: {
+                otherM: function () {
+                    return this.ht + "方法"
+                },
+
+                but: function () {
+                    console.log("戳一戳!!!")
+                }
+            },
+            created: function () {
+                console.log("我出生了" + new Date().toLocaleTimeString());
+            },
+            mounted: function () {
+                console.log("我没了" + new Date().toLocaleString());
+            }
+
+
+
+        })
+    </script>
+
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                age: 18,
+                message: [
+                    { meg: "one", time: '1000' },
+                    { meg: "two", time: '60' },
+                    { meg: "three", time: '40' },
+                    { meg: "four", time: '50' },
+                    { me: "zero", time: '80' },
+
+                ],
+                user: {
+                    uesrname: 'sa',
+                    pwd: '123456',
+                    tel: '135123112'
+
+                },
+                hascolor: true,
+                noclolr: false,
+                student: "giao",
+                nums: 'num1',//很难更改
+
+            },
+            computed: {
+                bgclolr: function () {
+                    return this.hascolor ? 'abc' : ""
+                },
+                moercolor: function () {
+                    return {
+                        num1: this.hascolor,
+                        num: this.noclolr
+                    }
+                },
+                timrsort: function () {
+                    return this.message.sort(function (a, b) {
+                        return a.time - b.time 
+                    })
+                }
+            }
+
+        })
+    </script>
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\204\225/first_vue_project/imgs/b64543a98226cffc7a951157b8014a90f703ea9c.jpg" "b/\351\273\204\347\204\225/first_vue_project/imgs/b64543a98226cffc7a951157b8014a90f703ea9c.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..ebf15dd03f225155e66436b4bb23ff8445a6ece8
Binary files /dev/null and "b/\351\273\204\347\204\225/first_vue_project/imgs/b64543a98226cffc7a951157b8014a90f703ea9c.jpg" differ
diff --git "a/\351\273\204\347\204\225/first_vue_project/index.html" "b/\351\273\204\347\204\225/first_vue_project/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b3b4c00a731ae1676c1cb71edff9784427878ee9
--- /dev/null
+++ "b/\351\273\204\347\204\225/first_vue_project/index.html"
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>vue 示例</title>
+</head>
+
+<body>
+    <!-- 数据绑定和第一个vue应用 -->
+    <div id="app">
+        <input type="text" v-model="name" placeholder="你的名字">
+        <h1>你好,{{name}}</h1>
+    </div>
+   
+    <!-- 放一张图片 -->
+    <div id="app-2">
+        <img v-bind:src="imgs" alt="" height="300" width="400">
+    </div
+    >
+    <!-- 生命周期 -->
+
+    <div id="app-3">
+        {{eat}}
+    </div>
+
+    <!-- 事件 v-on:click-->    
+
+    <div id="app-4">
+        <p v-if="show">现在你能看到我</p>
+        <button v-on:click="show = false">点击隐藏</button>
+        <button v-on:click="show = true">点击显示</button>
+        <br><br>
+        <p v-if="hide">我隐身了</p>
+        <br>        
+        <button v-on:click="hide = true">现身</button>
+        
+        <a v-bind:href="url">百度一下，你就知道</a>
+       
+    </div>
+
+     <!-- 数据绑定 -->
+
+     <div id="app-5">
+            {{msg}}
+
+            <!-- 过滤器 -->
+            {{msg | formatString}}
+
+            <!-- 计算属性 -->
+            {{newMsg}}
+        </div>
+
+        
+        
+
+
+
+        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                name: ''
+            }
+        })
+
+
+        var app2=new Vue({
+            el:'#app-2',
+            data:{
+                imgs:'./imgs/b64543a98226cffc7a951157b8014a90f703ea9c.jpg'
+            }
+            
+        })
+
+        var app3=new Vue({
+            el:'#app-3',
+            data:{
+                eat:'吃饭啦',
+            },
+            created:function(){
+                console.log(this.eat);//吃饭啦
+            },
+            mounted:function(){
+                console.log(this.$el);//<div id="app-3">吃饭啦</div>
+            },                    
+        })
+
+        var app4=new Vue({
+            el:'#app-4',
+            data:{
+                show:true,
+                hide:false,
+                url:"http://baidu.com"
+            },                                
+        })
+
+        var app5 = new Vue({
+            el: '#app-5',
+            data: {
+                msg: 'Hello Vue!'
+            },
+            filters:{
+                formatString(val){
+                    return "中国红";
+                }
+            },
+            computed:{
+                newMsg:function(){
+                    return this.msg+"中国蓝"
+                }
+            }
+        })
+
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\204\225/vue-ShoppingCart/index.html" "b/\351\273\204\347\204\225/vue-ShoppingCart/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..62d36630deef2d47108fe8e2a174e64d8193c974
--- /dev/null
+++ "b/\351\273\204\347\204\225/vue-ShoppingCart/index.html"
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>购物车示例</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    
+</head>
+
+<body>
+    <div id="app" v-cloak>
+        <template v-if="list.length">
+            <table>
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>商品名称</th>
+                        <th>商品单价</th>
+                        <th>购买数量</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item,index) in list">
+                        <td>{{index +1}}</td>
+                        <td>{{item.name}}</td>
+                        <td>{{item.price}}</td>
+                        <td>
+                            <button @click="handleReduce(index)" :disabled="item.count === 1">-
+                            </button>
+                            {{item.count}}
+                            <button @click="handleAdd(index)">+</button>
+                            <td>
+                            <button @click="handleRemove(index)">移除</button>
+                        </td>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div>总价：￥{{totalPrice}}</div>                          
+        </template>
+        <div v-else>购物车为空</div>  
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script src="index.js"></script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\204\225/vue-ShoppingCart/index.js" "b/\351\273\204\347\204\225/vue-ShoppingCart/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..a2f0e0b683d12b9a8e1e89ac441aeb90baf3cc1b
--- /dev/null
+++ "b/\351\273\204\347\204\225/vue-ShoppingCart/index.js"
@@ -0,0 +1,55 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        list: [
+            {
+                id: 1,
+                name: '苹果',
+                price: 68,
+                count: 1
+            },
+            {
+                id: 2,
+                name: '智能蓝牙耳机',
+                price: 128,
+                count: 1
+            },
+            {
+                id: 3,
+                name: '男士夏季上衣',
+                price: 55,
+                count: 1
+            },
+            {
+                id: 1,
+                name: 'vivo IQ00',
+                price: 1288,
+                count: 1
+            }
+        ]
+    },
+    computed: {
+        totalPrice: function () {
+            var total = 0;
+            for (var i = 0; i < this.list.length; i++) {
+                var item = this.list[i];
+                total += item.price * item.count;
+            }
+
+            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
+        }
+    },
+    methods: {
+        handleReduce: function (index) {
+            if (this.list[index].count === 1) return;
+            this.list[index].count--;
+        },
+        handleAdd: function (index) {
+            this.list[index].count++;
+        },
+        handleRemove: function (index) {
+            this.list.splice(index, 1);
+        }
+    }
+
+});
\ No newline at end of file
diff --git "a/\351\273\204\347\204\225/vue-ShoppingCart/style.css" "b/\351\273\204\347\204\225/vue-ShoppingCart/style.css"
new file mode 100644
index 0000000000000000000000000000000000000000..70b0793cff6c4907aeef05ea270f5eff7e29126e
--- /dev/null
+++ "b/\351\273\204\347\204\225/vue-ShoppingCart/style.css"
@@ -0,0 +1,20 @@
+[v-cloak]{
+    display: none;
+}
+table{
+    border:1px solid #e9e9e9;
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+}
+th,td{
+    padding:8px 16px;
+    border:1px solid #e9e9e9;
+    text-align:left;
+}
+th{
+    background: #f7f7f7;
+    color: #5c6b77;
+    font-weight: 600;
+    white-space: nowrap;
+}
diff --git "a/\351\273\204\347\204\225/vue-project-lesson2/index.html" "b/\351\273\204\347\204\225/vue-project-lesson2/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f35b4205ab27ecc2a0a52edb149e699f432e458c
--- /dev/null
+++ "b/\351\273\204\347\204\225/vue-project-lesson2/index.html"
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>绑定class的几种方式</title>
+    <style type="text/css">
+        .red {
+            color: #F00
+        }
+
+        .green {
+            color: #0F0
+        }
+    </style>
+    <link href="style/demo.css" type="text/css" rel="stylesheet" />
+</head>
+
+<body>
+    <!-- 对象语法 :class="{'active':isActive,'error':isError}"-->
+    <div id="app">
+        <div class="red">我是红色</div>
+        <div class="green">我是绿色</div>
+        <div class="abc" :class="{'active':isActive,'error':isError}">
+        </div>
+
+
+    </div>
+    <!-- 数组语法 :class="[activeCls,errorCls]"-->
+    <div id="app-2">
+        <div :class="[activeCls,errorCls]">
+            <p>天降大任</p>
+        </div>
+        <!-- 三元表达式 -->
+        <!-- <div :class="[this.isActive ? activeCls : '',errorCls]"></div> -->
+    </div>
+    <!-- 条件渲染指令 -->
+    <!-- v-if  v-else  v-else -->
+    <div id="app-3">
+        <p v-if="sex === '男'">你是个男生</p>
+        <p v-else-if="sex === '女'">你是个女生</p>
+        <p v-else>你既不是个男生也不是个女生</p>
+
+        <template v-if="status === 1">
+            <p>这是一个文本</p>
+            <p>这是一个文本</p>
+            <p>这是一个文本</p>
+        </template>
+
+        <template v-if="type === 'name'">
+            <label>用户名：</label>
+            <input placeholder="输入用户名：" key="name-input">
+        </template>
+        <template v-else>
+            <label>邮箱：</label>
+            <input placeholder="输入邮箱：" key="mail-input">
+        </template>
+        <button @:click="handleToggleClick()">切换输入类型</button>
+    </div>
+    <!-- 列表渲染指令v-for -->
+    <div id="app-4">
+        <ul>
+            <!-- <li v-for="book in books">{{book.name}}</li>             -->
+            <li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
+        </ul>
+    </div>
+    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
+    <script>
+        var app = new Vue({
+            el: "#app",
+            data: {
+                isActive: true,
+                isError: false,
+                msg: "高歌一首",
+            }
+        })
+        var app2 = new Vue({
+            el: "#app-2",
+            data: {
+                activeCls: 'active',
+                errorCls: 'error'
+            }
+        })
+
+        var app3 = new Vue({
+            el: "#app-3",
+            data: {
+                sex: '男',
+                status: 1,
+                type: 'name'
+            },
+            mothods: {
+                handleToggleClick: function () {
+                    this.type = this.type === 'name' ? 'mail' : 'name';
+                }
+            }
+        })
+    </script>
+    <script>
+        var app4 = new Vue({
+            el: "#app-4",
+            data: {
+                books: [
+                    { name: '《斗罗大陆》' },
+                    { name: '《斗罗大陆2之绝世唐门》' },
+                    { name: '《斗罗大陆3之龙王传说》' },
+                    { name: '《斗罗大陆4之终极斗罗》' }
+                ]                
+            }
+        })
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\204\225/vue-project-lesson2/style/demo.css" "b/\351\273\204\347\204\225/vue-project-lesson2/style/demo.css"
new file mode 100644
index 0000000000000000000000000000000000000000..1dc76740d8e5544cf833f4b9b0c8ecd257fe9402
--- /dev/null
+++ "b/\351\273\204\347\204\225/vue-project-lesson2/style/demo.css"
@@ -0,0 +1,5 @@
+.abc{
+    background-color: aqua;
+    width: 600px;
+    height: 500px;
+}
\ No newline at end of file
