vue（1）- vueインスタンスといくつかのvueの特徴

Vue インスタンス#

例えば、html には

<div id='app'>

</div>

JavaScript では

new Vue({
    el:'#app',
    data:{},
    methods:{}
});

この中で、

el は element を指定します
data は使用するデータです
- Vue にはデータバインディングの機能があります
methods は提供されるメソッドです
- イベントトリガーに使用できます
- 計算プロパティに使用できます

イベント#

v-on:click="function_name"のようにイベントを処理します

v-onは@で代替できます

例えば

<div id="app">
    <h1>age: {{age}}</h1>
    <butto v-on:click="add">add</button>
    <button v-on:click="substract">mines</button>
    <div id="canvars" @mousemove="updateXY">
        {{x}},{{y}}
    </div>
</div>

var vw = new Vue({
    el:'#app',
    data:{
        age:10,
        x:0,
        y:0
    },
    methods:{
        add:function (){
            this.age++;
        },
        substract:function (){
            this.age--;
        },
        updateXY:function (event){
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }   
});

関数に引数を渡すこともできます。

計算プロパティ#

HTML で計算プロパティを使用する

<a>{{function()+'asda'+a}}</a>

もちろん、手動で値を更新するためにwatchを使用することもできます。例えば、公式ウェブサイトの例：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
});