Vue和JQuery是兩個常用的前端框架,它們有著不同的思想和使用方式。其中,this是兩個框架中十分重要的概念,下面我們就來具體了解一下。
在Vue中,this指向當(dāng)前組件實例。可以在Vue組件中通過this來訪問到組件實例的各種屬性和方法。
export default {
data () {
return {
message: 'Hello Vue!',
}
},
methods: {
showMessage() {
console.log(this.message);
}
},
mounted() {
this.showMessage();
}
}
上面的代碼中,this指向的是組件實例,可以使用this來訪問data()中聲明的message屬性,并且在mounted()生命周期函數(shù)中通過this來調(diào)用showMessage()方法。
在JQuery中,this指向的是DOM元素。可以在JQuery中使用this來訪問當(dāng)前DOM元素的各種屬性和方法。
$('button').click(function() {
console.log($(this).attr('id'));
})
上面的代碼中,this指向的是當(dāng)前被點擊的button元素。可以使用this來獲取該元素的id屬性,并將其打印到控制臺中。
總結(jié)來說,Vue中的this指向的是組件實例,可以使用this來訪問組件實例的屬性和方法;而JQuery中的this指向的是DOM元素,可以使用this來訪問當(dāng)前DOM元素的屬性和方法。
上一篇vue jquery原理
下一篇html字體向下的代碼