laravel - 如何使用PHP在页面初始化的时候想vuejs中传递数据?
如何使用PHP在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的,而不是直接写在js里的,该怎么做?
<code> <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> </code>
回复内容:
如何使用PHP在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的,而不是直接写在js里的,该怎么做?
<code> <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> </code>
两种办法
写接口提供数据,在ready中通过Ajax 调用;
在控制器里把数据转换成JavaScript 数据类型,然后传入blade。可以参考这里: Transform PHP Vars to JavaScript
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>
参考文档
我这有个简单的示例你可以参考下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 里调用的

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PHP主要是過程式編程,但也支持面向對象編程(OOP);Python支持多種範式,包括OOP、函數式和過程式編程。 PHP適合web開發,Python適用於多種應用,如數據分析和機器學習。

PHP適合網頁開發和快速原型開發,Python適用於數據科學和機器學習。 1.PHP用於動態網頁開發,語法簡單,適合快速開發。 2.Python語法簡潔,適用於多領域,庫生態系統強大。

Laravel 是一款 PHP 框架,用於輕鬆構建 Web 應用程序。它提供一系列強大的功能,包括:安裝: 使用 Composer 全局安裝 Laravel CLI,並在項目目錄中創建應用程序。路由: 在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖: 在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成: 提供與 MySQL 等數據庫的開箱即用集成,並使用遷移來創建和修改表。模型和控制器: 模型表示數據庫實體,控制器處理 HTTP 請求。

PHP起源於1994年,由RasmusLerdorf開發,最初用於跟踪網站訪問者,逐漸演變為服務器端腳本語言,廣泛應用於網頁開發。 Python由GuidovanRossum於1980年代末開發,1991年首次發布,強調代碼可讀性和簡潔性,適用於科學計算、數據分析等領域。

PHP適用於Web開發和內容管理系統,Python適合數據科學、機器學習和自動化腳本。 1.PHP在構建快速、可擴展的網站和應用程序方面表現出色,常用於WordPress等CMS。 2.Python在數據科學和機器學習領域表現卓越,擁有豐富的庫如NumPy和TensorFlow。

Vue.js是由尤雨溪在2014年發布的漸進式JavaScript框架,用於構建用戶界面。它的核心優勢包括:1.響應式數據綁定,數據變化自動更新視圖;2.組件化開發,UI可拆分為獨立、可複用的組件。

PHPhassignificantlyimpactedwebdevelopmentandextendsbeyondit.1)ItpowersmajorplatformslikeWordPressandexcelsindatabaseinteractions.2)PHP'sadaptabilityallowsittoscaleforlargeapplicationsusingframeworkslikeLaravel.3)Beyondweb,PHPisusedincommand-linescrip

在使用CraftCMS開發網站時,常常會遇到資源文件緩存的問題,特別是當你頻繁更新CSS和JavaScript文件時,舊版本的文件可能仍然被瀏覽器緩存,導致用戶無法及時看到最新的更改。這個問題不僅影響用戶體驗,還會增加開發和調試的難度。最近,我在項目中遇到了類似的困擾,經過一番探索,我找到了wiejeben/craft-laravel-mix這個插件,它完美地解決了我的緩存問題。
