jquer+vue自动提取生成目录_综合

jquer+vue根据标题自动生成目录并且秒点定位，话不多说直接上代码。本人微信wyk1364630428，承接微信小程序开发，后台官网web开发欢迎合作。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jquer+vue根据标题自动生成目录</title><!-- 本地JS --><script src="./jquery.js"></script><!-- cdn方式VUE --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//cdn VUE<style>#point{
     margin-bottom: 580px;}#point h1{
     font-size: 32px;color: red;}#point h2{
     font-size: 24px;color: aqua;}#point h3{
     font-size: 16px;color:#666;}</style></head><body><div id="app"><div><p>锚点定位器</p><div v-html="point" id="point"></div></div><div id="text"><h1>这里是一级标题A</h1><h2>这里是二级标题</h2><p>aaa</p><h2>这里是二级标题</h2><h2>这里是二级标题</h2><h3>这里是三级标题</h3><h1>这里是一级标题B</h1><h2>这里是二级标题</h2><h3>这里是三级标题</h3></div></div></body><script type="text/jscript">var vm = new Vue({
     el: "#app",data: {
     point: {
     }},mounted() {
     var points = $('#text') //内容列表var point = ''//循环获取内容的所有标签for (var i = 0; i < points[0].children.length; i++) {
     // 获取带H的标签if (points[0].children[i].localName.indexOf('h') !== -1) {
     // 获取h2if (points[0].children[i].localName.indexOf('h1') !== -1) {
     points[0].children[i].className = i}// // 获取h2if (points[0].children[i].localName.indexOf('h2') !== -1) {
     points[0].children[i].className = i}//获取h3if (points[0].children[i].localName.indexOf('h3') !== -1) {
     points[0].children[i].className = i}const title = $.extend(true, {
     }, points[0].children[i]);point += title.outerHTMLpoints[0].children[i].id = `h1_id_${
       i}`}}this.point = point//循环获取标题标签给内容加点击事件//延迟0秒setTimeout(function() {
     //循环获取内容的所有标签for (var i = 0; i < $('#point')[0].children.length; i++) {
     // $('#point')[0].children[i].className 设置class名称//绑定点击事件根据className定位内容ID位置$($('#point')[0].children[i]).click(function(e) {
     location.href = `#h1_id_${
       e.target.className}`;})}}, 0); //延时10秒},methods: {
      //这个methods属性中定义了当前vue实例所有可用的方法}})</script>
</html>