js转vue.js语法

js语法：
<script>
$(function() {
    // Set up tour
    $(‘body‘).pagewalkthrough({
        name: ‘introduction‘,
        steps: [{
           popup: {
               content: ‘#walkthrough-1‘,
               type: ‘modal‘
           }
        },  {
            wrapper: ‘.con1‘,
            popup: {
                content: ‘#walkthrough-2‘,
                type: ‘tooltip‘,
                position: ‘bottom‘
            }
        }, {
            wrapper: ‘.con2‘,
            popup: {
                content: ‘#walkthrough-3‘,
                type: ‘tooltip‘,
                position: ‘bottom‘
            }
        },{
            wrapper: ‘.con3‘,
            popup: {
                content: ‘#walkthrough-4‘,
                type: ‘tooltip‘,
                position: ‘left‘
            }
        },{
            wrapper: ‘.con4‘,
            popup: {
                content: ‘#walkthrough-5‘,
                type: ‘tooltip‘,
                position: ‘bottom‘
            }
        }]
    });

    // Show the tour
    $(‘body‘).pagewalkthrough(‘show‘);
});
</script>
转换成
vue.js语法

  
  

   
   

    
    <
    
    script
    
    >
   
   
   
   

    
    import
    
     $ 
    
    from
    
     
    
    'jquery'
   
   
   
   

    
    import
    
     
    
    'assets/js/jquery.pagewalkthrough.min.js'
   
   

   
   

    
    export
    
     
    
    default
    
     {
   
   
   
   

    
      name: 
    
    'helpdoc'
    
    ,
   
   
   
   

    
      mounted () {
   
   
   
   

    
        
    
    this
    
    .reard()
   
   
   
   

    
      },
   
   
   
   

    
      methods: {
   
   
   
   

    
        reard () {
   
   
   
   

    
          $(
    
    'body'
    
    ).pagewalkthrough({
   
   
   
   

    
            name: 
    
    'introduction'
    
    ,
   
   
   
   

    
            steps: [{
   
   
   
   

    
              popup: {
   
   
   
   

    
                content: 
    
    '#walkthrough-11'
    
    ,
   
   
   
   

    
                type: 
    
    'modal'
   
   
   
   

    
              }
   
   
   
   

    
            },
   
   
   
   

    
            {
   
   
   
   

    
              wrapper: 
    
    '.con11'
    
    ,
   
   
   
   

    
              popup: {
   
   
   
   

    
                content: 
    
    '#walkthrough-22'
    
    ,
   
   
   
   

    
                type: 
    
    'tooltip'
    
    ,
   
   
   
   

    
                position: 
    
    'bottom'
   
   
   
   

    
              }
   
   
   
   

    
            },
   
   
   
   

    
            {
   
   
   
   

    
              wrapper: 
    
    '.con22'
    
    ,
   
   
   
   

    
              popup: {
   
   
   
   

    
                content: 
    
    '#walkthrough-33'
    
    ,
   
   
   
   

    
                type: 
    
    'tooltip'
    
    ,
   
   
   
   

    
                position: 
    
    'bottom'
   
   
   
   

    
              }
   
   
   
   

    
            },
   
   
   
   

    
            {
   
   
   
   

    
              wrapper: 
    
    '.con33'
    
    ,
   
   
   
   

    
              popup: {
   
   
   
   

    
                content: 
    
    '#walkthrough-44'
    
    ,
   
   
   
   

    
                type: 
    
    'tooltip'
    
    ,
   
   
   
   

    
                position: 
    
    'bottom'
   
   
   
   

    
              }
   
   
   
   

    
            },
   
   
   
   

    
            {
   
   
   
   

    
              wrapper: 
    
    '.con44'
    
    ,
   
   
   
   

    
              popup: {
   
   
   
   

    
                content: 
    
    '#walkthrough-55'
    
    ,
   
   
   
   

    
                type: 
    
    'tooltip'
    
    ,
   
   
   
   

    
                position: 
    
    'top'
   
   
   
   

    
              }
   
   
   
   

    
            }]
   
   
   
   

    
          })
   
   

   
   

    
              
    
    // Show the tour
   
   
   
   

    
          $(
    
    'body'
    
    ).pagewalkthrough(
    
    'show'
    
    )
   
   
   
   

    
        }
   
   
   
   

    
      }
   
   
   
   

    
    }
   
   
   
   

    
    </
    
    script
    
    >