Vue.js學習帳 - 2. 基本認識


上次就講咗乜嘢係Vue.js (https://littpi.net/blog/post/22),今次就講下基本嘅一啲應用。
一切嘅開始,"Hello world"。

首先就當然要將Vue.js嘅library放入去先啦。官方網站已經有講解點樣去用架啦(https://vuejs.org/v2/guide/#Getting-Started)。我哋今次就用Development嘅套件。
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Playground</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
  </body>
</html>

出黎應該係咁嘅畫面...
HTML好直接咁整咗{{ message }}出黎...

點解會咁?嘛,你jQuery都要指定咗個DOM嘅element先做到嘢。Vue.js都唔例外。而家我哋設定返Vue.js去縛定#app,意思係#app入面有Vue.js識別到嘅句式都會被render。

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Playground</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    
    <script>
    let app = new Vue({
        el: "#app"
    });
    </script>
  </body>
</html>

{{ message }}消失咗。

當指定咗後就會發現{{ message }}消失咗。原因係Vue.js讀到#app入面有俾雙大括號(Double curly brackets)包住嘅元素,而俾佢包住嘅嘢就需要由Vue.js去render返出黎。喺呢個例子入面,message就係Vue.js入面嘅變數,所以我哋要指定一個值俾message。
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world.'
  }
});

咁就會出到文章一開頭張圖嘅效果架啦。

咁出咗個Hello world當然唔代表啲乜嘢,但係正如第一篇文章所講,佢係一個data-driven嘅JS套件。如果用Chrome嘅話可以安裝一個叫Vue Devtools嘅extension,佢係由Vue.js官方開發,用黎測試你嘅Vue.js運作架。當然如果你係用production script嘅話佢就會render唔到啦。

Vue Devtools套件。

呢個套件可以俾你即時實作任何嘅data轉換,比如我可以將Hello world.轉換成其他嘢。
Save後就會變成新嘅value。

呢個特性就涉及到Vue.js嘅同element attribute嘅binding啦,而呢樣嘢我會下次先講。

無錯,我下次應該就會講v-bind同v-on...唔好鬧我寫得慢啦。

P.S.: 如果本身用Laravel嘅話,由於blade engine都係用double curly brackets作為declarative rendering嘅做法,所以如果要喺blade template入面用Vue.js而需要到用Vue嘅雙大括號嘅話就要咁寫:
@{{ message }}
加個@喺前面,blade engine就會ignore佢而過俾client side去編譯佢。

Powered by Half-moon Production.

Copyright © 2011-2020 by 泣雨家的雜物房. Version 1.5.2.

Vue.js學習帳 - 2. 基本認識


上次就講咗乜嘢係Vue.js (https://littpi.net/blog/post/22),今次就講下基本嘅一啲應用。
一切嘅開始,"Hello world"。

首先就當然要將Vue.js嘅library放入去先啦。官方網站已經有講解點樣去用架啦(https://vuejs.org/v2/guide/#Getting-Started)。我哋今次就用Development嘅套件。
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Playground</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
  </body>
</html>

出黎應該係咁嘅畫面...
HTML好直接咁整咗{{ message }}出黎...

點解會咁?嘛,你jQuery都要指定咗個DOM嘅element先做到嘢。Vue.js都唔例外。而家我哋設定返Vue.js去縛定#app,意思係#app入面有Vue.js識別到嘅句式都會被render。

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Playground</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    
    <script>
    let app = new Vue({
        el: "#app"
    });
    </script>
  </body>
</html>

{{ message }}消失咗。

當指定咗後就會發現{{ message }}消失咗。原因係Vue.js讀到#app入面有俾雙大括號(Double curly brackets)包住嘅元素,而俾佢包住嘅嘢就需要由Vue.js去render返出黎。喺呢個例子入面,message就係Vue.js入面嘅變數,所以我哋要指定一個值俾message。
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world.'
  }
});

咁就會出到文章一開頭張圖嘅效果架啦。

咁出咗個Hello world當然唔代表啲乜嘢,但係正如第一篇文章所講,佢係一個data-driven嘅JS套件。如果用Chrome嘅話可以安裝一個叫Vue Devtools嘅extension,佢係由Vue.js官方開發,用黎測試你嘅Vue.js運作架。當然如果你係用production script嘅話佢就會render唔到啦。

Vue Devtools套件。

呢個套件可以俾你即時實作任何嘅data轉換,比如我可以將Hello world.轉換成其他嘢。
Save後就會變成新嘅value。

呢個特性就涉及到Vue.js嘅同element attribute嘅binding啦,而呢樣嘢我會下次先講。

無錯,我下次應該就會講v-bind同v-on...唔好鬧我寫得慢啦。

P.S.: 如果本身用Laravel嘅話,由於blade engine都係用double curly brackets作為declarative rendering嘅做法,所以如果要喺blade template入面用Vue.js而需要到用Vue嘅雙大括號嘅話就要咁寫:
@{{ message }}
加個@喺前面,blade engine就會ignore佢而過俾client side去編譯佢。