Vue’s Watch property

Listen to the property to detect changes in the data property. Specific code:

new Vue({
el:'#app'.data: {count:0
},
watch: {count(){
    console.log('Count' becomes'. '+count)
}
}
})
Copy the code

The function is called every time the observed data changes. However, because the data in the data attribute may be called many times in different places, the watch attribute can be used to know where the data in the data attribute is affected when it is changed.

Vue’s complete property

Evaluates the property, defines a variable, and returns the result. Only when the data in the data property changes will the calculation be performed again, otherwise the data in the cache will always be used.

<body>
  <div id="app">
    <button @click='thisTime'>Get the present time</button>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app'.data: {
      time: new Date()},methods: {
      thisTime() {
        alert(this.nowTime)
      }
    },
    computed: {
      nowTime() {
        return '现在是' + this.time
      }
    }
  })
</script>
Copy the code

Every time a button is clicked, it is the first time fetched, because neither ‘now’ nor this.time changes in computed data, so this method is called only the first time, and the result is always cached. The result of a nowTime in a calculated property is affected by one or more calculated factors, so a calculated property is suitable for one data being affected by more than one data.

Event modifier

Stop: stops events from bubbling once: only executes once prevent: prevents default events Event modifiers can be used in series.

Key modifier

Keydown: press keypress: press keyup: release keyup: space esc exit delete backspace TAB up arrow keyup down arrow key left arrow key right arrow key right

System modifier

Use the specific key name of the keyboard event: Shift Ctrl Alt Window