前端框架 Vuejs

前端框架百百種，React、Angular 及 Vue 三套相當熱門的前端框架，其實還有更多框架沒有在這邊被提到。

React是Facebook開發的，Angular是google開發的，而Vue是一個人開發的。

有興趣可以去用用看，但我們這堂課會以Vue去做開發，因為簡單好上手。

Vuejs起手式

先打開官方文件

然後引用Vuejs的套件

<script src="https://unpkg.com/vue"></script>

接著讓我們跟著官方文件的教學練習吧！

  1. 撰寫hello world程式
<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

  1. v-bind (可以用:代替)

    <!-- bind an attribute -->
<img v-bind:src="imageSrc">
<!-- shorthand -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">

  2. v-if v-else

    <div id="app">
 <h1 class="error">分</h1>
 <div v-show="score">
     <p v-if="score >= 6">Vue.js so easy</p>
     <p v-else>still learning Vue.js</p>
 </div>
 <p>你覺得vue.js簡單嗎？請輸入1~10分</p>
 <input type="text" v-model="score">
</div>

  3. v-for

    <ul id="example-1">
<li v-for="item in items">

</li>
</ul>

    var example1 = new Vue({
el: '#example-1',
data: {
 items: [
   { message: 'Foo' },
   { message: 'Bar' }
 ]
}
})

  4. v-on (可以用@代替)

  5. v-model

    <input v-model="message" placeholder="edit me">
<p>Message is: </p>

  6. component

  7. methods

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})
// you can invoke methods in JavaScript too
example2.greet() // -> 'Hello Vue.js!'

  1. computed

    var vm = new Vue({
el: '#demo',
data: {
 firstName: 'Foo',
 lastName: 'Bar'
},
computed: {
 fullName: function () {
   return this.firstName + ' ' + this.lastName
 }
}
})

  2. v-if vs v-show

範例

之前出現在教案中的avatar-maker，就是用Vuejs寫的，載下來研究看看吧！

參考資料：

results matching ""

    No results matching ""