The article summarizes knowledge of front-end Vue

What features 1. vue there?

• Two-way data binding
• Component-based development
• The data driver View - Modify Data - View modification need not operate dom
• Using MVVM development ideas

2. The principle of two-way data binding

• Vue two-way data binding principle is to use the Object.defineProperty () this method redefines the object to get attribute values ​​(get) and set the property values ​​(set) operation to achieve.

3. vue Options

• el: View of the designated management area, targeting -> dom by selector or objects, can not specify html / body tag view as

• data: Specifies vm instance responsive data, data used in data must be stated in advance

• methods: definition of functions provided to vm instance to use, fn () {} recommended wording, the arrow is not recommended function, the function of this example is vm

• vm vm instances in the instance of an object, you want to get data on the data, or to call methods in the method, must be this. attribute name or this. method name to visit, this is the new out

4. vue commonly used commands

• v-text / v-html
  • More than two instructions are replaced element content, text output is plain text, html is the output format of the content, v-html likely to cause danger (XSS cross site scripting attacks)
• v-on
  • Binding events, the syntax: v-on:. Event name event modifier = "fn ()", v-on can be abbreviated as @, if you need to use the event object, fixed wording is @event
  • Event modifier:
    • prevent (阻止默认事件),
    • once(事件只触发一次),
    • stop(阻止冒泡),
    • capture(实现捕获触发事件的机制),
    • self(实现只有点击当前元素的时候,才会触发事件处理函数)
• v-for
  • And objects through the array, a property is added in each of the data: key = "unique ID", the ID using the ID if, without the use of index i
  • Array syntax v-for = (item, i) in list
  • Object Syntax v-for = (v, k, i) in obj
• v-if/v-show
  • Switching element to show and hide
  • Difference: v-show display is switched elements: none CSS property, v-if is removed or added
  • Scenario: use v-if a rendering time, use v-show frequent switching
• in the model
  • Form elements to provide two-way data binding
  • This is a syntactic sugar, the principle bound by v-bind input attributes, while monitoring input trigger event, go get the value of the input data in the modified data
• v-bind
  • Any dynamic property binding to data, can be abbreviated as:
• v-bind the Binding class
  • Syntax: class = "data", the data can be an array, it can be an object
  • Array Format: [ 'class name', 'class name'] is added plus one, which is removed to remove an
  • Object format: { 'class name': 'Boolean'} false indicates removed, true represents added
• v-bind the binding style
  • Syntax: style = "data", the data can be an array, it can be an object
  • Array Format: [{the} key attributes css, css key attribute of {}]
  • Object Format: {css properties: property values ​​css, ...}
• v-cloak
  • Before rendering a view not hide interpolation expression area, when the view is rendered and will remove the v-cloak vue property, view displays (using data binding vue time, there will be variable flicker when rendering pages, solve with v-cloak)
  • Css style settings: [v-cloak] {display: none}
• v-once
  • Use this command only rendered once the elements

5. v-on you can monitor multiple ways?

• You can monitor multiple methods, but the same event type method, can only monitor once, otherwise it will error

Why 6.Vue assembly of data must be a function?

• Because a component can be shared, but their data is private, so each component should return a new data object, and returns a unique object, and other components that do not share a common object.

Reproduced in: https: //juejin.im/post/5cffb4416fb9a07ee742d66b