iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
自我挑戰組

從零開始Vuejs系列 第 6

[Day6] Vue.js簡單應用

  • 分享至 

  • xImage
  •  

今天是第六天,那就來寫一下學程式的必經之路Hello World吧

首先是先建立一個.html,接著再按照第三天的步驟引入Vue

這裡是HTML的部分

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{text}}</h2>
    <h2>{{name}}</h2>   
</div>

這裡是JS的部分

<script>
    const app ={
    data(){
        return{
            message:'hello world!!!',
            text:'Vue',
            name:'george'
              }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

data 的資料會到 html 元素中,使用Mustache語法{{}},將 data 資料包在裡面,HTML將會讀取到Vue data
結果如下
https://ithelp.ithome.com.tw/upload/images/20220918/20151006kmzVUxnHpt.png

簡單應用就分享到這邊,我們第七天見


上一篇
[Day5] Vue.js 模板語法:插值
下一篇
[Day7] v-model 與雙向綁定
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言