「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」

前言

上篇文章说了一下CSS动画。这篇看看VUE怎么做锚点跳转，还有最近使用的一些Vue模板方法总结归纳

锚点跳转

锚点跳转是指点击网页上的元素的时候能使网页上下滑动到指定的地方。 JQuery时代直接在要点击得到元素加上href再用节点选择器就可以，节点选择器就是选择要跳转标签的地方：

<a class="nav-jump" href="#jump_target"><p>跳转</p></a>

但是我们的数据使动态渲染的，这个地方不能这样写，但是原理一样，我们需要在这些地方加上字符串拼就可以了，看下面代码：
点击区域的代码：

      <div id="only_menu">
        <!-- 坐侧大菜单按钮，用于右侧菜单滑动到指定位置 -->
        <ul id="menu_list">
          <li v-for="item in url_lists" :key="item.ID" >
            <a :href="'#'+ item.Name "><div >{{ item.Name }}</div></a>
          </li>
        </ul>
      </div>

目标跳转的标签位置：

    <div id="part_right">
      <!-- 右侧网站导航栏 -->
      <ul id="url_list">
        <li v-for="item in url_lists" :key="item.ID">
          <!-- v:for嵌套循环，循环里面就不能用id定位元素了，要用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>

实现的效果：

v:bind

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

这里我加了一个a标签，在:href中的冒号:是v-bind的缩写，完整的写法：

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

这样的意思是这个a标签的href属性是动态的，是通过Vue对象控制可变的。那么就可以使用后面的item.Name来改变href属性了。
这个#就是常见的id选择器，因为在vue的列表循环中要跳的地方名字都不同，class一般控制的是做很多一样的标签属性，这里是唯一的所以一般用class,后面还是采用v-bind方法，用来给跳转目标赋值动态的id属性,我们来看看网页最终的真实代码：

v:for

除了v:bind这个模板方法这个网页还有一个v-for的模板方法
在这个网页中我使用到了v-for，这是一个vue的列表循环方法，可以根据数据动态渲染html标签,是Vue中最常见的方法之一。
在vue 2.2.2+中使用 v-for 时，key 现在是必须的而且是唯一的 ，不然控制台会报错。在列表循环中使用{{}}用来表示循环出来的渲染的变量。

总结

这个网页使用的vue模板方法只有两个，vue除了模板方法就是一些vue对象的一些内置方法，内置属性其实是否是很复杂的，例如监听，计算，事件处理，过度，组件，后面慢慢地了解学习，先做一些基本了解。