VUE (pronunciation / vjuː /, similar to the view) is a progressive frame for constructing user interfaces. The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project. On the other hand, when used in conjunction with a modern tool chain and various support libraries, Vue also fully capable of providing drive for complex one-page application.
Try it, you enter each character will be cloned, a very interesting program!
009-VueJS template syntax and examples .html
In the above example, by creating this new Vue instance, attention, although not put it into a variable within, or Vue instance is created.
By creating this Vue instance, just like our HTML code to establish a link, Vue based on the above HTML code to create a template, pay special attention to that, Vue when in motion, do not directly use the HTML code we write . Pages inside the actual operation of these commands do not we write (the final page and you can not see things like braces),
Vue according to the template stored in the HTML code created in-house, and then use this template to create a true rendering of HTML DOM code we write HTML code is not the last in a run inside the browser that a middle layer of the HTML instances Vue code into the template, and then render the template (such as the curly braces {{title}}}, etc.), and eventually by its output the rendered HTML code
Vue example data stored in the attribute data, such as the above title, they can be modified directly in the attribute data, you can also function to call methods in the generated content. E.g:
Instruction is that you put the code some indication of
Such as the above v-bind, and it will be something our data (href value) binding, generally speaking directly in the HTML if needed when the display content, we use curly braces to solve, but does not apply when the braces , it is necessary to use the instruction.
format:
+ + Colon command parameters, such as v-bind: href = "link"
link is the content you want to bind from Vue instance, can be a property or function
Generally you can not pass data to dynamic HTML attribute, with these Vue instructions on it
013 prohibit the use of v-once secondary rendering .html
Run the above code, we want the original intent of a Hello World! And Hello, but two elements are rendered Hello, how do? With v-once, that is where the first element h1 plus a v-once, it means that the element will only be rendered once, then can not be changed.
The code above will not output a hyperlink Baidu.com, but together with all the HTML code output.
The advantage is, HTML elements will not be parsed and rendered, but is output as plain text, to avoid cross-site attacks.
However, if under certain circumstances you really want to render HTML code output, such as where you really want to see a hyperlink Baidu, you should use the v-html instructions. V-html can embed in the desired element. Please use caution this directive, it will expose you to XSS attacks, such as content here may be submitted by the user, you can not control users to upload any content to determine if the content security, or by your own code synthesis , it is safe to use v-html
1 015 jobs
015 jobs 1-1.html
Output your name and age, both of which are stored as an attribute in the data, output in the P tag inside
<script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</h1>
<p>I am {{age}} years old.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "Rockage",
age: "40",
}
});
</script>
015 jobs 1-2.html
在插值语法中，即在大括号中， 使用JavaScript表达式，输出的年龄乘以3
<script src="vue.js"></script>
<div id="app">
<p>I am {{name}}</p>
<p>I am {{age * 3}} years old.</p>
</div>
<script>
new Vue({
el: "#app",
data: {
name: "Rockage",
age: "40",
}
});
</script>
Job 2-2: keyboard input record values, the data stored in and displayed immediately.
Feature 1: In addition to directly bind to a method can also be inline JavaScript statement calling the method, a function that is no longer bound directly execute JS statement at the time of the call, this method is applicable to the function body is very short, only function of the line.
Feature 2: Using the keyword VueE V E n- T , which table shows J A V A S C R & lt I P T from the movable green into the default recognize what parts of the object , which guarantee save the many multi- weight to channel information , such as what piece of mesh standard element hormone and so on . And this was , mesh standard metadata elements toIs input into the block , the input into block has a number V A L U E genus properties , it would be a user input the values of to the source , can be to take the these two things member of the object ( Event) to access its target element (target), then access its properties (value), and assigned to the variable myValue.
If you do not use inline mode, you can bind an event in this function, then $ event passed as parameters to the same method to access value in the event function and assigned to myValue, the same effect.
In all instances where access Vue, whether listening mouse click or output counter, simply go to the Vue example, you can use any valid JavaScript code, as long as it is a simple expression can, of course, this expression can not there are complicated if statements or for circulation.
This is called "inline" method call
Such as the example above the mouse click the button to increase numbers, because the logic is simple enough, we even v-onclick there did not need to be bound to any function, but it can directly execute a statement, that is to say when the call directly counter ++ can be written. Of course, if the program logic is more complex, not enough to express a single statement, so honestly write a function and bind to the event in as well.
In the template may be inserted directly into an expression such as {{counter * 2}} such expressions.
Of course, we have to use short "Three Expressions" This expression is a variant of the if statement, to complete judgment of the variables in a row.
026 with the calculated properties change in response to .html
So far, we have learned two Vue attributes: data, methods, a data placement, a placement function, is now introducing a third attribute: computed
First roughly sort out what effect this example:
Interface has three buttons, two counters, a first counter is an increase button, the second button is a counter 1 is reduced, the third button counter is increased 2
Another one line of text, when the display time is greater than 5 counter1: Greater than 5, when the display counter1 is less than 5: Smaller than 5
Note: counter2 did not do such judgments
In order to monitor real-time value counter1, where the use of two types of synchronization methods, the first is to write a function result in the event methods in
Another way is to use computed, write an event function output
At first glance, the two codes are the same, and there is no difference, but the real difference is:
1, on the call method, methods are written in a function call with parentheses, namely: result (this form) to call
2, written on computed as a function call does not need to be like calling a function, the parentheses are omitted, the same data can be directly invoked as: output
In fact, for the final result, in two ways really are the same, then the question is, have methods can not it do? Why do we bother springing a computed it?
The answer is revealed:
1, inside Vue, computed properties are based on data they rely on caching, will only be re-evaluated when its associated dependent on change, time with irrelevant data changes it will not make any moves .
2, method is different, as long as the pages change (re-rendered), it will always be executed, regardless of whether the data associated with it.
In order to verify the above conclusion, we came alive again in the interface of a button, add a variable counter2, note that this button and variables and counter1 eight-pole could not beat relations, it is a completely separate things.
Press the F12 key to enter debug mode browser, observe console console output
Now press Increase Counter 1 or Decrease Counter 1
The value counter1 began to change, and the console appears: Here is Computed Here is Methods and two lines
This is because the change counter1 value, the trigger while the methods of the result function, and based on computed based on the output function
Above logic is easy to understand, make sense!
Now press the button Increase Counter 2, this time counter2 value begins to increase, but strangely, the console display: Here is Methods
Why is this? Obviously result in no one function is a relationship with counter2, why each change counter2 when the program will jump into the result function in it?
This confirms the conclusion we said above: "As long as the page change (re-rendered), it will always be executed, regardless of whether the data associated with it."
Although refresh is counter2, but please note: as long as the page is re-rendered, it will always be executed.
It goes without saying, if it is very complex pages, repeatedly to perform a function with independent, cost efficiency is certainly significant.
So we need computed attribute that deal only with relevant variables (eg counter1 in this example), and irrelevant variables (counter2) even change occurs, even if the page is re-rendered, and it will not be executed .
Most of the time we choose computed on the right, but sometimes we just do not want to go through some of the data cache, is to let it bluntly constantly refreshes and displays the time, select methods
<script src="vue.js"></script>
<div id="app">
<button v-on:click="counter1++">Increase Counter 1</button>
<button v-on:click="counter1--">Decrease Counter 1</button>
<button v-on:click="counter2++">Increase Counter 2</button>
<p>Counter:{{counter1}} | {{counter2}}</p>
<!-- 注意两种调用方法是不同的 -->
<p>Counter 1 Result: {{result()}} | {{output}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
counter1: 0,
counter2: 0
},
computed: {
output: function () {
console.log('Here is Computed')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
},
methods: {
result: function () {
console.log('Here is Methods')
return this.counter1 > 5 ? "Greater than 5" : "Smaller than 5"
}
}
});
</script>
Vue watch is further provided a method of processing data dependent, and the net effect is actually an example of methods and computed difference is not too much, that the different places:
In which we set attributes computed property (as an example of output) to be calculated, and then calculate the set property (output) of the logic function body.
watch is another mechanism is used, the attribute name you want to listen for the key, and this key must be data which can be found in, e.g. counter1 or counter2, the embodiment of the keys must be inside the attribute data the same name.
Define a property name and the same function in the watch, that is, when the attribute value changes the code to be executed, the transmission will automatically Vue value after the attribute change to the function.
In terms of results, since that role and computed rather watch, then we have to use the watch why not? Because the watch is executed asynchronously.
About what is asynchronous execution, say a few words is not clear, venue search engine
computed only perform synchronization tasks, that is to say when it return, you must immediately return a result the middle can not access the server or perform asynchronous tasks.
For example, you need a value, updated after two seconds, you must watch
Theoretically, Vue example, always use this access to its own (see the previous content), but in the callback closure is not, the timer function (setTimer) is an example of a typical callback closure, thus which can not directly access this, but with a variable should be saved first, for use in setTimer function.
What about the "callback closure", venue search engine
Of course, you can also try to watch this code into computed try to go inside, the result is only cleared once, and then the code is no longer executed.
In most cases, it is recommended to use computed, because it has the best speed, but in the implementation of asynchronous tasks, we can only choose to watch
