狠狠撸

Vue.jsとは
Vue.jsは、ユーザーインターフェースを開発するための、Javascriptフレームワークです。
Vue.js人気の理由は学習コストは低い、開発効率化は可能、とにかく手軽なところです。
Github:
https://github.com/yyx990803
Twitter:
https://twitter.com/youyuxi

Vue.jsの特徴
Vue.jsはMVVM（Model View View-Model）と呼ばれるデザインパターンをとっています。

Vue.jsを使ってみましょう
● Vueの導入
方法１: CDN (ちょっとだけテストする場合)
Vue.jsはCDNで読み込むことが出来ます。CDNのスクリプトはbodyタグの閉じタグの
直前に下記を追加します。
<script src=/slideshow/learn-vuejs/250523745/"https:/cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>

● Vueの導入
方法2: npm (小規模の開発の場合)
npmでインストールをするときはシェル（macならターミナル、windowsならコマンド
ライン）で下記のコマンドでインストールします。
# 最新の安定版
$ npm install vue

● Vueの導入
方法3: Vue CLI (やや大規模なシングルページアプリケーション開発の場合)
Vue.js ではオフィシャル CLI を提供します。この CLI にはモダンなフロントエンドワ
ークフローのための、すぐに使えるビルド設定を用意しています。
npm install -g @vue/cli
# OR
yarn global add @vue/cli

● Vueインスタンスの作成
全ての Vue アプリケーションは、Vue 関数で新しい Vue インスタンスを作成
することによって起動されます。
const app = new Vue ( {
// (1) mountする要素
el: '#demo',
...
})

● Vueインスタンス?コンポーネントの作成
パーツ単位でHTMLをまとめるコンポーネント指向ですが、.vue拡張子の
単一ファイルコンポーネントによって、その「パーツを構成するために必
要な HTML?CSS?JSをひとまとめに」して独立した1つのファイルで扱
うことができます。
それぞれ<template>、<script>、<style>が担当します。

● Vueのよく使うプロパティ
data: アプリケーションで使用するデータ
computed: 算出プロパティ
methods: アプリケーションで使用するメソッド

● demoの目標
Demoテスト環境:
https://codepen.io/me-kou/pen/zYzypGV

// (2) アプリケーションで使用するデータ
data: function () {
return {
num: 0,
message: 'Hey! これはVueから受けとたメッセージです！'
}
},
data: アプリケーションで使用するデータ

computed: {
numAddHundred: function() {
return "+100の加工を行いましょう: " + (this.num + 100)
}
},
computed: 算出プロパティ

<button @click="add">このボタンは{{num}}回押された</button>
// (4) アプリケーションで使用するメソッド
methods: {
add: function() {
this.num += 1
}
}
methods: アプリケーションで使用するメソッド

狠狠撸

Learn vue.js

Recommended

More Related Content

What's hot (20)

Similar to Learn vue.js (20)

Learn vue.js

Editor's Notes