在學習完HTML5、CSS、JavaScript、JQuery之后，我又開始了Vue框架的學習，聽老師說的有好多好多的框架，而許多職位的招聘要求上都是需要掌握的，以后要學的東西還是很多的，在學習中發現越來越簡單，JQuery要比JavaScript要簡單很多，而Vue又要比JQuery容易，附上今日學習代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 <title>Document</title> 9 </head> 10 <body> 11 <h1>1.認識vue框架</h1> 12 <div id="app"> 13 <h3>{{title}}</h3> 14 <p>{{content}}</p> 15 <img v-show="isShow" v-bind:src="imgSrc"> 16 <ul> 17 <li v-for="city in arr">{{city}}</ll> 18 </ul> 19 <input type="checkbox" v-model="isShow" /> 20 </div> 21 <script> 22 var vue = new Vue({ 23 el:"#app", 24 data:{ 25 title:"這是文章的標題", 26 content:"這是文章的內容", 27 imgSrc:"https://i0.hdslb.com/bfs/archive/a9e837a6bc88cfdd970dfb38ff3a3a5167e27441.jpg", 28 isShow:true, 29 arr:["長沙","株洲","湘潭","益陽","岳陽"] 30 } 31 }); 32 </script> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 <title>Document</title> 9 </head> 10 <body> 11 <h1>發表博客</h1> 12 <div id="app"> 13 <input type="text" id="title" v-model="title"> 14 <br/> 15 <textarea id="content" cols="30" rows="10" v-model="content"></textarea> 16 <button onclick="psoArticle()">發表</button> 17 <div id="articleList"> 18 <div v-for="article in articleList"> 19 <h3>{{article.title}}</h3> 20 <p>{{article.content}}</p> 21 </div> 22 </div> 23 </div> 24 <script> 25 var vue = new Vue({ 26 el:"#app", 27 data:{ 28 title:"", 29 content:"", 30 articleList:[] 31 } 32 }); 33 function psoArticle() { 34 vue.articleList.push({ 35 title:vue.title, 36 content:vue.content 37 }); 38 } 39 </script> 40 </body> 41 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 <title>Document</title> 9 </head> 10 <body> 11 <h1>組件的展示</h1> 12 <div id="app"> 13 <article-item v-for="article in articles" v-bind:title="article.title" v-bind:content="article.content"></article-item> 14 </div> 15 <script> 16 Vue.component("articleItem",{ 17 template:` 18 <div> 19 <h3>{{title}}</h3> 20 <p>{{content}}</p> 21 </div>`, 22 props:[ 23 "title", 24 "content" 25 ] 26 }) 27 28 var vue = new Vue({ 29 el:"#app", 30 data:{ 31 articles:[ 32 {title:"I love you",content:"I love you too"}, 33 {title:"Nice to meet you",content:"Hello"}, 34 {title:"文章3",content:"內容3"} 35 ]} 36 }); 37 </script> 38 </body> 39 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 8 <title>Document</title> 9 </head> 10 <body> 11 <button onclick="vue.index = 0">靜夜思</button> 12 <button onclick="vue.index = 1">黃鶴樓送孟浩然之廣陵</button> 13 <button onclick="vue.index = 2">望廬山瀑布</button> 14 <div id="app"> 15 <div v-if="index == 0"> 16 <h3>靜夜思</h3> 17 <p>床前明月光，疑是地上霜。</p> 18 <p>舉頭望明月，低頭思故鄉。</p> 19 </div> 20 <div v-else-if="index == 1"> 21 <h3>黃鶴樓送孟浩然之廣陵</h3> 22 <p>故人西辭黃鶴樓，煙花三月下揚州。</p> 23 <p>孤帆遠影碧空盡，唯見長江天際流。</p> 24 </div> 25 <div v-else-if="index == 2"> 26 <h3>望廬山瀑布</h3> 27 <p>日照香爐生紫煙，遙看瀑布掛前川。</p> 28 <p>飛流直下三千尺，疑是銀河落九天。</p> 29 </div> 30 </div> 31 <script> 32 var vue = new Vue({ 33 el:"#app", 34 data:{ 35 index:-1 36 } 37 }); 38 </script> 39 </body> 40 </html>