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