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