iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Modern Web

前端網頁設計學習旅程系列 第 28

Day28_vuejs-get starts

首先先簡單顯示訊息,了解資料傳遞的方式
試用Vue.js的最簡單方法是使用JSFiddle Hello World範例

// html
<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="app">
    {{ message }}
</div>
// js
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
})

https://ithelp.ithome.com.tw/upload/images/20201010/20130503jKdP3eFogc.png


接著試試看 input text

// html
<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
// 
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

https://ithelp.ithome.com.tw/upload/images/20201010/20130503oaxSlXwMs1.png


建立一個list

//html
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
// js
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

https://ithelp.ithome.com.tw/upload/images/20201010/20130503L5JYszsj5o.png


定義一個方法,翻轉input的內容

// html
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
// js
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

https://ithelp.ithome.com.tw/upload/images/20201010/20130503HSN5C5NWaA.png
https://ithelp.ithome.com.tw/upload/images/20201010/20130503WPe8w9l7FG.png


上一篇
Day27_Vuejs-hello world
下一篇
Day29_CSS3
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言