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

Vue 实例#

比如，html 中有

<div id='app'>

</div>

在 js 中

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