在学习完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>