diff --git "a/\351\273\204\345\256\207\347\205\214/5.29 Vue\345\217\202\346\225\260\343\200\201\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md" "b/\351\273\204\345\256\207\347\205\214/5.29 Vue\345\217\202\346\225\260\343\200\201\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..7d9b63585b73d3d8484dddf303fba8674909fc31
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/5.29 Vue\345\217\202\346\225\260\343\200\201\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\231\250.md"	
@@ -0,0 +1,122 @@
+# Vue
+
+## v-bind缩写
+```
+<!-- 完整语法 -->
+<a v-bind:href="url">...</a>
+
+<!-- 缩写 -->
+<a :href="url">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a :[key]="url"> ... </a>
+```
+
+## v-on 缩写
+```
+<!-- 完整语法 -->
+<a v-on:click="doSomething">...</a>
+
+<!-- 缩写 -->
+<a @click="doSomething">...</a>
+
+<!-- 动态参数的缩写 (2.6.0+) -->
+<a @[event]="doSomething"> ... </a>
+```
+
+## Vue动态参数
+在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：
+```
+<!-- 前端代码 -->
+<div id="app">
+    <a :[todo]="url">现在todo是：{{todo}}</a>
+    <br>
+    <label for="">这是第{{count}}次</label>
+    <br>
+    <button @click="btn">点一点康康</button>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data() {
+        return {
+            url:"http:baidu.com",
+            count:0,
+            todo:"href",
+            todos:["href","http","show","what"]
+        }
+    },
+    methods: {
+        btn:function(){
+            let rnd = Math.floor(Math.random()*this.todos.length);
+            console.log(rnd);
+            return this.todo = this.todos[rnd],this.count+=1
+        }
+    },
+})
+```
+
+## 计算属性（computed）
+对代码进行简单的运算
+```
+<!-- 前端代码 -->
+<div id="app">
+    <h1>{{age}}岁的你出生在{{birth}}年</h1>
+    <h1>今天是这个月的第{{today}}天</h1>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el: "#app",
+    data() {
+        return {
+            age: 18,
+            day: 0
+        }
+    },
+    computed: {
+        birth: function () {
+            let date = new Date();
+            let year = date.getFullYear();
+
+            return year - this.age;
+        },
+        today: function () {
+            let date = new Date();
+            let today = date.getDate();
+            return this.day + today;
+        }
+    }
+})
+```
+
+## 监听属性（watch）
+监听数据的变动
+```
+<!-- 前端代码 -->
+<div id="app">
+    <h1>大家好，我是{{name}}</h1>
+</div>
+```
+
+```
+let app = new Vue({
+        el: "#app",
+        data() {
+            return {
+                name: "李白"
+            }
+        },
+        watch: {
+            name: function (newVal, oldVal) {
+                console.log("这是变化后的数据---" + newVal);
+                console.log("这是变化前的数据---" + oldVal);
+            }
+        }
+    })
+```
\ No newline at end of file
diff --git "a/\351\273\204\345\256\207\347\205\214/6.1 Vue Class\344\270\216Style\347\273\221\345\256\232.md" "b/\351\273\204\345\256\207\347\205\214/6.1 Vue Class\344\270\216Style\347\273\221\345\256\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bbaa84c7d2b9fcca95fd171e3da8e3f78c92d8a7
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/6.1 Vue Class\344\270\216Style\347\273\221\345\256\232.md"	
@@ -0,0 +1,68 @@
+# Class 与 Style 绑定
+
+## 对象语法
+```
+<!-- 前端代码 -->
+<div id="app">
+    <span :class="{show:isShow}" class="let me see">
+        {{msg}}
+    </span>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data:{
+        msg:"唯独你没懂",
+        isShow:true
+    }
+})
+```
+这个例子中class中show的是否存在取决isShow的状态，v-bind:class 指令也可以与普通的 class attribute 共存。
+
+### 绑定的数据对象不必内联定义在模板里
+```
+<!-- 前端代码 -->
+<div id="app">
+    <span :class="classVar" class="let me see">
+        {{msg}}
+    </span>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el:"#app",
+    data:{
+        msg:"唯独你没懂",
+        classVar:{
+            active: true,
+            'text-danger': false
+        }
+    }
+})
+```
+## 数组语法
+我们可以把一个数组传给class,同时数组内也可以使用三元运算符，如下isActive的状态决定了activeClass的存在与否。
+```
+<div id="app">
+    <div v-bind:class="[isActive ? activeClass : '', errorClass]">
+        {{msg}}
+    </div>
+</div>
+```
+
+```
+let app = new Vue({
+    el: "#app",
+    data: {
+        msg: "唯独你没懂",
+        isActive:false,
+        activeClass: 'active',
+        errorClass: 'text-danger'
+    },
+})
+```
\ No newline at end of file