Introduction-to-Vuejs-Development_1-05

Vue.js開発入門＞ Chapter 1　Vue.jsって何

05　まとめ†

Vue.jsの基本的な使い方

hello.html
#code(html){{{

!DOCTYPE html>

html>

head>

   <meta charset="UTF-8">
   <title>Vue.js sample</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

/head>

body>

   <div id="app">
       <p> {{myText}} </p>
   </div>

   <script>
       new Vue({
           el: "#app",
           data: {
               myText: 'Hello, world!'
           }
       })
   </script>

/body>

/html>
}}}

vue.jsを読み込む。
（ここではCDNのリンクを張っている）
Vue.jsとつながる要素を作る。
（<div id="app">の部分）
scriptタグでVueインスタンスを作る。
（new Vue()の部分）
Vueインスタンスで表示データを用意する。
（プロパティ data: の部分）
データと表示をつなげる。
（appという名前でつなげている部分。<div id="app">とel: "#app"で同じ「app」という名前を指定）

Vue.jsで作るWebアプリの基本骨格は、こんなパーツで構成されているんですね。
Vue.jsの基本的な使い方はシンプルで、特に複雑なルールではないと思いました。

#html{{

h3 class="well">メニュー</h3>
}}

#html{{

h3 class="well">まとめ</h3>
}}

DApps (Web 3.0)
Haskell
OCaml

#html{{

!-- Google Ads -->

script type="text/javascript"><!--
google_ad_client = "ca-pub-1656096348298445";
/* sagasite.info_250x250_20110808 */
google_ad_slot = "6542397273";
google_ad_width = 250;
google_ad_height = 250;

/script>

script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

/script>
}}

05　まとめ†

最新の10件

人気の10件

Introduction-to-Vuejs-Development_1-05

05 まとめ†

最新の10件

人気の10件

05　まとめ†