Interpolation syntax: The most common form of data binding is text interpolation {{}} with “Mustache” syntax (double curly braces)

Instruction: V-text: similar to innerText,

V-html: Similar to innerHtml, it identifies element tags

V-model: bidirectional binding directives that need to be used on elements that can change values: input, Textarea (multi-line text box), SELECT (drop-down menu)

V-else: If the condition is not set, the element will be mounted to the DOM tree, and if will not be rendered

V-show: when the condition is true, the element is displayed on the page, when the condition is not, the element is not displayed on the page, and the element itself is still in the DOM tree, using displat: None for image or hide

Note: The difference between v-if and V-show: The two commands are used in different scenarios. If the elements on the page are hidden and not shown again, use v-if with low switching frequency. Otherwise, use v-show

V -for= “(item, index) in list” :key= “index”

v-on: All events must be written in a methods object, which can be passed as an argument. You can pass the event itself with $event. You can’t use arrow functions to define methods, because the “this” reference changes

V-bind: implements attribute binding, for example: v-bind: class= “less”, abbreviated :class= “less”

ref: After defining the DOM element on the tag, you need to get it in the Mounted life cycle. BeforeDestroy also gets the method: this.refs.ref. Refs. ref = this.refs.content = this.refs.content = this.refs.content

Lazy: lazy: listens for events like onChangeEvent V-model. number: requires that only numbers be entered in the input box


List of topics: juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green, qklhk-chocolate

Contribution Subject:Github.com/xitu/juejin…

theme: juejin highlight: