如何使用PHP在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的,而不是直接写在js里的,该怎么做?
- {{ task.body }}
两种办法
写接口提供数据,在ready中通过Ajax 调用;
在控制器里把数据转换成JavaScript 数据类型,然后传入blade。可以参考这里: Transform PHP Vars to JavaScript
Ajax
new Vue({ ready: function(){ // ajax代码 } })
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 } });
我这有个简单的示例你可以参考下https://github.com/TIGERB/easy-vue
可以放在ready
中,具体参考官网ready
使用ajax传递json,调用服务器传递的json对Vue模板进行渲染。
ready: function(){
// ajax代码
}
ajax获取,或者直接php输出,看你需求或者怎么方便了。
new Vue({
el:"#app",
data:{
tasks: <?= json_encode($data['list']) ?>
}
});
反正我是写个接口在 然后在ready 里调用的