一、初识Vue
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初识Vue</title> 6 <script type="text/javascript" src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h1>hello,{{name}}</h1> 11 </div> 12 </body> 13 <script> 14 // const x = new Vue({ 15 // el:'#root', 16 // data:{ 17 // name:"张三1" 18 // } 19 // }) 20 21 // 1、el的两种写法 22 // const v = new Vue({ 23 // // el:'', 24 // data:{ 25 // name:"张三2" 26 // } 27 // }) 28 // console.log(v) 29 // 30 // setTimeout(() => { 31 // v.$mount('#root') 32 // },1000); 33 34 // v.$mount('#root') 35 36 // 2、data的两种写法 37 // new Vue({ 38 // el:'#root', 39 // data:{ 40 // name:"张三3" 41 // } 42 // }) 43 44 new Vue({ 45 el: '#root', 46 data: function () { 47 console.log('@@@', this) //this是Vue实例对象 48 return { 49 name: "张三4" 50 } 51 } 52 }) 53 54 </script> 55 </html>
二、模板语法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初识Vue</title> 6 <script type="text/javascript" src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h1>插值(标签体)</h1> 11 <h1>hello,{{name}}</h1> 12 <hr/> 13 <h1>指令(标签属性、标签体内容、绑定事件)</h1> 14 <a v-bind:href="school.url.toUpperCase()">学习{{school.name}}1</a> 15 <a :href="school.url">学习{{school.name}}2</a> 16 </div> 17 </body> 18 <script> 19 new Vue({ 20 el: '#root', 21 data: { 22 name: "张三", 23 school: { 24 name: "李四", 25 url: "http://www.baidu.com/" 26 } 27 } 28 }) 29 30 </script> 31 </html>
三、数据绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据绑定</title> 6 <script type="text/javascript" src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h1>普通写法</h1> 11 <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>--> 12 <!-- 双向数据绑定：<input type="text" v-model:value="name"><br/>--> 13 <h2>简写</h2> 14 单向数据绑定：<input type="text" :value="name"><br/> 15 双向数据绑定：<input type="text" v-model="name"><br/> 16 <!--v-model仅使用在表单数据中--> 17 18 </div> 19 </body> 20 <script> 21 new Vue({ 22 el: '#root', 23 data: { 24 name: "张三", 25 } 26 }) 27 28 </script> 29 </html>
四、数据代理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数据代理</title> 6 // vm(_data{name,address}) 7 // 不用数据代理->{{_data.name}}} 8 // 用数据代理->{{name}}} 本质是getter和setter方法 9 // 通过vm对象代理data对象中属性的操作！！！！！！！！！！！ 10 </head> 11 <body> 12 13 </body> 14 <script> 15 let number = 18 16 17 let person = { 18 name: "张三", 19 sex: "男" 20 } 21 22 Object.defineProperty(person, "age", { 23 // value:18, 24 // enumerable:true, // 是否枚举 25 // writable:true, // 是否修改 26 // configurable:true, //是否删除 27 28 get() { 29 console.log("读取age属性") 30 return number 31 }, 32 33 set(value) { 34 console.log("修改age属性", value) 35 number = value 36 } 37 38 }) 39 // for (let key in person) { 40 // console.log(person[key]) 41 // } 42 console.log(person) 43 </script> 44 45 </html>
五、事件处理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件处理</title> 6 <script src="js/vue.js"></script> 7 <style> 8 *{ 9 margin-top: 20px; 10 } 11 12 .demo1{ 13 height: 50px; 14 background-color: skyblue; 15 } 16 17 .box1{ 18 padding: 5px; 19 background-color: skyblue; 20 } 21 22 .box2{ 23 padding: 5px; 24 background-color: orange; 25 } 26 .list{ 27 width: 200px; 28 height: 200px; 29 background-color: peru; 30 overflow: auto; 31 } 32 li{ 33 height: 100px; 34 } 35 36 </style> 37 38 39 </head> 40 <body> 41 <div id="root"> 42 <h1>你好，{{name}}</h1> 43 <button v-on:click="show1()">提示信息1（不传参）</button> 44 <button @click="show2($event,66)">提示信息2（传参）</button> 45 46 <!-- ################################################################ --> 47 <!-- 阻止默认时间 --> 48 <a href="http://www.baidu.com" @click.prevent="show3()">提示信息3</a> 49 <!-- 阻止事件冒泡 --> 50 <div class="demo1" @click="show3()"> 51 <button @click.stop="show3()">提示信息3-1</button> 52 </div> 53 <!-- 事件只触发一次 --> 54 <button @click.once="show3()">提示信息3-2</button> 55 <!-- 使用事件的捕获模式 --> 56 <div class="box1" @click.capture="showMsg(1)"> 57 div1 58 <div class="box2" @click="showMsg(2)"> 59 div2 60 </div> 61 </div> 62 <!-- 只有event.target是当前操作的元素时才触发事件 --> 63 <div class="demo1" @click.self="show4()"> 64 <button @click="show4()">提示信息4</button> 65 </div> 66 <!-- 事件的默认行为立即执行，无需等待事件回溯执行完毕 --> 67 <ul @wheel.passive="demo()" class="list"> // @scroll="demo()" 68 <li>1</li> 69 <li>2</li> 70 <li>3</li> 71 <li>4</li> 72 </ul> 73 74 </div> 75 </body> 76 <script> 77 const vm = new Vue({ 78 el:'#root', 79 data:{ 80 name:"张三", 81 }, 82 methods:{ 83 show1(){ 84 // console.log(event.target) 85 // console.log(event.target.innerText) 86 alert("提示信息1（不传参）") 87 }, 88 show2(event,number){ 89 console.log(event,number) 90 alert("提示信息2（传参）") 91 }, 92 show3(){ 93 alert("提示信息3") 94 }, 95 showMsg(msg){ 96 console.log(msg) 97 }, 98 show4(){ 99 // console.log(event.target) 100 alert("提示信息4") 101 }, 102 demo(){ 103 for (let i = 0; i < 10000; i++) { 104 console.log("@") 105 } 106 console.log("累") 107 }, 108 109 } 110 }) 111 </script> 112 </html>
六、计算属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算属性</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 姓：<input type="text" v-model="firstName"> <br><br> 11 名：<input type="text" v-model="lastName"> <br><br> 12 全名：<span>{{fullName}}</span><br><br> 13 全名：<span>{{fullName2}}</span><br><br> // 简写，不需要括号，不是函数！！！！！！！ 14 </div> 15 </body> 16 <script> 17 const vm = new Vue({ 18 el:'#root', 19 data:{ 20 firstName:"张", 21 lastName:"三" 22 }, 23 computed:{ 24 //与methods相比，computed存在缓存机制 25 fullName:{ 26 // get什么时候调用？ 27 // 1、初次读取fullName时 2、所依赖的数据发生变化时 28 get(){ 29 return this.firstName+"-"+this.lastName; 30 }, 31 // set什么时候调用？ 当fullName被修改时 32 set(value){ 33 // console.log(value) 34 const arr = value.split("-") 35 this.firstName = arr[0] 36 this.lastName = arr[1] 37 } 38 }, 39 fullName2(){ //简写 40 return this.firstName+"-"+this.lastName; 41 } 42 } 43 }) 44 45 </script> 46 47 </html>
七、监视属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>监视属性</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h2>今天天气很{{info}}</h2> 11 <!-- <button @click="flag = !flag">点击切换</button>--> 12 <button @click="changeWeather">点击切换</button> 13 <br> 14 <h3>a的值是{{number.a}}</h3> 15 <button @click="number.a++">点击一下a++</button> 16 <h3>b的值是{{number.b}}</h3> 17 <button @click="number.b++">点击一下b++</button> 18 </div> 19 </body> 20 <script> 21 const vm = new Vue({ 22 el:'#root', 23 data:{ 24 flag:true, 25 number:{ 26 a:1, 27 b:1, 28 } 29 }, 30 computed:{ 31 info(){ 32 return this.flag ? "炎热":"凉爽" 33 } 34 }, 35 methods:{ 36 changeWeather(){ 37 return this.flag = !this.flag; 38 } 39 }, 40 watch:{ 41 flag:{ //正常写法 42 // immediate:true, //初始化时让handler调用一下 43 handler(newValue,oldValue){ // flag发生改变时调用 44 console.log("flag被修改了",newValue,oldValue) 45 } 46 }, 47 48 // flag(newValue,oldValue){ //简写(不能配置其他) 49 // console.log("flag被修改了",newValue,oldValue) 50 // }, 51 52 "number.a":{ // 多级结构 53 handler(newValue,oldValue){ // flag发生改变时调用 54 console.log("a被修改了",newValue,oldValue) 55 } 56 }, 57 58 number: { //所有属性变化 59 deep:true, 60 handler(newValue,oldValue){ 61 console.log("number被修改了",newValue,oldValue) 62 } 63 } 64 65 } 66 }) 67 68 // vm.$watch("flag",{ //正常写法 69 // immediate:true, //初始化时让handler调用一下 70 // handler(newValue,oldValue) { // flag发生改变时调用 71 // console.log("flag被修改了",newValue,oldValue) 72 // } 73 // }) 74 75 // vm.$watch("flag",function (newValue, oldValue) { //简写(不能配置其他) 76 // console.log("flag被修改了",newValue,oldValue) 77 // }) 78 79 </script> 80 </html>
八、计算属性与监视
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算属性与监视</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 姓：<input type="text" v-model="firstName"> <br><br> 11 名：<input type="text" v-model="lastName"> <br><br> 12 全名：<span>{{fullName}}</span><br><br> 13 </div> 14 </body> 15 <script> 16 // computed能完成的功能，watch都可以完成；watch能完成的功能，computed不一定能完成 17 // Vue管理的函数最好写成普通函数；不被Vue管理的函数（定时器）最好写成箭头函数！！！！！！！！！ 18 const vm = new Vue({ 19 el:'#root', 20 data:{ 21 firstName:"张", 22 lastName:"三", 23 fullName:"张-三" 24 }, 25 watch:{ 26 firstName(val){ 27 setTimeout(()=>{ 28 this.fullName = val + "-" + this.lastName 29 },1000) 30 }, 31 lastName(val){ 32 this.fullName = this.firstName + "-" + val 33 } 34 } 35 }) 36 37 </script> 38 </html>
九、绑定样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>绑定样式</title> 6 <script src="js/vue.js"></script> 7 <style> 8 .basic{ 9 width: 400px; 10 height: 100px; 11 border: 1px solid black; 12 } 13 .happy{ 14 border: 4px solid red;; 15 background-color: rgba(255, 255, 0, 0.644); 16 background: linear-gradient(30deg,yellow,pink,orange,yellow); 17 } 18 .sad{ 19 border: 4px dashed rgb(2, 197, 2); 20 background-color: gray; 21 } 22 .normal{ 23 background-color: skyblue; 24 } 25 26 .at1{ 27 background-color: yellowgreen; 28 } 29 .at2{ 30 font-size: 30px; 31 text-shadow:2px 2px 10px red; 32 } 33 .at3{ 34 border-radius: 20px; 35 } 36 </style> 37 </head> 38 <body> 39 40 <div id="root"> 41 <!--绑定class样式--> 42 <!-- 字符串写法，适用于样式类名不确定，需动态获取--> 43 <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br> <br> 44 <!-- 数组写法，适用于绑定样式个数不确定，名字不确定--> 45 <div class="basic" :class="classArr">{{name}}</div> <br> <br> 46 <!-- 对象写法，适用于绑定样式个数确定，名字确定，但要动态决定--> 47 <div class="basic" :class="classObj">{{name}}</div> <br> <br> 48 49 <!--绑定style样式--> 50 <!-- 对象写法 --> 51 <div class="basic" :style="styleObj">{{name}}</div> <br> <br> 52 <!-- 数组写法 --> 53 <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> <br> <br> 54 </div> 55 </body> 56 57 <script> 58 new Vue({ 59 el:'#root', 60 data:{ 61 name:'哈哈', 62 mood:'normal', 63 classArr:['at1','at2','at3'], 64 classObj:{ 65 at1:false, 66 at2:false 67 }, 68 styleObj:{ 69 fontSize:'40px', //font-size 70 color:"red" 71 }, 72 styleObj2:{ 73 backgroundColor:"orange" 74 } 75 }, 76 methods:{ 77 changeMood(){ 78 const arr = ['happy','sad','normal'] 79 this.mood = arr[Math.floor(Math.random()*3)] 80 } 81 } 82 }) 83 </script> 84 </html>
十、条件渲染
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>条件渲染</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="root"> 11 <h2>当前的n值为{{n}}</h2> 12 <button @click="n++">点击我n+1</button> 13 <!-- v-show会使页面代码存在--> 14 <!-- <div v-show="false">欢迎来到{{name}}</div>--> 15 <!-- <div v-show="1===1">欢迎来到{{name}}</div>--> 16 17 <!-- v-if会使页面代码消失--> 18 <!-- <div v-if="false">欢迎来到{{name}}</div>--> 19 <!-- <div v-if="1===1">欢迎来到{{name}}</div>--> 20 21 <!-- <div v-if="n===1">Angular</div>--> 22 <!-- <div v-if="n===2">React</div>--> 23 <!-- <div v-if="n===3">Vue</div>--> 24 25 <!-- <div v-if="n===1">Angular</div>--> 26 <!-- <div v-else-if="n===1">React</div>--> 27 <!-- <div v-else-if="n===3">Vue</div>--> 28 <!-- <div v-else>哈哈</div>--> 29 30 <template v-if="n===1"> 31 <div>Angular</div> 32 <div>React</div> 33 <div>Vue</div> 34 </template> 35 </div> 36 </body> 37 <script> 38 new Vue({ 39 el:'#root', 40 data:{ 41 n:0, 42 name:'中国', 43 } 44 }) 45 </script> 46 </html>
