Vue入門一：基礎概念
阿新 • • 發佈：2020-12-19
vue入門學習筆記，vue.js下載
目錄：
- 掛載點、模板、例項之間的關係
- 資料、事件和方法
- 屬性繫結和雙向資料繫結
- 計算屬性和偵聽器
- v-if，v-show與v-for指令
- 案例to-do-list開發
-
掛載點、模板、例項之間的關係
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> </div> <script> <!--例項--> new Vue({ el:"#app",<!--掛載點--> template:"<h1>xxx{{msg}}</h1>",<!--模板--> data:{ msg:"hello world" } }) </script> </body> </html>
-
資料、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <metacharset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <h1>hello {{msg}}</h1><!--插值表示式{{}}--> <h1 v-text="text_fasle"></h1><!-- v-text 不轉義--> <div v-html="html_true"></div><!-- v-html 轉義--> <div v-on:click="handleClick">{{content}}</div><!-- 點選事件 v-on:click--> <div @click="handleClick">{{content}}</div><!-- 點選事件 @click --> </div> <script> new Vue({ el:"#app", data:{<!--資料--> msg:"world", text_fasle:"<h1>False</h1>", html_true:"<h1>True</h1>", content:"hello" }, methods:{<!--方法定義--> handleClick:function(){ this.content="world" } } }) </script> </body> </html>
-
屬性繫結和雙向資料繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div v-bind:title="title">hello world</div><!-- 屬性繫結 v-bind:title --> <div :title="title">hello world</div><!-- 屬性繫結 :title --> <input :value="content"/><!-- 單向資料繫結 即上面的屬性繫結 --> <br> <input v-model="content"/><!-- 雙向資料繫結 v-model --> <div>{{content}}</div> </div> <script> new Vue({ el:"#app", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>
-
計算屬性和偵聽器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> 姓：<input v-model="firstName"/> 名：<input v-model="lastName"/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:"#app", data:{ firstName:"", lastName:"", count:0 }, computed:{<!-- 計算屬性 --> fullName:function(){ return this.firstName+this.lastName } }, watch:{<!-- 偵聽器 --> fullName:function(){ this.count++ } } }) </script> </body> </html>
-
v-if，v-show與v-for指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div v-if="showd">hello world</div><!-- v-if 判斷 值為false直接將元素從dom中刪除 --> <div v-show="showd">hello world</div><!-- v-show 判斷 值為false將元素從dom中隱藏 --> <button @click="handleClick">toggle</button> <ul> <li v-for="(item,index) of items" :key="index">{{item,index}}</li> <!-- v-for 迴圈顯示資料 其中:key提高渲染效率，唯一 --> </ul> </div> <script> new Vue({ el:"#app", data:{ showd:true, items:[1,2,3] }, methods:{ handleClick:function(){ this.showd=!this.showd } } }) </script> </body> </html>
-
案例：to-do-list開發
輸入的內容可以在下面實時顯示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleClick">提交</button> </div> <ul> <li v-for="(item,index) of itemValues" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ inputValue:"", itemValues:[] }, methods:{ handleClick:function(){ this.itemValues.push(this.inputValue) this.inputValue="" } } }) </script> </body> </html>