Vue Small Summary

Here are some of my own little summaries of vue in the process of using Vue, which I hope will help you learn about Vue's Pro:

1. Post request for http:

this. $http ({url: '/someurl ', Method: ' GET '}). Then (function (response) {//Success Callback}, function (r Esponse) {//Error callback});

Eg1:this. $http. Post (Serverapi, {' method ': ' Getorginfo ', ' params ': {Orgid:_orgid}}}, {

Headers: {

Token:usertoken

}

}). Then (function (response) {

if (response.ok&&response.data!=undefined) {

This.enterprisedata= Response.data[0][0];

This.enterprisedata.orgid=_orgid;

}else{

Alert (' Network request data failed! ‘);

}

},function (ERR) {//ajax request error

alert (err.message);

});

Eg2:this. $http. Post (Serverapi, _this.getorgoplistdata, {

Headers: {

Token:usertoken

}

}). Then (function (response) {

if (Response.ok && response.data! = undefined) {

Response.data[1].foreach (function (item) {

Item.members = false;

Item.leader = false;

});

This.getOrgOpListResult.items = response.data[1];

}

},function (ERR) {//ajax request error

alert (err.message);

});

There's a pit here. Note: When you assign the data of the AJAX request back to Getorgoplistresult.items, and you want to dynamically add properties to the Getorgoplistresult.items, when you need to change this property in a different way. , you do not have access to this property, so you should dynamically add attributes in the data that the AJAX request takes back. Then assign it to Getorgoplistresult.items, and then you can access and modify the properties that are dynamically added to the Getorgoplistresult.items.

2. Data bidirectional binding:

Suitable for:<input>、<select>、<textarea>

Eg:js Code:

Data () {

return {

EG1: ' Zhang San ',

}

}

HTML code:

<input type= ' text ' v-model= ' EG1 ' >

When you change the value of the text input box, the value of "EG1" in data changes accordingly.

3. If you want to simply display data in the values.

Eg:js Code:

Data () {

return {

EG1: ' Zhang San ',

}

}

HTML code: <label >{{eg1}}</label>

4. Loop through the v-for:

eg

<template v-for= "(Index City) in Dc.city" >

<option value= ' {{City.codeno}} ' >{{city.codename}}</option>

</template>

Dc.city is the index of the city data that you want to loop through Data,index, City is the alias of Dc.city, City.codeno, City.codename is the property in the data that iterates through.

5. Logical judgment V-IF:V-IF determines whether the module/dom is loaded based on the value passed.

Eg:js Code:

Data () {

return {

Showflag:true,

}

}

HTML code:

<div v-if= ' showflag ' class= ' Login-container ' ></div>

When the value of Showflag is true, a div of class Login-container is displayed.

6.v-else: The DOM that follows the V-if or v-show can be followed by v-else, logically similar to the IF and else.

7.v-on: abbreviation @, binding event listener, only native DOM events can be listened to in normal elements, custom events in the component may be monitored by custom components. You can pass the $event.

Eg1:js Code:

Methods: {

Backlogin:function () {

This.showregisterflag = false;

This.showforgotpwdflag = false;

This.showflag = true;

},

}

HTML code:

<button type= ' Submit ' class= ' btn btn-warning ' v-on:click= ' Backlogin ' > Back </button>

Invokes the ' Backlogin ' method when the return button is clicked to trigger its Clik event.

Eg2:js Code:

Methods: {

Addselectedtagformembers:function (index) {

This.getorgoplistresult.items[index].members = true;

},    }

HTML code:

<template v-for= ' item in Getorgoplistresult.items ' >

<div class= "Select-item" v-on:click= ' addselectedtagformembers ($index) ' >{{item.name}}</div>

</template>

When you click a div with a class of Select-item, call the Addselectedtagformembers ($index) method, In this method, change the current value of the Members property in the Getorgoplistresult.items you clicked.

8.v-bind: Can bind Src/class/style/prop and so on, here the emphasis is V-bind:class usage

EG1: <div class= "Select-item" v-bind:class= "{' Selected ': Item.members}" ></div>

When the value of Item.members is true, the DIV's class= "Select-item selected"

EG2:

<input v-bind:class= "{' Reds ': Confirmpassword!=registereddata.password}" class= ' Form-control ' type= "password" >

The Password box class= ' Form-control Reds ' when Confirmpassword!=registereddata.password is met

9.v-link: is an instruction to allow users to jump between different paths in a vue-router application. The directive accepts a JavaScript expression and invokes it with the value of the expression when the user taps the element router.go .

Eg: <a v-link= "{path: '/practice/taskassignment/' +parmasforrouter.ac_id, Activeclass: ' Practice-active-class '}" > Task Assignments </a>

When you want to jump in the past page taskassignment to get your jump page simultaneous parameter ac_id value, the following way to get the value of the parameters:

var acid=this. $route. params.ac_id;

The class when the link is active: the element with the v-link instruction, and if the v-link corresponding URL matches the current path, the element is added to the specific class. The class that is added by default is the one .v-link-active that determines whether active use contains sexual matches .

The class name when the link is active can be customized by specifying the global option when the router instance is created linkActiveClass , or it can be activeClass specified individually through the inline option:

<a v-link="{ path: ‘/a‘, activeClass: ‘custom-active-class‘ }"></a>

10. Reference plugin:

Eg:js Code:

Import yezitablepaing from ' Yezi-vue/widget/yezitablepaing.vue '

Export Default {

components:{

Yezitablepaing

},

props:{},

}

When you use import to refer to the plugin, you remember to write it in components.

Vue Small Summary