事件雙向綁定原理
阿新 • • 發佈:2018-08-18
() meta func ons img pen color tex har
事件
案例:
vue的事件綁定原理:改變圖片的背景顏色問題來實現這個框架的使用方法,
new Vue({
el:"",
data:{},
methord:{},
computed:{} 計算屬性的使用:用於大量基於數據模型的計算,但並不是每一次渲染都發生更改,計算屬性就會將數據直接返回,這樣提高計算效率。
mounthd:{}
})
我們在事件綁定的時候傳入參數:比如點擊事件,@click=“funname($event,index)”
<!DOCTYPE html> <數據雙向綁定html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="" id="input" value="" /> <h1></h1> <h3 id="username"></h3> <h4 id="age"></h4> <script type="text/javascript"> var inputText = document.querySelector(‘#input‘) var h1 = document.querySelector(‘h1‘) var h3 = document.querySelector(‘#username‘) var age = document.querySelector(‘#age‘) inputText.oninput= function(){ var value = inputText.value h1.innerHTML = value; } var obj = { // name:‘張三‘, age:14, set name(value){ // console.log(value) this._name = value h3.innerHTML = this._name }, get name(){ return this._name }, } console.log(obj) //setter,getter//es6,es2015標準 //在給對象屬性賦值,或者是獲取對象屬性的時候,會調用setter、getter兩個方法 </script> </body> </html>
事件雙向綁定原理