干货:jsp+jquery(非vue)项目中怎样正常使用vue组件

1.首先在页面上正常引入vue.js文件(可引入离线包,也可引入官网上的cdn链接)

   我是引入的离线包:

2.通过引入httpVueLoader文件,来加载一个新的vue子组件

  先引入进来:

httpVueLoader下载方式:https://download.csdn.net/download/qq_38804584/16524043?spm=1001.2014.3001.5503

3.使用方法:

  先创建一个新的vue组件:

画重点,特别注意:子组件中script中用module.exports = {}的形式,不然肯定不行

这是重点注意地方 !!!!

3.最后vue中使用方法:

    方法1:

<body>

    <div id="test">
        
        <hello title="哈哈"></hello>
        
    </div>

</body>
<script>
    
  Vue.use(httpVueLoader);
  
  new Vue({
        el:'#test',
        data(){
          return{
          }
        },
        methods:{
        },
        components:{
          'hello': 'url:../components/hello.vue',
        }
     })


</script>

方法2:

<body>

    <div id="test">

        <hello title="哈哈"></hello>

    </div>

</body>
<script>

  Vue.use(httpVueLoader);

  new Vue({
        el:'#test',
        data(){
          return{
          }
        },
        methods:{
        },
        components:{
          'hello':httpVueLoader('../components/hello.vue')
        }
     })


</script>

声明:这是我同事弄出来的哈,她查询了很多资料,找到了httpVueLoader文件,引进去发现各种报错,跨域什么的,然后她就自己修改了这个文件,我们两个加以测试,可以正常使用!

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值