Separation from front to back [vue2.0+.net Core2.1] 18 ║vue Basics: Instruction (bottom) + computed properties

Review

Today to late spicy, to the company to do a small project, a waterfall stream + dynamic video control of the demo, there is a need to contact me, the company's project will not show the external (a back-end programmer really want to dry the front end of haha ha).

The book connected to the above, yesterday formally began the Vue Code of learning, simple through some fake data to show the next person's blog home list, do not know if you remember what was said yesterday, if not too clear, you can review the "from the beginning of the front and rear end separation [vue2.0+.net Core2.1] 17 ║vue Basics: Using Vue.js to draw a blog home (a), we mainly say, what is the core grammar of Vue, what does MVVM embody, How to simply install the Vue environment (by direct reference to the form of the Vue.js file), as well as the usual 10-day instruction of the first five, and through the explanation, we have done a small demo, is a personal blog system home (here is a style to steal netizens, because I look really like haha). In fact, the main thing to remember, with Vue this type of MVVM framework development, it is necessary to get rid of the previous Dom operation of the habit, changed to manipulate the data to control the view, if you vue this a meeting, then learn small program development is minutes of things, hmm ~ ~ ~

On the back of the actual combat link, I have not determined what kind of blog to use, if you see there is good, you can leave a message, we can expand on it as the basis, if not, I will write a simple bar, of course, or that sentence, I just a point of the role, Also to see this article's small partners lost momentum, this time to say QQ group of small partners, have begun to use Vue, with the front of the tutorial and their own. Net Core Project Development page, I feel very happy! At least at the usual time, it is also good to learn something together. Although not hands-on, but some of the suggestions are as far as possible to the small partners to ask questions. Haha, {{Tough to retract the topic}}, today we go on a piece of content, continue down, mainly: the basic instruction is finished, the calculation of properties and listeners ,Class and Style binding , mainly these three parts, On the blog page design add articles, delete articles, filter articles and other functions.

0. Finish the lower left corner today Light BluePart of

I. Summary of some of the instructions commonly used by VUE (bottom) 1, add the v-once directive--Prohibit modification

Look at the name to know, this is the meaning of a time, that is, after the first rendering, no matter how the data changes will not affect the node, only render elements and components once. Subsequent re-rendering, the element/component and all of its child nodes will be treated as static content and skipped. This can be used to optimize update performance.

Note: However, I would like to say that this directive is generally not used, unless it is a large number of static data, do not want to take time to load each time, if too much use of the instruction will have a lot of unexpected problems, because the data is not refreshed, not suitable for the first small partner to use.

2. V-bind (:) Instruction--dynamic property

in yesterday's blog home contact, we have actually used this directive, we should not notice, is the article list accompany the href attribute.

　　v-bindThe role and usage of directives, which are used to dynamically bind the attributes of DOM elements, compare the SRC attributes of a common example of the:<a> tag's href attribute, tag.

<ulclass="post-list non-style-list"> <li V for='Item in List' class="Post-list-item"><!--Use the V-bind command here.<a v-bind:href="' www.cnblogs.com/laozhang-is-phi/p/' + item.id + '. html '">{{item.name}}</a><!--can also write the linkurl here is a variable--<a:href="Linkurl">{{item.name}}</a> <spanclass="post-list-date"> ({{item.date}}) </span> </li> </ul>

You can also: bind one or more attributes dynamically, or a component prop to an expression (remember, it is a dynamic binding, which means there are variables in the attribute ).

<!--binding an object with properties--><div v-bind="{id:someprop, ' other-attr ': otherprop}">< /div><!--bind DOM properties by prop modifier--><div v-bind:text-content.prop="text">< /div>

3, v-on (@) Instruction--Event trigger

Binds the event listener. The event type is specified by the parameter. The expression can be either the name of a method or an inline statement, which can be omitted if no modifiers are present.

When used on ordinary elements, only native DOM events can be monitored. When used on a custom element component, you can also listen for custom events that are triggered by the child component. Equivalent to the listener that binds the event, the bound event is triggered, and the handler function of the event can be specified.

We can simply say a chestnut, on the homepage of our blog on the avatar, add a click event (that is, the previous click event),

<div  v-on:click="alert (' I am Lao Zhang's Philosophical Avatar ')">  </div>
Note that v-on can be replaced with @, such as
<div @:click= "alert (' I am Lao Zhang's Philosophical Avatar ')" > </div>

In our page, we can use to trigger: Add, Filter function

A. create a new input tag and add a carriage return event

<input @keydown. enter="addarticle " type="text"class ="edit" placeholder=" Press ENTER to add article ">

B, in the methods of the Vue instance, add our Addarticle method uniformly.

            //All our methods are written here in unity.methods: {//Add Eventaddarticle:function () {//put the article into the list array, note this point! //Invert the data                     This. List = This. List.reverse ();  This. List.push ( This. Task);  This. List = This. List.reverse (); //after depositing list[], reset task                     This. Task ={name:'',//content is emptyId: +, Date:"Just Now", finished:false,//not completedDeletedfalse//not deleted                    }                }            },

C, this time, the last step, is to get the reference to input (this time can not be as before, according to the ID to get results)

Remember the basic grammar of our previous account and the core functions of Vue, when it comes to a very big feature is data-driven-two-way data binding, not only we can assign value to data, but also through the DOM operation, will refer to the data, yes, that is the command below, V-model.  

In addition, there are other directives that are used

4. v-model directive-bidirectional data binding

