Before we go into Vue, let's look at three ways to create object-oriented using Vue.
Classes and objects are two of the most important concepts for programming, so be sure to clarify
Class: is an abstract concept (not actually present), (attribute, behavior)
Object: is the actual existence, is the instantiation of the object, read a few examples you will understand.
Before ES6:1, built-in constructors, 2, custom constructors, 3, literal.
1. Built-in constructors;
2. Custom constructors;
3, the literal amount.
Create a Vue instance
The first thing to make sure that your project introduces Vue.js is that it needs to be referenced by his frame!
Creating a Vue instance is simple
Data is equivalent to a storage, storing our data and then rendering the results as {{}} in the form of a page, stored before we first bind you to the corresponding Html,el: ""
Let's take a look at the next example
The result is
{{}} is a simple expression that can be made.
{{}} can be used to bind properties, binding JS expression, that can bind tags, then let's try
<div id = "PP" >{{name}}<div>
The result is
Even the labels are rendered together, which is obviously not the result we want. So how can you get rid of these tags, so! Next:
Vue consists mainly of 2 chunks: instructions, components
1, v-html as the above example
We just need to add v-html in div or v-text just write {{name}} in this div and you can try it. V-html is used to bind tags with v-text, bound text
Results:
2, V-model generally used in the expression of input, it is easy to implement the form control and data of two-way binding.
Results:
3, V-show. Listen to the name and you can guess that he has a relationship with the display and concealment of the elements, the v-show instruction is true/false, corresponding to show/hide,
When the value of See is false, the contents of the P tag are not visible, the P tag in the console adds the style to Display:none by default. is hidden, and when we change false to true, we can see it.
4, V-if: See the example below
Here are three instructions, V-if,v-else,v-on:click and a methods method.
V-if: I will find that when I change the F2 to False, I can't see the content, then I see the console, the second p tag is commented out,
Recall the example of V-show, when the console displays display which is the difference between the two commands.
Remember one point: if you need to switch the display/hide frequently, use v-show, if it is not possible to switch after running with V-if.
V-IF directive
5.v-else directives, in the programming language, if and else are generally paired, Vue is no exception, V-else has no absolute value, but requires the previous sibling node must use the V-IF directive, remember, there is no if there is no else.
6.v-on:click can be abbreviated to bind an event to @click,@. If the event is triggered, you can specify the handler function for the event.
7.v-once, because the P tag has the initial value, the first time the rendering of input and p have content, we add to P v-once, we update the value of MG, the P label will not change
A v-once was added to the chestnut above. Result: Content in P does not change based on input box input
Once as the name implies, once, also can add to click event, default can only click once
8.v-bind: It can be shortened directly to: Such a way then bind dynamic properties to compare common with the href,img tag of the A tag src.
9.v-for Sometimes the data we store is not just a simple number or a string, but an array type or object, and we're going to show the value of the array to the view and see chestnuts
(1) array notation: is not think and for the loop quite like, yes, the original JS also a for loop need a lot of code, this is not particularly simple and clear, originally an Li now become three
(2) Object writing: I write this to show that v-for can get not only the value but also the subscript, the property,
Objects are written in JSON color. V-for has a higher priority when v-if and v-for are used together
Finish. (Thanks to the summary of our predecessors!) )
Vue.js Getting Started. 10 instructions. 4 Common methods