vue(1)-Vue實例和一些Vue的特性

Vue 實例#

例如，在 HTML 中有

<div id='app'>

</div>

在 JavaScript 中

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

其中，

el 就是 element，指定那個節點就行
data, 就是將要使用的數據，
- vue 有數據綁定的功能
methods, 提供的方法
- 事件觸發可以使用
- 計算屬性可以使用

event#

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