Vue練習

參考連結:

Vue(英)】、【Vue(中)】、【Vue.js CDN】、【JSON格式

 

一、練習1:自我介紹

結果:

See the Pen Vue01-自我介紹.0

說明:

S1:開始,複製文字用

  <h1>自我介紹</h1>
  <hr>
  <p>
  我的名字叫做【zoe】,我就任於【電腦公司】,正在學習【Vue】,它可以作為【像填空格的前端框架】
  </p>
我的專業有:

S2:CSS貼入

*{font-family: Microsoft JhengHei;}
.note{
  color:blue; font-weight: bold;
}
ul{
  display: inline-block;
  border:1px solid #880E4F; border-radius:10px;
  margin: 10px; padding: 10px;
}
li{
  margin-left: 20px;
}
ul>span{
  font-weight: bold;
  color:#880E4F;
}

S3: JS

※【new Vue()】,其中V應為大寫

new Vue({
  el:'#app',
  data:{
    name:'zoe',
    commany:'電腦公司',
    learn_thing:'Vue',
    vue_text:'像填空格的前端框架',
    vue_html:'<span>加入資料庫更能靈活應用</span>',
    blog:'https://tips.zoego.tech',
    skills:['辦公室應用軟體','網頁程式開發','動態影像製作']
  }
});

S4: Html 填空加入

v-text】、【v-html】、【v-bind】、【v-for

<div id="app">
  <h1>自我介紹</h1>
  <hr>
  <p>
  我的名字叫做【{{name}}】,我就任於【{{commany}}】,歡迎逛逛<a v-bind:href="blog" target="_blank">我的部落格</a>,正在學習【{{learn_thing}}】,它可以作為【
    <span v-text="vue_text"></span>
 】
  </p>
  <div class="note" v-html="vue_html"></div>
我的專業有:<br>
  
  <ul>
    <span>練習1:細項逐一寫入</span>
    <li>{{skills[0]}}</li>
    <li>{{skills[1]}}</li>
    <li>{{skills[2]}}</li>
  </ul>
  <ul><span>練習2:利用v-for</span>
    <li v-for="skill in skills">{{skill}}</li>
  </ul>  
  <ul><span>練習3:v-text寫入結構</span>
    <li v-for="skill in skills" v-text="skill"></li>
  </ul>
</div>