Home > Developer > JavaScript
Vue. js Usage Details, vue. js details
Vue. js tutorial
Vue. js (pronunciation/vju example/, similar to view) is a progressive framework for building user interfaces.
Vue only pays attention to the view layer and adopts the bottom-up incremental development design.
The goal of Vue is to bind the response data and combine the view components through the simplest API possible.
Vue is easy to learn. This tutorial is based on Vue 2.1.8.
Preface
I learned Vue for a data query project some time ago. I feel that this framework is still very good. Today I will sort out how to use this framework, I hope it will be helpful to my friends who are learning this framework ~
First, let's take a look at Vue:
Vue. js is a progressive framework for building user interfaces. Different from other heavyweight frameworks, Vue uses the minimum cost and incremental (incrementally adoptable) design. Vue core libraries only focus on the view layer and are easy to integrate with other third-party libraries or existing projects. On the other hand, when used in conjunction with a single file component and libraries supported by the Vue ecosystem, Vue can also provide powerful drivers for complex single-page applications. Therefore, Vue is actually very powerful.
1. Installation of Vue. js and template syntax
Vue is easy to use. You can directly download Vue. js or Vue. min. js for importing.
1-1 template syntax
Vue. js uses HTML-based template syntax, allowing developers to explicitly bind DOM to the data of the underlying Vue instance.
The core of Vue. js is a system that allows you to use concise template syntax to declare and render data into the DOM.
In combination with the response system, when the application status changes, Vue can intelligently calculate the minimum cost of re-rendering components and apply them to DOM operations.
1. html Template
Html templates: DOM-based templates, which are all parsed and valid HTML
Interpolation:
Text: Use the Mustache syntax (braces) {value}; Purpose: Replace the attribute values on the instance. When the value changes, the interpolation content is automatically updated. You can also use v-text = "value" instead.
<P >{{ value }}< p> is equivalent to <p v-text = "value"> </p>
Native html: text output by double braces. html tags are not parsed. That is to say, when the data of an instance is an html tag, it cannot be parsed but output directly. To resolve the issue, use v-html = "value" instead.
New Vue ({data: {value: '<span> I am a span tag </span> '}}); <p >{{ value }}< p> page display => <span> I am a span tag </span> <p v-html = "value"> <p> page display => I am a span tag
Note that sometimes, due to some network latency and other reasons, the user will first see {xxx} in the year of the purchase before the data is available. To avoid this effect, use v-text = "xxxx" instead.
Property: bind with v-bind to respond to changes.
Title
Use javascript expressions: You can write simple expressions. (It can be a simple three-object operation, but it cannot be an if statement), and there will be computing attributes in the future.
{ 1+2 }{ true? "yes":"no" } 2. String Template
Template string
Tempalte => Properties of the Option object
The template replaces the mounted elements. The content of the mounted element is ignored. There is only one root node. The html structure is written in a script label and type = "x-template" is set ".
<body> <div id="box"> </div></body><script src="vue.js"></script><script type="text/javascript"> document.addEventListener('DOMContentLoaded',function () { var str = '
It indicates that the weight is relatively high. Directly "replace" the mount point and display the original html after replacement.
// Code snippet this is to use the script tag to internally define the template. Limitations: Cross-file use is not allowed, you can use <body> <div id = "box"> </div> </body> <script src = "vue. js "> </script> <script type =" x-template "id =" str "> <p> I am a p tag </p> </script> <script type = "text/javascript"> document. addEventListener ('domainloaded', function () {var vm = new Vue ({el: '# box', template:' # str'}) ;}, false ); </script>
Vue instance. Each application uses the Vue constructor to create a root instance to start New Vue (option object ). You need to input the option object, which contains elements, Data, templates, methods, and so on.
El: Mount element selector --- String | HtmlElement
Data: proxy data --- Object | Function
Methods: definition method --- Object
Vue proxy data, each vue instance will proxy all the properties in its data object, these properties are responded. The newly added attribute does not have the response function, and the view is not updated after the change.
The attributes and methods of a Vue instance expose its own attributes and methods, starting with "$", such as $ el and $ data...
Var vm = new Vue ({el: '# app', data: {message: 'Hello, Datura !!! '}, Methods: {test () {alert (1) ;}}, compontents: {// stores components here }}); /* vm is the new instance */console. log (vm. $ data); // that is, data. There are many attributes mounted on the vm (new) instance. // code snippets are placed in the template tag, and give an id <body> <template id = "tem"> <p> I am a template </p> </template> <div id = "box"> </ div> </body> <script src = "vue. js "> </script> <script type =" text/javascript "> document. addEventListener ('domainloaded', function () {var vm = new Vue ({el: '# box', template:' # tem '}) ;}, false ); </script>
3. template-render Function
The render function is very close to the editor.
Render => Option Object Attributes
Data Object Attributes
Class :{},=> bind class, and the same APIstyle :{},=> Binding style as v-bind: class, and the same APIattrs as v-bind: style: {},=> Add the line attribute domProps :{},=> DOM element attribute on :{},=> bind event nativeOn :{},=> listen to native event directives: {},=> custom command scopedSlots :{},=> slot scope slot :{},=> define the slot name and component relationship, insert Cao key: "key ", => Add a unique identifier for the element ref: "ref", => reference information 2Vue. js condition and loop Statement 2-1 Condition Statement v-if: the switching element will be destroyed and rebuilt based on the true and false values; => the element has disappeared in the dom v-show: based on the true and false values, switch the display attribute of the element; v-else: rendering when all conditions are inconsistent; v-else-if: Multi-condition judgment, rendering if true;
I. V-if
Use the v-if command for condition determination:
<Div id = "app"> <p v-if = "seen"> now you see me </p> <template v-if = "OK"> <p> hahaha, hard typing !!! </P> </template> </div> <script> new Vue ({el: '# app', data: {seen: true, OK: true }}) </script>
Here, the v-if command determines whether to insert the p element based on the value of the expression seen (true or false.
Ii. v-else
You can use the v-else command to add an "else" block to v-if:
Generate a random number, determine whether it is greater than 0.5, and then output the corresponding information:
<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div></div> <script>new Vue({ el: '#app'})</script>
Iii. v-show
We can also use the v-show command to display elements based on conditions:
<div id="app">
Iv. v-else-if
V-else-if is added in 2.1.0. As the name suggests, it is used as the else-if block of v-if. It can be chained for multiple times:
Judge the value of the type variable:
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div></div> <script>new Vue({ el: '#app', data: { type: 'C' }})</script>
[Use and comparison of v-show and v-if]
① V-show: Switch the display attribute of the element based on the true and false values;
The v-show element is always rendered and kept in the DOM.
V-show does not support the template syntax.
② V-if is a true conditional rendering, because it will ensure that the event listener and child components in the condition block are destroyed and rebuilt properly during the switching.
③ V-if has higher switching consumption and v-show has higher initial rendering consumption.
It is better to use v-show if frequent switchover is required. if the running conditions are unlikely to change, it is better to use v-if.
2-2 loop statement v-
① Syntax:v-for="x in items"
X is an index, and items is an array.
② The v-for loop is to constantly create new labels and the content in the labels. We decided that they are generally placed in an array and then displayed through traversal. You can also put objects and traverse objects.
③ When v-if and v-for are used together, v-for has a higher priority than v-if.
<Body> <div id = "app"> <ul> <li v-for = "(val, key) in fruitsArr ">{{ val }=>{{ key }}</li> // list items that are cyclically displayed </ul> </div> </body> <script src = ".. /vue. js "> </script> <script type =" text/javascript "> document. addEventListener ('domainloaded', function () {var vm = new Vue ({el: '# app', data: {fruitsArr: ['apple', 'bana ', 'orage', 'pear '] // data source}) ;}, false); </script>
Summary
The above is a detailed explanation of Vue. js usage introduced by the small editor. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
