“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

The last article talked about CSS animations. This article looks at how VUE does anchor jump, as well as some recent VUE template method summary summary

Anchor point jump

Anchor jump refers to clicking on an element on a web page that slides the page up and down to a specified location. JQuery uses the node selector to select the tag that you want to jump to.

< a class = "nav - jump" href = "# jump_target" > < p > jump < / p > < / a >Copy the code

But our data is dynamically rendered, so we can’t write this, but the principle is the same, we need to add string spelling to these places, look at the following code:

<div id="only_menu"> <! -- Sit side large menu button, Used to slide on the right side of the menu to the specified location - > < ul id = "menu_list" > < li v - for = "item in url_lists:" key = "item. Id" > < a: href = "' # '+ item. The Name" > < div > {{  item.Name }}</div></a> </li> </ul> </div>Copy the code

Target jump tag position:

<div id="part_right"> <! - site navigation bar on the right side - > < ul id = "url_list" > < li v - for = "item in url_lists:" key = "item. Id" > <! -- v:for nested loop, inside loop can not locate element with id, Use class --> <div class="one_part"> <div class="menu_target" :id='item.Name'>{{item.Name}}</div> <div class="url_list_data card"> <li v-for="url_data in item.UrlLists" :key="url_data.ID" class="data-container" > <a :href="url_data.URL" class="btn">{{ url_data.Name }}</a> </li> </div> </div> </li> </ul> </div>Copy the code

Effect achieved:

v:bind

 <a :href="'#'+ item.Name "><div >{{ item.Name }}</div></a>
Copy the code

I’ve put an A tag here, the colon in the :href is short for V-bind, full form:

 <a v-bind:href="'#'+ item.Name "><div >{{ item.Name }}</div></a>
Copy the code

The href attribute of the A tag is dynamic and is controlled by the Vue object. You can then use the following item.Name to change the href attribute. This # is a common id selector, because there are different names in vue’s list loop to jump to, and class controls the ability to do many of the same tag attributes. This is the only one, so you use class, and then v-bind, To assign the dynamic ID attribute to the jump target, let’s look at the actual code for the final page:

v:for

In addition to the v:bind template method, this page also has a v-for template method. In this page I use V-for, which is a vUE list loop method that dynamically renders HTML tags based on data and is one of the most common methods in VUE. Key is now required and unique when using V-for in VUE 2.2.2+, otherwise the console will report an error. Use {{}} in the list loop to represent the variables of the looping render.

conclusion

This page uses vUE template method only two, vUE in addition to template method is some vUE object some built-in methods, built-in properties are actually very complex, such as monitoring, calculation, event processing, excessive, components, behind slowly understand learning, do some basic understanding first.