[已解决]blade中vue无法渲染

Question

业务背景

php0基础
接到一个半路活,blade页面已经全部写好
我得在前端调用接口,用vue绑定数据

问题

vue的代码根本没有渲染
渲染后的html代码如下:

<li v-for="(banner,index) in banners" :data-slide-to="banner.id" :class="index === 0 ? 'active':''">
  {{banner.mg}}
</li>

源码

app.blade.php

<ol>
<li v-for="(banner,index) in banners" :data-slide-to="banner.id" :class="index === 0 ? 'active':''">
    @{{banner.img}}
</li>
</ol>
@section('js')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
$(document).ready(function() {
        // 数据填充
        var vueApp = new Vue({
            el: 'vueApp',
            data: {
                banners: {} 
            }
        })
        setTimeout(function(){
            vueApp.banners = [{id:1,img:1},
                        {id:1,img:2}];
        },1000)
    });
</script>
@endsection

感谢

看到有人说,要先在后台编译vue,再引入到blade里面去,是这样么,如何操作呢
主要是太赶时间了,只能先上来问一下大家啦谢谢

解决

其实和blade没有半毛钱关系 .......
只是在实例化vue对象的时候...el参数值里面没有#这个符号
..
咳..
这是什么原因呢

因为不会php.无形中给自己设置了障碍.
本身很简单的一个问题,因为没用过php,一开始就主观上认为自己处理不了...
这种现象值得深入分析一下...可以请教一下心理学家......

Answer 1

需要配置下webpack，用相应的插件编译vue代码

https://segmentfault.com/a/1190000006650349