VUE learning diary 1

[Image dump the chain fails, the source station may have security chain mechanism, it is recommended to save the picture down uploaded directly (img-YJ6SPNTm-1585505076954) ( file: /// C: / Users /% E6% 96% B9% E7% the AF E4%%% 82% B0 B8 / AppData / Roaming / Tencent / QQ / the Temp / 28% D G @% 5B8HQGJ% 280XS1J [email protected])] a, VUE example
introduced debug version VUE

Into the production version of the VUE

Also enter the official website to download js file to import, import head

VUE first page attribute el +
VIEW
el mount point, data in the data mount point on the graph data into ID = app Tags of {{message}}, curly brackets interpolation expression syntax is formula.
Examples vue scope of the label mount with all sub-tab.
Here Insert Picture Description
data Data
Here Insert Picture Description
VUE data defined in the data, the data may be data in the data strings, numbers, arrays, dictionaries and the like.

Second, local application instructions V- VUE
Here Insert Picture Description

v-text
content for the Settings tab, the tab for replacing all of the content, when we want to replace the part, we use an interpolation expression.
Here Insert Picture Description
Here Insert Picture Description
v-html
Here Insert Picture DescriptionHere Insert Picture Description
When data is written as plaintext, the same v-text and v-html rendering effects, when data is written as an html tag, v-html will have special effects.
When using the v-text would be interpreted as normal text, when using the v-html data will be interpreted as html tags
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
v-ON
v ON-label binding instructions for the event, the event write methods dictionary vue instance, the and passes the name of the event to the v-on: = trigger event "event name"
@ can replace the v-on:
the click a mouse click event
dblclick to double click event
Here Insert Picture DescriptionHere Insert Picture Description
when we click on the h2 tag, we will trigger changefood function, binding function of the value of the food, then we change the food value in the function, the data is rendered to the html page, h2 at this time to change the text of the page.
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description

Counter Instance

Here Insert Picture Description
Two button num adjustment value, a function written in the example of vue
Here Insert Picture Description
using this adjustment value num present example
Here Insert Picture Description
cut from: https:? //Www.bilibili.com/video/BV12J411m7MG p = 10

Published 17 original articles · won praise 1 · views 3424

Guess you like

Origin blog.csdn.net/weixin_43983570/article/details/105189863