Vue2.0 사용자 정의 지시문과 인스턴스 속성 및 메소드

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }

<p>
   </p><h3>{{msg}}</h3>

...
// 钩子函数的参数
Vue.directive('world', {
  bind(el, binding) {
    console.log(el);//指令所绑定的元素，DOM对象
    el.style.color = 'yellow';
    console.log(binding); 
  }
});

Vue.directive('drag', function (el) {
  el.onmousedown = function (e) {
    //获取鼠标点击处分别与p左边和上边的距离：鼠标位置-p位置
    var disX = e.clientX - el.offsetLeft;
    var disY = e.clientY - el.offsetTop;
    console.log(disX, disY);
    //包含在onmousedown里面，表示点击后才移动，为防止鼠标移出p，使用document.onmousemove
    document.onmousemove = function (e) {
      //获取移动后p的位置：鼠标位置-disX/disY
      var l = e.clientX - disX;
      var t = e.clientY - disY;
      el.style.left = l + 'px';
      el.style.top = t + 'px';
    }
    //停止移动
    document.onmouseup = function (e) {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  }
});

data:{ //普通属性
  msg:'welcome to beijing',
},
computed:{ //计算属性
  msg2:function(){ //该函数必须有返回值，用来获取属性，称为get函数
    return '欢迎来到北京';
  },
  reverseMsg:function(){
  //可以包含逻辑处理操作，同时reverseMsg依赖于msg,一旦msg发生变化，reverseMsg也会跟着变化
    return this.msg.split(' ').reverse().join(' ');
 }
}

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      //this.fullName = newValue 这种写法会报错
      var names = newValue.split(' ')
      this.firstName = names[0]//对它的依赖进行赋值
      this.lastName = names[names.length - 1]
    }
  }
}

vm.$el:Vue实例使用的根 DOM 元素
vm.$data:获取数据对象data
vm.$options:获取自定义属性
vm.$refs:一个对象，持有注册过 ref 特性的所有 DOM 元素和组件实例

<p>
   {{msg}}
   </p><h2>你好</h2>
   <p>世界</p>    <hr>
   <h1>标题：{{name}}</h1>

...
var vm=new Vue({
    el:'#itany',
    data:{
         msg:'welcome to beijing'
    },
    name:'tom',
    show:function(){
         console.log('show');
    }
});
// vm.属性名 获取data中的属性
   console.log(vm.msg);//welcome to beijing
// vm.$el 获取vue实例关联的元素
   console.log(vm.$el); //DOM对象
   vm.$el.style.color='red';
// vm.$data //获取数据对象data
   console.log(vm.$data);
   console.log(vm.$data.msg);
// vm.$options //获取自定义属性
   console.log(vm.$options.name);
   vm.$options.show();
// vm.$refs 获取所有添加ref属性的元素
   console.log(vm.$refs);
   console.log(vm.$refs.hello); //DOM对象
   vm.$refs.hello.style.color='blue';

vm.$mount():手动挂载vue实例//vm.$mount('#itany');
vm.$destroy():销毁实例
vm.$nextTick(callback):在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便获取更新后的DOM
vm.$set(target, key, value)与Vue.set用法相同
vm.$delete(target, key)与Vue.delete用法相同
vm.$watch(data,callback[,options])数据监视

<p>
   </p><h1>标题：{{name}}</h1>

...
var vm = new Vue({
  el: '#itany',
  data: {
    msg: 'welcome to beijing',
    name: 'tom'
  }
});
vm.name='汤姆';//页面展示已经更改过来了，但DOM还没更新完
//Vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
console.log(vm.$refs.title.textContent);//标题：tom
vm.$nextTick(function () {
//DOM更新完成，更新完成后再执行此代码
  console.log(vm.$refs.title.textContent);标题：汤姆
});

<p>
  <button>添加属性</button>
</p><hr>
  <h2>{{user.name}}</h2>
  <h2>{{user.age}}</h2>

...
var vm = new Vue({
  el: '#itany',
  data: {
    user: {
      id: 1001,
      name: 'tom'
    }
  },
  methods: {
    doAdd() {
      // this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到
      // this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
      // Vue.set(this.user,'age',18);
      if (this.user.age) {
        this.user.age++;
      } else {
        Vue.set(this.user, 'age', 1);
      }
    }
  }
})

doDelete() {
  if (this.user.age) {
    // delete this.user.age; 此方法无效
    Vue.delete(this.user, 'age');
  }
}

<p>
  <input>
    </p><h3>{{name}}</h3>
    <hr>
  <input>
    <h3>{{age}}</h3>
    <hr>
  <input>
    <h3>{{user.name}}</h3>

...
var vm = new Vue({
  el: '#itany',
  data: {
    name: 'tom',
    age: 23,
    user: {
      id: 1001,
      name: 'alice'
    }
  },
  watch: { //方式2：使用vue实例提供的watch选项
    age: (newValue, oldValue) => {
      console.log('age被修改啦，原值：' + oldValue + '，新值：' + newValue);
    },
    user: {
      handler: (newValue, oldValue) => {
        console.log('user被修改啦，原值：' + oldValue.name + '，新值：' + newValue.name);
      },
      deep: true //深度监视，当对象中的属性发生变化时也会监视
    }
  }
});

//方式1：使用vue实例提供的$watch()方法
vm.$watch('name', function (newValue, oldValue) {
  console.log('name被修改啦，原值：' + oldValue + '，新值：' + newValue);
});
当对象中的属性发生变化时,也可以采用这种办法
vm.$watch（"user",function(newValue,oldValue){
  console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
},true)