tp前后端不分离源码_前后端不分离的情况下，TP5的视图页面中如何使用vue来接受和传递数据？...

方法1: 直接赋值

控制器:

$this->assign([

'name' =>'tp',

'email'=>'tp@example.com',

'array' => json_encode(array('a', 'b'))

]);

视图

var app = new Vue({

el: "#app",

data: {

name: '{$siteName}',

email: '{$email}',

array: {$array}

}

})

方法2: 使用ajax获取数据

完整视图test.html:

Document

var app = new Vue({

el: "#app",

data: {

name: '',

email: '',

array: null

},

methods: {

getData: function() {

var vm = this;

axios.get('/index.php?s=index/index/getData',{

params:{

name: 'tp',

email: 'tp@example.com',

array: ['a', 'b']

}

})

.then(function (response) {

var data = response.data;

vm.name = data['name'];

vm.email = data['email'];

vm.array = data['array'];

})

.catch(function (error) {

console.log(error);

});

}

},

mounted: function() {

this.getData();

}

});

完整控制器Index.php:

namespace app\index\controller;

use think\Controller;

use think\Request;

class Index extends Controller

{

public function test()

{

return $this->fetch('test');

}

public function getData(Request $request)

{

$arr = [

'name' =>$_GET['name'],

'email'=>$_GET['email'],

'array' => $_GET['array']

];

return json($arr);

}

}

文件位置自己调整一下，推荐使用第二种方法，将来去耦合的时候，改动没有那么大