Vue framework construction and Basic Use (III)

This is my third article on getting started,

preface

Last time talked about the steps of vUE framework construction, so this time will talk about the basic use of VUE after building a framework.

Vue framework used

Front-end development is nothing more than the framework, page, data, frame we choose vUE, page we build the framework after running the project, we will find that the framework helps us build a welcome page, is also a page template given by the framework, data needs to use Ajax requests, there are two commonly used ajax encapsulation in VUE, For vue-resource, fetch and axios, NPM install –save the name of the plugin. For vue-resource, fetch and axios, NPM install –save the name of the plugin. NPM install –save axios, fetch is a little special, use NPM install whatwg-fetch –save

Vue page structure analysis:

• The use of a VUE begins by creating a VUE objectlet vm = new Vue();
• instantiation

vm = new Vue({
el:"#app".data: {methods: {},watch: {},filters: {},}})Copy the code

• Create a VUE object
• When you create a Vue object, you need to pass parameters, which are JSON objects. Json objects must have at least two attribute members

Configuration Item Description

• El: Sets the range of HTML content that the VUE can manipulate. The value is the CSS ID selector.

• Data: Saves the data in vue.js to be displayed on the HTML page.

• Methods: Define functions.

• Watch: Listening property

• Filters: Defines filters.

Common vUE directives

• Vue uses {{}} to bind data. This syntax is called mustache, and the things inside the braces appear as variables. Write like this:

<div id="firstVue">
    {{my_data}}
</div>
Copy the code

This is the data binding inside the HTML tag, so if you want to bind the value of an HTML tag attribute, you need to use the V-bind: attribute. For example, if I want to bind a hidden attribute to the tag, I should say:

<div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>
Copy the code

V-bind is often used, so it can also be shortened to a colon:, as above

<div id="firstVue" :hidden="my_hidden">{{my_data}}</div>
Copy the code

<button v-on:click="clickButton()">Click Me</button>
Copy the code

<button @click="clickButton()">Click Me</button>
Copy the code