vue.js の学習001

HTML コード

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

JavaScript コード

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

• Vueインスタンスと DOM がリンクされた。
• ブラウザのコンソールを使い、app.message に値を入れると画面上にすぐに反映される。
• 関連するデータや処理をVueオブジェクトに閉じ込めている。Vueオブジェクトはスコープの役割もしている。

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" などがある。

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;
  };
})());

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() + ')' });
});

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" と省略できる。

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!'
  }
});

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' },
      ]
    }
});

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!"
});

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
      }
    }
});

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
      )
    }
});