Vue2.0自訂指令與實例的屬性與方法-js教程-PHP中文網

這篇文章主要介紹了關於Vue2.0自訂指令與實例的屬性和方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

一、自定義指令

Vue自訂指令和元件一樣存在著全域註冊和局部註冊兩種方式。先來看看註冊全域指令的方式，透過 Vue.directive( id, [definition] ) 方式註冊全域指令，第二個參數可以是物件數據，也可以是一個指令函數。

註：使用指令時必須在指名名稱前加前綴v-，即v-指令名稱

1.鉤子函數

一個指令定義物件可以提供如下幾個鉤子函數(均為可選)：

bind：只呼叫一次，指令第一次綁定到元素時呼叫。在這裡可以進行一次性的初始化設定。
inserted：被綁定元素插入父節點時呼叫 (僅保證父節點存在，但不一定已插入文件中)。
update：被綁定元素所在模板更新時調用，但可能發生在其子 VNode 更新之前。
componentUpdated：被綁定元素所在模板完成一次更新周期時呼叫。
unbind：只呼叫一次，指令與元素解綁時呼叫。

2.鉤子函數參數

指令鉤子函數會被傳入以下參數：

el：指令所綁定的元素，可以用來直接操作DOM

binding：一個對象，包含以下屬性：

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

登入後複製

得到以下結果：

Vue2.0自訂指令與實例的屬性與方法

##3.函數簡寫

在很多時候，你可能想在bind 和update 時觸發相同行為，而不關心其它的鉤子

//传入一个简单的函数，bind和update时调用
 Vue.directive('wbs',function(){
   alert('wbs17022');
 });

登入後複製

4.局部註冊

如果你想註冊局部指令，元件中也接受一個directives 的選項

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

登入後複製

5.自訂拖曳元素的指令

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

登入後複製

二、生命週期

beforeCreate():元件實例剛剛創建，

還未進行資料觀測和事件配置//這裡不要被beforeCreate誤導，實際上元件實例已經創建了

created():實例已經建立完成，並且

已經完成資料觀測，屬性和方法的運算，watch/event 事件回呼。 //常用！！！

beforeMount():模板編譯之前，還沒掛載，頁面仍未展示，但

虛擬Dom已經配置//先把坑佔住了，到後面mounted掛載的時候再把值渲染進去

mounted():模板編譯之後，已經掛載，

此時才會渲染頁面，才能看到頁面上資料的展示//常用！！！

注意: mounted 不會承諾所有的子元件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用vm.$nextTick 替換掉mounted

beforeUpdate():元件更新之前

updated():元件更新之後

beforeDestroy():元件銷毀之前

destroyed():元件銷毀之後

Vue2.0自訂指令與實例的屬性與方法 ##三、計算屬性

1. 基本用法

計算屬性也是用來儲存數據，但具有以下幾個特點：

**a.數據可以進行邏輯處理操作

b.對計算屬性中的資料進行監視**

2.計算屬性vs 普通屬性

可以像綁定普通屬性一樣在模板中綁定計算屬性，在定義上有區別：

計算屬性的屬性值必須是函數

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

登入後複製

3.計算屬性vs 方法

將計算屬性的get函數定義為一個方法也可以實現類似的函數

區別：

a.計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化

b.計算屬性是快取的，只要相關依賴沒有改變，多次存取計算屬性得到的值是先前快取的計算結果，不會執行多次

4.get和set

計算屬性由兩部分組成：get和set，分別用來取得計算屬性和設定計算屬性

預設只有get，如果需要set，要自行加。另外set設定屬性，並不是直接修改計算屬性，而是修改它的依賴

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.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和vm.lastName也會相應地被更新。

四、實例的屬性和方法

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';

登入後複製

最後得到結果如下圖：

Vue2.0自訂指令與實例的屬性與方法 2. 方法

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])数据监视

登入後複製

#vm.$mount()使用場景

var vm=new Vue({
   data:{
    msg:'欢迎来到南京网博',
    name:'tom'
    }
}).$mount('#itany');

登入後複製

vm .$nextTick()使用場景

<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);标题：汤姆 });

vm.$set(target, key, value)使用场景

参数：

{Object | Array} target

{string | number} key

{any} value

用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为Vue 无法探测普通的新增属性,比如下面例子中的this.user.age=25，页面并不能展示{{this.age}}的数据

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

登入後複製

vm.$delete(target, key)使用场景

参数：

{Object | Array} target

{string | number} key

用途：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。

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

登入後複製

vm.$watch( expOrFn, callback, [options] )使用场景

参数：

{string | Function} expOrFn

{Function | Object} callback

{Object} [options]

{boolean} deep：为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
{boolean} immediate

用途:观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。

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

登入後複製

Vue2.0自訂指令與實例的屬性與方法