1. Understanding of Vue: Vue is a progressive JavaScript framework
2. Features of Vue: lightweight framework, two-way data binding, instructions, plug-in.
3. Vue syntax:
new Vue({
el:"#app", 用于挂载要管理的元素
data:{ //定义数据
}
})
4. V-model gets and sets two-way data binding of form element values:
1.指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单的数据关联
3.二者相互绑定，不论哪一方发生变化，另一方都会变化。
5. Instructions:
5.1 v-text is equivalent to { {xxx}}
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span> {
{msg}} </span>
5.2 v-html
v-html = "xxx" 内容按照html进行插入
5.3 v-show和v-if
:v-show is to set whether the element exists through the display attribute of the element, and v-if is to set whether the element DOM node exists
5.4 v-if v-else-if v-else
The condition will be displayed only when certain conditions are met, that is, when the result is true, it will be displayed, which is equivalent to JavaScript 0, null, undefined, false is false, others are true
5.5 v-for loop traversal
<div v-for ="(item,index) in arr">{
{item}} </div>
item represents each element in the array, and index represents the subscript.
<div v-for = "(val,key) in obj">{
{val}}{
{key}} </div>
val represents the attribute value of the object, and key represents the attribute
<div v-for = "(val,key,index) in obj"></div>
val represents the attribute value, key represents the attribute, and index represents the subscript of the attribute
5.6 v-on binding object abbreviation @ binding event.
.stop: The method equivalent to preventing event bubbling is equal to event.stopPropagation(). Under normal circumstances, the innermost bound function is executed first and then bubbling outward
.capture During event bubbling, if capture is added to an external event, the outermost function with capture will be executed first. For example: there are four layers of div and 13 layers joined with capture events, then the bubbling sequence of events is to execute the capture from the outside to the inside and then bubbling from the inside to the outside.
.prevent The default behavior of preventing events is equal to event.preventDefault(). For example, to prevent the default event of a radio button from clicking, the check mark will not appear and the page will not refresh after clicking a link.
.self binds the event to itself only when it is triggered, the self-bound event will be triggered, that is, the self-bound event will be skipped during event bubbling.
.once The event bound to once is destroyed after it is executed once, and will not continue to be triggered the next time it is clicked. If it is bubbling to it, it will also be invalidated and the bubbling prevention event bound to it will also be invalid
. , Keydown, keyup When a keyboard event is triggered, you can also bind special keys such as enter shift ctrl, etc. Keypress can obtain the ASCII value
.left- (2.2.0) Only triggered when the left mouse button is clicked.
. right` - (2.2.0) 只当点击鼠标右键时触发。
.middle`-(2.2.0) Triggered only when the middle mouse button is clicked.
.passive - (2.3.0) 以{passive: true }` mode to add a listener
5.7 v-bind is abbreviated as: bind binding event: dynamically bind one or more attributes, or a component prop to an expression.
V-bind is abbreviated as: You can bind the class attribute to the element. There are two ways of binding. One is the object method and the other is the array method. The
object method is bound {attribute: attribute value} The attribute value can also be a variable True and false. True is to display false or not to display. You can also use other events to control the object property value to determine whether to display.
Array binding method ['xxx','xxx'] This binding method, if you add quotation marks, is equivalent to directly binding to the element. If you do not add quotation marks, it is equivalent to a variable. You can look for this variable in the model. If you find it Variable adds the value of this variable
5.8 v-pre Usage: If you don't want to compile the content in { {}}.
5.9 v-cloak is used when the elements of the web page are not fully loaded. Stop using it when the entire page is compiled.
5.10 v-once can only bind once, and after binding once, elements that you want to statically write to the page will not be affected by Vue operations.
6 options
el: indicates the elements that need to be managed when mounted
data where variables or data are stored
Where methods store functions
watch: The listener monitors a variable and triggers the corresponding function when the value of the element changes
When monitoring a variable, you can directly monitor. When monitoring an object, you need to monitor deeply and add deep: true
Extension: Because the property in the object is bound to the address in the object, the address will not change when the value changes, so deep monitoring is required to be strong.
The difference between computed and methods computed has a cache that will not be called again when the value does not change, and methods are called every time it is run