vue.js の学習001

Vue.js の公式ドキュメントを読む。
1つ目のサンプル(app)
{{ message }}

HTML コード

<div id="app">
    {{ message }}
</div>

JavaScript コード

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
  • Vueインスタンスと DOM がリンクされた。
  • ブラウザのコンソールを使い、app.message に値を入れると画面上にすぐに反映される。
  • 関連するデータや処理をVueオブジェクトに閉じ込めている。Vueオブジェクトはスコープの役割もしている。
v-bind (app-2)
Hover your mouse over me for a few seconds to see my dynamically bound title!

HTML コード

<div id="app-2">
    <span v-bind:title="message">
      Hover your mouse over me for a few seconds
      to see my dynamically bound title!
    </span>
</div>

JavaScript コード

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + (new Date()).toLocaleString()
    }
});
  • HTMLタグの属性に対して、Vueインスタンスのプロパティを紐付けられる。
  • v-bind:title="xxxx" は、:title="xxxx" と省略できる。
  • :name="xxxx", :value="xxxx", :checked="xxxx" などがある。
Conditionals and Loops (v-if, v-for) (app-3)
Now you see me

HTML コード

<section class="app">
  <div id="app-3">
    <span v-if="seen">Now you see me</span>
  </div>
</section>
<section class="ctrl">
  <button type="button" id="btn-3">seen = false</button>
</section>

JavaScript コード

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});
document.querySelector('#btn-3').addEventListener('click', (function() {
  var flg = false;
  return function(event) {
    app3.seen = flg;
    if (flg) {
      this.textContent = 'seen = false';
    } else {
      this.textContent = 'seen = true';
    }
    flg = !flg;
  };
})());

app-4

  1. {{ todo.text }}

HTML コード

<section class="app">
  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
      {{ todo.text }}
      </li>
    </ol>
  </div>
</section>
<section class="ctrl">
  <button type="button" id="btn-4">app4.todos.push({ text: 'New item' })</button>
</section>

JavaScript コード

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' },
    ]
  }
});
document.querySelector('#btn-4').addEventListener('click', function() {
  app4.todos.push({ text: 'New item (' + (new Date()).toLocaleString() + ')' });
});
Handling User Input (v-on, v-model) (app-5)

{{ message }}


HTML コード

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JavaScript コード

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
});
  • v-on:click="xxxx" は、@click="xxxx" と省略できる。

app-6

{{ message }}


HTML コード

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

JavaScript コード

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
});
Composing with Components (app-7)

HTML コード

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

JavaScript コード

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
});

var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: 'Vegetables' },
        { id: 1, text: 'Cheese' },
        { id: 2, text: 'Whatever else humans are supposed to eat' },
      ]
    }
});
Computed Properties and Watchers (app-8)

Computed Properties

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"


HTML コード

<h2>Computed Properties</h2>
<section class="app">
  <div id="example-8">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</section>
<section class="ctrl">
  <button type="button" id="btn-8">vm1.message = 'Vue is good!'</button>
</section>

JavaScript コード

var vm1 = new Vue({
    el: "#example-8",
    data: {
      message: 'Hello'
    },
    // template 内に直接指定することができるメソッド
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
});
document.querySelector('#btn-8').addEventListener('click', function() {
  vm1.message = "Vue is good!"
});

app-9

{{ fullName }}

HTML コード

<section class="app">
  <div id="demo9">{{ fullName }}</div>
</section>

JavaScript コード

var vm9 = new Vue({
    el: "#demo9",
    data: {
      firstName: "Foo",
      lastName: "Bar"//,
      //fullName: "Foo Bar"
    },
    computed: {
      fullName: function () {
        return this.firstName + " " + this.lastName
      }
    }
});

watch-example

Watchers

Ask a yes/no question:

{{ answer }}


HTML コード

<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

JavaScript コード

var watchExampleVM = new Vue({
    el: '#watch-example',
    data: {
      question: '',
      answer: 'I cannot give you an answer until you ask a qestion!'
    },
    watch: {
      question: function (newQuestion) {
        this.answer = 'Waiting for you to stop typing...'
        this.getAnser()
      }
    },
    methods: {
      getAnser: _.debounce(
        function() {
          if (this.question.indexOf('?') === -1) {
            this.answer = 'Questions usually contain a question mark. ;-)'
            return
          }
          this.answer = 'Thinking...'
          var vm = this
          axios.get('https://yesno.wtf/api')
            .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
            })
            .catch(function(error) {
                vm.answer = 'Error! Could not reach the API. ' + error
            })
        },
        500
      )
    }
});
Components: emit (app-10)

子から親へ処理を促す ($emit を利用する方法)

クリック数合計:{{ total }}


HTML コード

<div id="example-10">
  <p>クリック数合計:{{ total }}</p>
  <button-counter v-on:increment="incParent"></button-counter>
</div>

JavaScript コード

// Child Component
Vue.component('button-counter', {
  template: `<button v-on:click="incChild">Click me!: {{ counter }}</button>`,
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incChild: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
});

// Parent Component
new Vue({
  el: '#example-10',
  data: {
      total: 0
  },
  methods: {
      incParent: function () {
          this.total += 1
      }
  }
})
  • 親と子で、値は別々に持っている。
  • 子側から this.$emit('increment') を実行し、incrementイベントを発火している。
  • 親側では v-on:イベント名 を使ってイベントを補足している。
  • API — Vue.js
  • Vue.jsのコンポーネント入門 - Qiita

参照:Computed Properties and Watchers — Vue.js