diff --git a/vue/11_条件渲染/条件渲染.html b/vue/11_条件渲染/条件渲染.html
new file mode 100644
index 0000000..6cd9fa8
--- /dev/null
+++ b/vue/11_条件渲染/条件渲染.html
@@ -0,0 +1,74 @@
+<!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 type="text/javascript" src="../js/vue.js"></script>
+</head>
+<body>
+    <!-- 
+        条件渲染:
+            1.v-if:
+            写法:
+                1).v-if="表达式"
+                2).v-else-if="表达式"
+                3).v-else="表达式"
+            适用于:
+                切换频率较低的场景
+            特点:
+                不展示的DOM元素直接被移除
+            注意:
+                v-if可以和v-else,v-else-if一起使用, 但要求结构不能被"打断"
+        
+            2.v-show
+            写法:
+                v-show="表达式"
+            适用于:
+                切换频率较高的场景
+            特点:
+                不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
+            
+            3.备注:
+                1).使用v-if时, 元素可能无法获取到, 而使用v-show一定可以获取到
+                2).template不会改变结构, 可以和v-if配合使用批量设置条件渲染
+     -->
+    <div id="root">
+        <h2>当前n的值是{{n}}</h2>
+        <button @click="n++">点我n+1</button>
+        <!-- 使用v-show做条件渲染 -->
+        <!-- <h2 v-show="false">请叫我{{name}}</h2> -->
+        <!-- <h2 v-show="a">请叫我{{name}}</h2> -->
+
+        <!-- 使用v-if做条件渲染 -->
+        <!-- <h2 v-if="false">请叫我{{name}}</h2> -->
+        <!-- <h2 v-if="1 === 1">请叫我{{name}}</h2> -->
+
+        <!-- v-else和v-else-if -->
+        <!-- <div v-if="n === 1">死亡赌局</div>
+        <div v-if-else="n === 2">超级手机</div>
+        <div v-if="n === 3">逍遥小医仙</div>
+        <div v-else>绝天神印</div> -->
+
+        <!-- v-if和template的配合使用 -->
+        <template v-if="n === 1">
+            <h2>你好</h2>
+            <h2>请叫我张钧</h2>
+            <h2>哈哈哈</h2>
+        </template>
+    </div>
+</body>
+
+<script type="text/javascript">
+    Vue.config.productionTip = false
+
+    const vm = new Vue({
+        el:'#root',
+        data:{
+            name:'张钧',
+            a:false,
+            n:0
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/12_列表渲染/1.基本列表.html b/vue/12_列表渲染/1.基本列表.html
new file mode 100644
index 0000000..8406b7f
--- /dev/null
+++ b/vue/12_列表渲染/1.基本列表.html
@@ -0,0 +1,64 @@
+<!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 type="text/javascript" src="../js/vue.js"></script>
+</head>
+<body>
+    <!-- 
+        v-for指令：
+            1.用于展示列表数据
+            2.语法：v-for="(item, index) in xxx" :key="yyy"
+            3.可遍历: 数组, 对象, 字符串(用的很少), 指定次数(用的很少)
+     -->
+    <div id="root">
+        <!-- 遍历数组 -->
+        <ul>
+            <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
+        </ul>
+
+        <ul>
+            <li v-for="(p,index) in persons" :key="p.id">{{p}}-{{index}}</li>
+        </ul>
+
+        <!-- 遍历对象 -->
+        <ul>
+            <li v-for="(value,key) in book" :key="key">{{value}}-{{key}}</li>
+        </ul>
+
+        <!-- 遍历字符串 -->
+        <ul>
+            <li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li>
+        </ul>
+
+        <!-- 遍历指定次数 -->
+        <ul>
+            <li v-for="(num,index) in 10" :key="index">{{num}}-{{index}}</li>
+        </ul>
+    </div>
+</body>
+
+<script type="text/javascript">
+    Vue.config.productionTip = false
+
+    const vm = new Vue({
+        el:'#root',
+        data:{
+            persons:[
+                {id:'001',name:'张钧',age:33},
+                {id:'002',name:'温柔',age:23},
+                {id:'003',name:'桃梨',age:24},
+                {id:'004',name:'琪妙',age:35},
+            ],
+            book:{
+                name:'死亡赌局',
+                count:123124,
+                date:'2023-06-14'
+            },
+            str:'thisisabook'
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/12_列表渲染/2.key的原理.html b/vue/12_列表渲染/2.key的原理.html
new file mode 100644
index 0000000..7c17bb1
--- /dev/null
+++ b/vue/12_列表渲染/2.key的原理.html
@@ -0,0 +1,36 @@
+<!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 type="text/javascript" src="../js/vue.js"></script>
+</head>
+<body>
+    <!-- 
+        p30待整理
+     -->
+    <div id="root">
+        <!-- 遍历数组 -->
+        <ul>
+            <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
+        </ul>
+    </div>
+</body>
+
+<script type="text/javascript">
+    Vue.config.productionTip = false
+
+    const vm = new Vue({
+        el:'#root',
+        data:{
+            persons:[
+                {id:'001',name:'张钧',age:33},
+                {id:'002',name:'温柔',age:23},
+                {id:'003',name:'桃梨',age:24},
+                {id:'004',name:'琪妙',age:35},
+            ]
+        },
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/vue/13_收集表单数据/收集表单数据.html b/vue/13_收集表单数据/收集表单数据.html
new file mode 100644
index 0000000..c6fbacf
--- /dev/null
+++ b/vue/13_收集表单数据/收集表单数据.html
@@ -0,0 +1,37 @@
+<!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 type="text/javascript" src="../js/vue.js"></script>
+</head>
+<body>
+    <div id="root">
+        <form>
+            <label for="demo">账号:</label>
+            <input type="text" id="demo"><br>
+            <label for="pwd">密码:</label>
+            <input type="password" id="pwd"><br>
+            性别:
+            男<input type="radio" name="gender">
+            女<input type="radio" name="gender"><br>
+            hobby:
+            learning <input type="checkbox">
+            gamming <input type="checkbox">
+            shopping <input type="checkbox"><br>
+            books
+            <select>
+                <option value="">chose your book</option>
+                <option value="swdj">死亡赌局</option>
+                <option value="cjsj">超级手机</option>
+                <option value="xyxyx">逍遥小医仙</option>
+                <option value="jysz">绝印神座</option>
+            </select><br>
+            Others:
+            <textarea ></textarea><br>
+            阅读并接受<a href="#">《用户协议》</a> 
+        </form>
+    </div>
+</body>
+</html>
\ No newline at end of file
