Vue.js 覚書

基本コマンド

vue serve [vue_file] -> vue server起動
vue create [app_name] -> APP作成
yarn serve -> プロジェクトでserver起動
yarn build -> distフォルダにbuild
vue ui -> プロジェクトをGUIで管理

---

v-xx(Virtual Node)

v-xｘとかくことで仮想ノードを作成することができる

v-html

HTMLを出力する

<p v-html="messages"></p>

こうすると、vueでmessages=<h2 style="color:red;">test</h2>のように動的にHTMLを設定できる

v-bind

属性に値をバインドする

<p v-bind:style="custom_style"></p>

こうすると、vueでcustom_style='font-size: '+event.target.value のように動的に設定できる

※v-bindを省略もできる

<p :style="custom_style">

v-if, v-else

条件付きレンダリング

<p v-if="条件">...</p>
<p v-else>...</p>

こうすると、条件付きでレンダリングを制御できる。

またtempalteを使うとまとめられる

<template v-if="条件">
  <p>...</p>
  <p>...</p>
</template>

v-for

繰り返し

<p v-for="変数 in 配列">...</p>

v-model

バインドする

<input type="text" v-model="input_text">

こうするとinput_textという変数に入力されたものが入ってくる

$emit

これを使うと親コンポーネントにイベントを遅れる

子コンポーネント
this.$emit('result-event', this.input);

親コンポーネント
<HelloWorldv-on:result-event="appAction" />
---
methods:{
    appAction: function(message) {
      this.result = '(*** you send:"' + message + '". ***)';
    }
  }

Nuxt.js

nuxt install

packege.json

{
    "name": "my-app",
    "scripts": {
        "dev": "nuxt"
    }
}

npm install コマンドでNuxt.jsと必要なパッケージをインストールする

npm install --save nuxt

npm をdevサーバーを起動

npm run dev