This is a very important and often used instruction, mainly form operation, it can easily implement the form control and data of two-way binding, relative to the previous manual update Dom, the top also said.

In the previous input box, add the V-model directive

<input @keydown. enter="addarticle " type="text"class ="edit" v-model="task.name" placeholder= "  Press ENTER to add thearticle >

This time, our blog added the function is good (of course, is now the lowest end of the most low, just to explain the V-model instructions, blog add will then use express backstage management).

Well, the commonly used VUE instructions have been explained, and there are some other less commonly used when you can use some of the time to understand.

Second, calculate the attribute Computed 1, the principle of the calculation of properties

It is convenient to use expressions within templates, but they are designed for simple operations. Putting too much logic into a template can make the template too heavy and difficult to maintain. For example:

<div id="example">  {{message.split ("). Reverse (). Join ( '' )}}</div>

In this place, the template is no longer a simple declarative logic. You have to look at it for a while to realize that this is the flip string that you want to display message the variable. When you want to refer to the flip string here more than once in a template, it becomes more difficult to handle, and then if you use such a large number of expressions, it will make the whole page not only look good, but also heavy.

So, for any complex logic, you should use computed properties.

Like the chestnut on the top, we can write it like this:

<div id="Example">//1. Here is the value we defined in computed, not in data<p>message:"{{Reversedmessage}}"</p></div>varVM =NewVue ({el:'#example', data: {message:'Hello'}, computed: {//getter for computed propertiesreversedmessage:function () {//Watch out! ' This ' points to the VM instance      return  This. Message.split (''). Reverse (). Join ('')    }  }})

This looks clear and reduces the load on the page. Here you can be curious, this is like a data middleware, do not have to do any other operations, can implement this logic, like the shadow of data, yes! The computed property is a getter.

You can bind a computed property in a template just as you would a normal property. Vue knows the vm.reversedMessage dependencies vm.message , so when vm.message a change occurs, all dependent vm.reversedMessage bindings are updated. And best of all, we've created this dependency in a declarative way: The Getter function that calculates the property has no side-effect (side effect), which makes it easier to test and understand.

2, know his principle and how to use, then we can use in our project calculation properties to achieve our dynamic query the function of the article

We first add a calculation attribute to filter our article List data

            //filtering data by calculation propertiescomputed: {listsearch:function () {//Why do you want to save this because the filter filter will change the point of thisLet that = This; return  This. List.filter (function (item) {//simply determine if the article name contains the value in input because it is bidirectional bound, so that is Task.name                        returnItem.name.indexOf (that. $data. Task.name) >=0;                }); }            }

Next, we need to replace our computed attribute Listsearch with the list in the view to achieve filtering:

<li vfor ='listsearch'class="post-list-item >      class="post-list-date"> ({{item.date}}) </ Span>  </li>

Finally we can look at the effect:

Note: The calculated property defaults to getter only, but you can also provide a setter when needed:

computed: {fullName: {//Getter    Get: Function () {return  This. FirstName +' '+ This. LastName},//Setter    Set: Function (newvalue) {varNames = Newvalue.split (' ')       This. FirstName = names[0]       This. LastName = Names[names.length-1]    }  }}

The setter will be called when it is run again, vm.fullName = '老张 哲学' vm.firstName and it will be vm.lastName updated accordingly.

Third, listener (not recommended for multi-use)

Although a computed property is more appropriate in most cases, a custom listener is sometimes required. That's why Vue watch provides a more general way to respond to changes in data with options. This approach is most useful when you need to perform asynchronous or expensive operations when data changes ( this is to emphasize that it is an asynchronous operation, or an expensive operation ).

Here, we listen to the data changes of our input inputs, that is, the value of Task.name.

The general wording is this:

NewVue ({data: {Author:"Lao Zhang's philosophy", Task: {name:'',//content is emptyId: -, Date:"Just Now", finished:false,//not completedDeletedfalse//not deleted}, Watch: {author:function (newval, Oldval) {Console.log ("author Change spicy,")    }  }})

But in our pest, we listen to one of the properties of an object, that is, Task.name,

So that's what we're going to write:

Watch: {     task.name () {         /// This can be performed once the value of the listener changes what you want to do      }},

However, this does not conform to the rules, it must be a variable, and therefore error:

So we need to use the computed attribute to define it, remember what the computed attribute is, it's like a data middleware that encapsulates the original data,

That's exactly what we can do to encapsulate the task.name, and it will end up like this:

NewVue ({data: {Author:"Lao Zhang's philosophy", Task: {name:'',//content is emptyId: -, Date:"Just Now", finished:false,//not completedDeletedfalse//not deleted}, Watch: {author:function (newval, Oldval) {Console.log ("author Change spicy,")}, NAMECPT (): Function (newval, oldval) {Console.log ("task.name change Spicy,")},},//manipulate any data we need to use by calculating propertiescomputed: {namecpt () {return  This. Task.name} }})

Note: Although Vue provides a more general way to observe and respond to data changes on a Vue instance: the Listen property. 但是monitoring is a waste of resources, and when we have some data that needs to change with other data, it's easy to misuse, so it's watch， usually better to use a computed property instead of a command-style watch callback.

Iv. Hasty Conclusion

Today is a bit late, dynamic class and Style binding did not say, then we'll talk about it next time! Today, we mainly say the commonly used directives, the main is V-model, V-bind, v-on Three instructions, and then also said the calculation of properties and listeners, I in the process of development, the calculation of properties are used more, but some time, watch listener will play a different role! OK, next time let's talk about dynamic class and Style bindings and the important life cycle explained .

Five, CODE