laravel - 如何使用PHP在页面初始化的时候想vuejs中传递数据？-php教程-PHP中文网

laravel - 如何使用PHP在页面初始化的时候想vuejs中传递数据？

php中文网

发布： 2016-07-06 13:52:04

原创

2134人浏览过

如何使用php在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的，而不是直接写在js里的，该怎么做？

<code><body>
<div id="app">
    <ul>
        <li v-for="task in tasks">{{ task.body }}</li>
    </ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.19/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:'go to  home',complete:true},
                {body:'watch tv',complete:true},
                {body:'go to bed',complete:true},
            ]
        }
    });
</script>
</body></code>

登录后复制

回复内容：

如何使用php在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的，而不是直接写在js里的，该怎么做？

<code><body>
<div id="app">
    <ul>
        <li v-for="task in tasks">{{ task.body }}</li>
    </ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.19/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:'go to  home',complete:true},
                {body:'watch tv',complete:true},
                {body:'go to bed',complete:true},
            ]
        }
    });
</script>
</body></code>

登录后复制

两种办法

写接口提供数据，在ready中通过Ajax 调用;
在控制器里把数据转换成JavaScript 数据类型，然后传入blade。可以参考这里: Transform PHP Vars to JavaScript

立即学习“PHP免费学习笔记（深入）”；

Ajax

<code>    new Vue({
        ready: function(){
            // ajax代码
        }
    })</code>

登录后复制

<code>new Vue({
        el:"#app",
        data:function(){
            // 
            var that = this;
            return {
                title:'我是标题',
                tasks:[
                    {body:'go to  home',complete:true},
                    {body:'watch tv',complete:true},
                    {body:'go to bed',complete:true},
                ]
            };
        },
        methods:{
            getData:function(){
                // 获取数据
            }
        },
        ready:function(){
            // 如果初始化时需要读取属性值，我会在ready初始化
            
            var that = this;
            console.log(that.title);// 获取到的title 是  '我是标题'
            that.title = "标题";
            console.log(that.title);// 获取到的title 是  '标题'
        },
        init:function(){
            // 如果初始化时不需要读取属性值，我会在init初始化
            var that = this;
            console.log(that.title);//获取到的title是undefined
        }
    });</code>

登录后复制

参考文档

面试猫

AI面试助手，在线面试神器，助你轻松拿Offer

查看详情

我这有个简单的示例你可以参考下https://github.com/TIGERB/easy-vue

可以放在ready中，具体参考官网ready

使用ajax传递json，调用服务器传递的json对Vue模板进行渲染。

<code class="js">ready: function(){
  // ajax代码
}</code>

登录后复制

ajax获取，或者直接php输出，看你需求或者怎么方便了。

<code class="js">new Vue({
    el:"#app",
    data:{
        tasks: <?= json_encode($data['list']) ?>
    }
});</code>

登录后复制

反正我是写个接口在然后在ready 里调用的

大家都在看：

在Vue.js组件中集成和渲染Twig模板内容 Vue.js组件中集成Twig模板的策略与实践解决 Laravel 与 Vue.js 应用数据无法正确显示的问题解决 Laravel 与 Vue.js 应用中数据无法正确显示的问题解决 Laravel 与 Vue.js 应用中数据未正确显示的问题