1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .active { 10 color: rgba(0, 110, 255, 0.712) 11 } 12 13 .delete { 14 background: rgba(255, 166, 0, 0.842); 15 } 16 17 .error { 18 font-size: 34px; 19 } 20 21 .seen { 22 width: 100px; 23 height: 100px; 24 background: red; 25 } 26 </style> 27 </head> 28 29 <body> 30 <div id="app"> 31 <!-- {{}} 用于标签体内显示数据 --> 32 <h1>{{message}}</h1> 33 34 <!-- v-once 一次性插值 --> 35 <p v-once>{{message}}</p> 36 37 <!-- 表达式 --> 38 <p v-once>{{num+1}}</p> 39 40 <!-- v-model进行数据的双向绑定 --> 41 <input type="text" v-model="message"> 42 43 <!-- 双大括号将数据以普通文本方式进行输出 --> 44 <p>普通文本输出：{{htmls}}</p> 45 <!-- 输出真正的html指令 v-html --> 46 <!-- v-html: 47 1.如果输出的内容是html数据，双大括号将数据以普通文本方式进行输出 48 为了输出真正html的效果，就需要使用v-html指定 49 2.为了防止XSS攻击（不会识别js） 50 --> 51 <p>html渲染输出：<span v-html="htmls"></span></p> 52 53 <!-- 元素绑定指令 --> 54 <img v-bind:src="imgUrl"><br> 55 <img :src="imgUrl"><br> 56 <a :href="xurl">跳转到百度</a><br> 57 58 59 <!-- 点击按钮，调用函数 --> 60 <button @click="reduce">-</button> 61 <input type='text' v-model="nums"> 62 <button @click="plus">+</button><br> 63 <p></p> 64 65 <!-- 66 1.函数没有缓存，每次都会被调用 67 2.计算属性有缓存，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用 68 3.函数只支持单向 69 4.计算属性默认情况下，只有getter函数，而没有setter函数，所以只支持单向 70 如果需要双向绑定，则需要自定义setter函数 71 --> 72 <!-- 函数 --> 73 数学：<input type="text" v-model="mathematics"><br> 74 英语：<input type="text" v-model="english"><br> 75 总得分(函数)-单向绑定：<input type="text" v-model="sum()"><br> 76 77 <!-- 绑定计算属性后面不加小括号 --> 78 总得分（计算属性）-单向绑定：<input type="text" v-model="sum1"><br> 79 总得分（计算属性）-双向绑定：<input type="text" v-model="sum2"><br> 80 81 <!-- 监听 --> 82 总得分（监听数学属性）-通过watch选项监听：<input type="text" v-model="sum3"><br> 83 总得分（监听英语属性）-通过vm实例调用：<input type="text" v-model="sum4"><br> 84 <!-- <button @click="sum">计算</button> --> 85 86 <!-- class 列表样式数据绑定 --> 87 <div> 88 <h3>class 绑定 v-bind:class 或 :class</h3> 89 <p class="active">固定绑定class</p> 90 <p>动态绑定class</p> 91 <p v-bind:class="activeclass">字符串表达式</p> 92 <p :class="{delete:isDelete,active:isActive}">对象表达式</p> 93 <p :class="['delete','active','error']">数组表达式</p> 94 95 <h3>Style绑定，v-bind：style或者：style</h3> 96 <p :style="{color:activeColor,fontSize:fonrSize+'px'}">Style绑定</p> 97 </div> 98 99 100 <!-- 101 v-if 如果初始值为假，则什么也不做，条件为真，都会重新渲染 102 v-show 不是初始值条件是什么，都会重新渲染 103 如果非常频繁的切换，则使用v-show，运行后条件很少改变，则使用v-if较好 104 --> 105 <div> 106 <h3>v-if 条件渲染</h3> 107 <input v-model="state" type="checkbox">勾选显示红色方块 108 <p v-if="state" class="seen"></p> 109 <p v-else="state">隐藏内容</p> 110 111 <h3>v-show 条件渲染</h3> 112 <p v-show="state" class="seen"></p> 113 </div> 114 115 116 <!-- 迭代数组 --> 117 <div> 118 <h3>迭代数组</h3> 119 <ul> 120 <!-- e为数组别名，index为下标，下标从0开始， 121 注意：使用key特殊属性，它会基于key的变化重新排列元素顺序，并且会移除key不存在的数据 122 可以使用of或者in作为分隔符 123 --> 124 <li v-for="(e,index) in emps" :key="id"> 125 ID: {{e.id}}，name:{{e.name}}，age:{{e.age}} 126 </li> 127 </ul> 128 </div> 129 130 <!-- 迭代对象 --> 131 <div> 132 <h3>迭代对象</h3> 133 <ul> 134 <!-- value为属性值，key为属性名，index为下标 --> 135 <li v-for="(value,key,index) in prece"> 136 第{{index+1}}个对象：{{key}}={{value}} 137 </li> 138 </ul> 139 140 </div> 141 142 <!-- 事件处理函数 v-on --> 143 <div> 144 <h3>事件处理函数 v-on</h3> 145 146 <button v-on:click="deletes">删除 {{tips}}</button> 147 <!-- $event代表的是原生的Dom事件 --> 148 <button @click="warn(tipss,$event)">Warn</button> 149 150 </div> 151 152 <!-- 事件修饰符 153 .stop - 阻止冒泡 154 .prevent - 阻止默认事件 155 .capture - 阻止捕获 156 .self - 只监听触发该元素的事件 157 .once - 只触发一次 158 .left - 左键事件 159 .right - 右键事件 160 .middle - 中间滚轮事件 161 --> 162 <div> 163 <h3>事件修饰符 164 .stop - 阻止冒泡 165 .prevent - 阻止默认事件 166 .capture - 阻止捕获 167 .self - 只监听触发该元素的事件 168 .once - 只触发一次 169 .left - 左键事件 170 .right - 右键事件 171 .middle - 中间滚轮事件 172 </h3> 173 <!-- 只触发一次 --> 174 <button @click.once="doThis">只触发一次：{{numm}}</button> 175 <div @click="todo1"> 176 <button @click="todo">todo</button> 177 </div> 178 <!-- 阻止冒泡 --> 179 <div @click="todo1"> 180 <button @click.stop="todo">阻止冒泡</button> 181 </div> 182 <!-- .prevent - 阻止默认事件 --> 183 <a href="http:www.baidu.com" @click.prevent="onSubmit">跳转百度</a> 184 </div> 185 <!-- 按键修饰符 186 .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 187 --> 188 <div> 189 <h3>按键修饰符 190 .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta</h3> 191 <input type="text" value="enter" @keyup.enter="keyEnter"> 192 <input type="text" value="delete" @keyup.delete="keyDelete"> 193 </div> 194 195 <!-- 表单数据双向绑定 v-model --> 196 <div> 197 <h3>表单数据双向绑定 v-model</h3> 198 <form @submit.prevent="submitForm"> 199 姓名：<input type="text" v-model="name"> 200 <br><br> 201 性别(单选)： 202 <input type="radio" name="sex" value="0" v-model="sex">男 203 <input type="radio" name="sex" value="1" v-model="sex">女 204 <br><br> 205 科目(多选)： 206 <input type="checkbox" name="skills" value="java" v-model="skills">java 207 <input type="checkbox" name="skills" value="python" v-model="skills">python 208 <input type="checkbox" name="skills" value="vue" v-model="skills">vue 209 <br><br> 210 城市(下拉框)： 211 <select name="city" v-model="citys"> 212 <option v-for="c in city" :value="c.code">{{c.name}}</option> 213 214 </select> 215 <br><br> 216 备注(多行文本)： 217 <textarea cols="30" rows="5" v-model="disc"></textarea> 218 <br><br> 219 <button type="submit">提交</button> 220 </form> 221 222 </div> 223 224 </div> 225 <script src="./node_modules/vue/dist/vue.js"></script> 226 <script> 227 var vm = new Vue({ 228 el: '#app',//指定被Vue管理的入口，值为选择器 229 230 // 初始化的数据 231 data: {//用于初始化数据，在vuevm=实例管理的Dom节点下，可通过模板请求来引用 232 message: 'hello word!', 233 num: 10, 234 htmls: `<span style="color: red ">你好</span> 235 <script src="./node_modules/vue/dist/vue.js"></script>`, 236 imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', 237 xurl: 'http://www.baidu.com', 238 nums: 0, 239 mathematics: 80, 240 english: 90, 241 sumnum: '', 242 sum3: 0, 243 sum4: 0, 244 activeclass: 'active', 245 activeColor: 'red', 246 isDelete: true, 247 isActive: false, 248 fonrSize: 32, 249 state: true, 250 emps: [ 251 { id: '1', name: "张三", age: '16' }, 252 { id: '2', name: "李四", age: '18' }, 253 { id: '3', name: "王五", age: '20' }, 254 ], 255 prece: { 256 name: '张三', 257 age: 18 258 }, 259 tips: "确定是否删除", 260 tipss: "警告", 261 numm: 0, 262 skills: [], 263 city: [ 264 { code: 'bj', name: '北京' }, 265 { code: 'sh', name: '上海' }, 266 { code: 'gz', name: '广州' } 267 ], 268 citys: "sh", 269 disc: "", 270 sex: '1', 271 submitForm: function () { 272 alert(this.name + ',' + this.sex + ',' + this.skills + ',' + this.citys + ',' + this.disc) 273 } 274 275 }, 276 // methods里可定义多个函数 277 methods: { 278 // 函数每次都会执行函数体进行计算 279 //递增函数 280 plus: function () { 281 console.log("调用plus") 282 this.nums = this.nums + 1 283 }, 284 //递减函数 285 reduce: function () { 286 console.log("调用reduce") 287 if (this.nums > 0) { 288 this.nums = this.nums - 1 289 } 290 291 }, 292 //求和 293 sum: function () { 294 console.log("调用sum函数") 295 // 减0是为了防止字符串转为数字运算 296 return (this.mathematics - 0) + (this.english - 0) 297 }, 298 deletes: function (event) { 299 // event代表的是Dom原生事件，Vue.js它会自动的将它传入进来 300 // 弹窗显示tips的内容 301 alert(this.tips) 302 //弹窗显示Dom原生事件的内容 303 alert(event.target.innerHTML) 304 305 }, 306 warn: function (name, event) { 307 // 如果说函数有多个参数，而需要使用原生事件，则需要使用$event作为参数传入 308 alert(name + '：' + event.target.tagName) 309 }, 310 doThis: function () { 311 this.numm++ 312 }, 313 todo: function () { 314 alert("todo......") 315 }, 316 todo1: function () { 317 alert("todo1......") 318 }, 319 onSubmit: function () { 320 alert("跳转被阻止") 321 }, 322 keyEnter: function () { 323 alert("按了Enter键") 324 }, 325 keyDelete: function () { 326 alert("Delete") 327 } 328 }, 329 // 计算属性 ，会进行缓存，只在相关响应式依赖发生改变时，它们才会重新求值 330 computed: { 331 sum1: function () { 332 console.log("调用sum1函数") 333 return (this.mathematics - 0) + (this.english - 0) 334 }, 335 sum2: { 336 // 获取数据 337 get: function () { 338 console.log("调用get") 339 return (this.mathematics - 0) + (this.english - 0) 340 }, 341 // 设置数据 342 set: function (newvalue) { 343 console.log("调用set") 344 var avg = newvalue / 2 345 this.mathematics = avg 346 this.english = avg 347 } 348 } 349 350 }, 351 // 监听 352 watch: { 353 mathematics: function (newValue, oldValue) { 354 // newValue是新的值 355 console.log("调用watch监听") 356 this.sum3 = (newValue - 0) + (this.english - 0) 357 } 358 359 }, 360 }) 361 // 第一个参数是被监听的属性名，第二个是回调函数 362 vm.$watch('english', function (newvalue) { 363 console.log("调用$watch()监听") 364 this.sum4 = (newvalue - 0) + (this.mathematics - 0) 365 }) 366 vm.$watch('sum4', function (newvalue) { 367 console.log("监控sum4") 368 var avgs = newvalue / 2 369 this.mathematics = avgs 370 this.english = avgs 371 }) 372 </script> 373 </body> 374 375 </html>