學習日記【Vue】-2020/12/17
阿新 • • 發佈：2020-12-17
教程地址：https://www.bilibili.com/video/BV12J411m7MG
目前進度：17p/37p
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue.js</title> </head> <body> <div id="app"> <h2 v-text="message+'!'">china</h2> <h2 v-text="infor+'!'">china</h2> <h2>{{ message + '!' }} china</h2> <p v-html="content"></p> <p v-text="content"></p> <input type="button" value="v-on指令" v-on:click="doIt"/> <input type="button" value="v-on雙擊" v-on:dblclick="doIt"/> <input type="button" value="v-on滑鼠移入" v-on:mouseenter="doIt"/> <input type="button" value="v-on簡寫" @click="doIt"/> <h2 @click="changeFood">{{ food }}</h2> <div class="counter"> <button @click="sub"> - </button> <span>{{ num }}</span> <button @click="add"> + </button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"Vue.js", infor:"前端學習", content:"<a href='https://www.baidu.com'>百度一下</a>", food:"蛋炒飯", num:1 }, methods:{ doIt:function(){ alert("do it"); }, changeFood:function(){ // console.log(this.food); this.food += "好好吃"; }, add:function(){ if(this.num < 10){ this.num++; } else { alert("已達到上限"); } }, sub:function(){ if(this.num > 0){ this.num--; } else { alert("已達到下限"); } } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <h2 v-show="true">SHOW</h2> <h2 v-show="isShow">SHOW</h2><!-- 只操作樣式（style） --> <button @click="show">change</button> <p v-if="isShow">Vue.js！</p><!-- 直接對DOM進行操作 --> <h2 v-if="temp>=35">好熱啊</h2> <img :src="imgSrc" alt="" :title="imgTitle+'!'" :style="style" v-bind:class="isActive?'active':''" @click="toggleActive"/> <br /><br /> <img :src="imgSrc" alt="" :title="imgTitle+'!'" :style="style" :class="{active:isActive}" @click="toggleActive"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:true, temp:40, imgSrc:"./shimamura.jpg", imgTitle:"shimamura", isActive:false, style:"width: 200px;height: 200px;" }, methods:{ show:function(){ this.isShow = !this.isShow; }, toggleActive:function(){ this.isActive = !this.isActive; } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <img :src="imgArr[index]" :style="style"/> <br /> <button @click="prev" v-show="index!=0">切換上一張</button> <br /><br /> <button @click="next" v-show="index<imgArr.length-1">切換下一張</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ imgArr:[ "hans/hans_01.png", "hans/hans_02.png", "hans/hans_03.png", "hans/hans_04.png", "hans/hans_05.png", ], index:0, style:"width: 222px;height: 192px;" }, methods:{ prev:function(){ this.index--; }, next:function(){ this.index++; } } }) </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <ul> <li v-for="(it,index) in arr"> 四大城市：{{ index+1 }}.{{ it }} </li> </ul> <button @click="add">新增</button> <button @click="remove">移除</button> <h2 v-for="it in objArr" v-bind:title="it.name"> {{ it.name }} </h2> <input type="button" value="點選" @click="doIt(13,14)"/> <input type="text" @keyup.enter="sayHi"/> <br /><br /> <input type="text" v-model="message" @keyup.enter="getM"/> <h2>{{message}}</h2> <button @click="setM">Change</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ arr:["北京","上海","廣東","深圳"], objArr:[ {name:"jack"}, {name:"rose"} ], message:"Vue.js!" }, methods:{ add:function(){ this.objArr.push({name:"tom"}); }, remove:function(){ this.objArr.shift(); }, doIt:function(m,n){ alert("做it！"); alert(m); alert(n); }, sayHi:function(){ alert("吃了沒"); }, getM:function(){ alert(this.message); }, setM:function(){ this.message = "JavaScript"; } } }) </script> </body> </html>