One study notes Vue - Getting Started

URL: Introduction - Vue.js

note

Examples demonstrated, in the Examples are Vue JS bound to the specified HTML element, and then by Vue instance dataattributes or in methodsthe method, to operate the child elements of the binding element, and the elements themselves are not the specified operation ID.

<div id="app">
    {{ message }}
</div>

Sometimes the code is normal, but the Vue will be reported as an error, possibly because in HTML pages, JS script loaded executed before rendering HTML pages, the solution is to put the relevant scriptlabel moves to the bodylast part of the tag.

[Vue warn]: Cannot find element: #element-id

Declarative rendering - Declarative Rendering

Simple text rendering

In the HTML element to write {{ message }}, then as in JS datawithin the messagespecified property to display the specified text, which is the most basic display text.

In JS, HTML EL elements for positioning, message attributes with the same name as the field of the HTML Vue example, the value will be rendered in the final HTML page.

If the console manually change the app1.messagevalue, you can see the text in the HTML page will be updated instantly.

<div id="app1">
    {{ message }}
</div>

var app1 = new Vue({
    el: '#app1',
    data: {
        message: 'Hello Vue!'
    }
})

HTML element attribute binding

In HTML, through v-bindto bind to the instruction specifying the attributes of the elements, as v-bind:titlewill be bound to Vue example HTML element titleon the property.

With v-instruction prefix for performing operations in response to Formula rendered DOM.

Effect of the code following is achieved: when the mouse to the suspension spanwhen the text element is displayed, is displayed in the JS messagevalues, namely:

'You loaded this page on ' + new Date()

<div id="app2">
    <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
    </span>
</div>

var app2 = new Vue({
    el: '#app2',
    data: {
        message: 'You loaded this page on ' + new Date()
    }
})

If the first line with the wording below, then the final rendered HTML source code, compared with the second line appearance, rather than the desired: the innerHTMLproperty is bound to a messagefield to display specified text.

<div v-bind:innerHTML="message"></div> // original code
<div innerHTML="Hello Vue"></div> // rendered content

Judgment and cycle

Conditional

Vue not only bound to the attribute data, but also able to bind to the DOM structure on.

By setting the value of any attribute instance Vue trueAlternatively false, the element can be created or deleted.

View the final HTML source code shows, Vue delete elements not change its displayattributes, but directly replaces the entire HTML element to <!---->this string, which is more secure, users will not be able to get the original elements by looking at the source code of way content.

<div id="app3">
    <p v-if="seen">Now you see me :)</p>
</div>

var app3 = new Vue({
    el: '#app3',
    data: {
        seen: true
    }
})

cycle

v-forInstructions for loop through elements in the array.

In the following example, Vue instance todosattribute contains three elements, element name field text, the field value is a string.

In the HTML page, in the olinside of the lielements just write one. By v-forthe instruction, it is possible according to the number of elements in the corresponding attribute Vue example, the direct generation of a specified number of lielements, which does not contain the HTML source code of the lielement.

For each generated lielement is provided which is bound to the text todosattribute corresponding to textthe field value. I.e., a first livalue of the element, for the todosfirst attribute textvalue field, the second livalue is a second element of the textvalue field, and so on.

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: 'Learn JavaScript' },
            { text: 'Learn Vue' },
            { text: 'Build something awesome' }
        ]
    }
})

app4.todos.push({ text: 'You made it!'})Statement in app4this instance Vue todosadd a final attribute textfields.

Process user input

call function

v-onInstruction is used to bind event listeners to the specified HTML elements, such methods associated Vue instance can be called.

In the following example, the Vue instance by reverseMessagethe method to the messagereverse order of the text attributes.

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

Two-way data binding

v-modelAchieve the effect of two-way data binding.

In the following example, the v-model="message"realization of the messagetwo-way binding.

The inputcontents of the input controls that will be updated simultaneously to pthe elements.

but! pAfter the contents of the element is changed, the inputcontent controls are not synchronized. (It should be understood how this two-way data binding it?)

<div id="app-6">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

Component System

In the Vue, the component - Component, is a very important concept.

When writing large applications, many places are generic and can be divided into several small size, self-contained (What do you mean?), Reusable components. For example, the module shows the contents of a list, you can write to a big component, and each table of contents, but also a widget.

Essentially, the component is a Vue Vue example with a predefined set. The following code demonstrates how to register a Vue components:

Vue.component('todo-item', {
    template: '<li>This is a todo</li>'
})

After completion of registration component, in HTML, you can create a component by way of example, the following:

<ol>
    <todo-item></todo-item>
</ol>

However, in the above manner to define a simple assembly, instances of the plurality of components if created, generated text are the same. In order for the individual components have different content, you can propsattribute to the value of the parent domain, and transmitted to the subassembly.

Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

Then by v-bindcommand, it is transmitted to the value of each sub-assembly in the HTML parent element.

The following code example traverse Vue in HTML groceryListattributes each item item, and each of itemthe todobinding.

In the definition of the code assembly JS, receive incoming todoand lielements displayed todostring.

// 定义Vue组件todo-item
// 组件中通过名为todo的props属性
// 来从父级域向子组件中传递数据
// 下面的代码即是将传递给todo属性的text字段渲染至'li'元素中
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
}

// Vue实例中定义属性数组groceryList
new Vue({
    ...
    data: {
        groceryList: [
            { text: '...' },
            { text: '...' },
            { text: '...' }
        ]
    }
})

// HTML中创建todo-item组件
// 遍历属性数组groceryList中的每一项item
// 并将其与todo绑定
// 如此便可将每个todo中的数据传至各个组件中
<todo-item v-for="item in groceryList" v-bind:todo="item">

To sum up the above example:

1. Defined attribute array Vue example, elements of the array for displaying an ordered list on the front page;

2. Vue assembly defined, provided good props bound property name, and the display format attributes Vue example of array elements;

3. HTML page at the front end, a writing component, with the v-forarray traversal attribute, and use v-bindthe data passed to the front instance.