vue数据

data

类型：Object | Function
限制：组件的定义只接受 function。
示例：

var data = { a: 1 }

// 直接创建一个实例
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

props

类型：Array | Object

示例：

// 简单语法
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// 对象语法，提供验证
Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
   
      }
    }
  }
})

computed

类型：{ [key: string]: Function | { get: Function, set: Function } }

示例：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

methods

类型：{ [key: string]: Function }
详细：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

示例：

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

生命周期钩子

beforeCreate
create
beforeMount
mounted
beforeUpdate
updated
activated

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
  {{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
  el : "#app",
  data : {
      msg : "hi vue",
  },
  //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  beforeCreate:function(){
      console.log('beforeCreate');
  },
  /* 在实例创建完成后被立即调用。
  在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
  然而，挂载阶段还没开始，$el 属性目前不可见。 */
  created :function(){
      console.log('created');
  },
  //在挂载开始之前被调用：相关的渲染函数首次被调用
  beforeMount : function(){
      console.log('beforeMount');

  },
  //el 被新创建的 vm.$el 替换, 挂在成功  
  mounted : function(){
      console.log('mounted');
  
  },
  //数据更新时调用
  beforeUpdate : function(){
      console.log('beforeUpdate');
          
  },
  //组件 DOM 已经更新, 组件更新完毕 
  updated : function(){
      console.log('updated');
          
  }
});
setTimeout(function(){
  vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

实例方法/数据

$watch

用法：

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    {{a}}{{b}}
</div>

<script type="text/javascript">
var data = { a : 1 };
var data = { b : 1 };
var vm = new Vue({
    el   : "#app",
    data : data
});

vm.$watch( 'b', function(newVal, oldVal){
    console.log(newVal, oldVal);
})

vm.$data.a = "test...."
vm.$data.b = "hhhh...."
</script>

</body>

$set

参数：
- {Object | Array} target
- {string | number} propertyName/index
- {any} value
返回值：设置的值。
用法：

这是全局 Vue.set 的别名。

$delete

参数：
- {Object | Array} target
- {string | number} propertyName/index
用法：

这是全局 Vue.delete 的别名。

指令

v-if
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-text
v-html
v-show

组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

img

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

props定义一个属性，可以通过该属性向子组件传值
this.$emit()自定义事件，第一个参数为事件的名称，可以通过第二个参数向父组件传递数据

局部注册

//先定义一个普通的对象
var ComponentA = { /* ... */ }


//然后在components选项中定义你想要使用的组件：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

vue.js整理