1. 程式人生 > >事件雙向綁定原理

事件雙向綁定原理

() 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>
數據雙向綁定

事件雙向綁定原理