The basic syntax of Vue.js

What Vue.js that?

VUE (pronunciation / vjuː /), is used to build a user interface (front end) of the progressive frame

Vue directly on the html file, by introducing Vue follows:

<-! Development environment version includes a helpful warning command line ->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
or:
<-! Production version, optimized for size and speed ->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

The core Vue.js that allows the use of a simple declarative syntax template to render data into the DOM system:

<div id="app">
  {{ message }}
</ Div > 
< Script > 
var App =  new new Vue ({
     // bind DOM labels, tags html object binding EL 
  EL: ' #app ' ,
    // data declarations, data objects declared data variables, format key: value (), used in html {} {} of reference data Key 
  data: {
    message: ' Hello View! '
  }
})
</script>

 

 

In Vue in everything by way of key-value pairs to reflect: key: value

How to get the data declaration Vue defined in HTML?

Use data binding

Data Binding The most common form is the use of "Mustache" syntax (curly brackets) Text Interpolation:

• Curly brackets: {} {} of reference key data　　
  • {{}} Way is to insert the text value will be referenced in brackets show data as a string
  • Whenever the data bound object   message property changed, updates the contents of the interpolation at the same token, when the interpolation (e.g. text box type = "text") changes, the data object may also change message
  • This is a two-way binding Vue
• By using the   v-once instruction , you can perform a one-time interpolation, when the data is changed

  • < Span V-Once > This will not change: Message {} {} </ span >

　　

Vue instruction

Command (Directives) with a  v- special prefix characteristic

Characteristic value of the expected single instruction JavaScript expression ( v-for are exceptions)

E.g:

< The p- v-IF = "Seen" > Now you see me </ the p- >

Here, v-if the instruction according to the expression  seen to insert or remove the truth value of   <p> the element. (If the value has seen, and is not null and the empty string, is displayed <p> tag)

 

　　# Parameters

• Some instructions capable of receiving a "parameter", represented by the colon after the instruction name. For example, v-bind instructions may be used to update the HTML responsive characteristics:

 <a v-bind:href="url">链接</a> 

• Here  href are parameters, informing  v-bind  the instruction of the elements   href characteristic of the expression   url values of binding
• Another example is the  v-on command, which is used to listen for DOM events

<a v-on:click="toMethod">一段文字。。。</a>

 

　　A table will bind a click event to trigger an event when you click on a label, in a method called toMethod methods will be invoked

 methods:{
            toMethod:function(){
                alert ( "clicked toMethod")
            }
        }

 

 

　　# Abbreviations

　　v- Prefix as a visual cue to identify particular characteristics of the template Vue. However, for some instruction is frequently used, it will feel cumbersome to use. Thus, for the Vue  v-bind and  v-on the two most frequently used instructions, it provides specific abbreviations are used:

• v-bind abbreviation

  • <! - complete syntax -> 
    < A v-the bind: href = "url" > ... </ A >
    
    <!-- 缩写 -->
    <a :href="url">...</a>

• v-on abbreviation

  • <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

     

Common properties Vue 7

 

• el property
  • DOM bindings label, el html tag object binding, indicating vue compiler where to begin parsing grammar vue
• property data
  • Data declarations, data objects declared data variables, format key: value (), using the references in html key data {{}}
• methods Properties
  • The method defined in vue, the method must be defined in the subject methods
• template
• render
• computed
• watch

 

Vue common commands

v-bind command

    HTML tags to bind a property, the binding is two-way

v-if instruction

v-else instruction

    Conditional

v-for instruction

    循环遍历: v-for="(i,index) in args"、v-for="i in args"

    Wherein the subscript is the cycle index, to obtain a statement by the subscript index

v-on instruction

　　DOM is used to monitor the event, with its syntax and v-bind is similar

v-show instructions