Vue.js Sample

by yshrkn

HTML

<div id="app">
  {{ message }}
  <p :title=title>test</p>
</div>

JavaScript

const vm = new Vue({
	el: '#app',
  data() {
  	return {
    	message: 'Hello World!',
      title: 'my title',
    }
  },
  // データ変更監視1
  watch: {
  	message(val) {
    	this.message = '変えられないよ'
  		console.log(this.message);
    }
  }
});

// データ変更監視2
vm.$watch(function() {
	// 監視するデータを返却する関数
	return this.message
}, function(data) {
	// 第一引数が変更されたときにフックされる関数
	console.log('変更後の値：', data);
});

// 確認用
window.vm = vm;