《PHP編程:laravel 中如何使用ajax和vue總結》要點:
本文介紹了PHP編程:laravel 中如何使用ajax和vue總結,希望對您有用。如果有疑問,可以聯系我們。
PHP學習最近寫一個項目是基于laravel框架的,這個框架傳言是為藝術而創作的優雅框架,簡潔分明的風格,很吸引我,所以最近研究比較多.本次就是基于該框架然后將Vue插件加入實現一定的功能,vue插件本身強大,具體不說了,有興趣的同學可以去官網https://cn.vuejs.org/.laravel 本身php頁面是用blade引擎,渲染數據格式:
PHP學習 {{msg}}
PHP學習但是熟悉Vue渲染的同學知道Vue的格式是:
PHP學習 <div id="app"> {{ message }} </div>
PHP學習這樣就引起了沖突,因此,可以是
PHP學習 @{{msg}}
PHP學習使用@跳出blade引擎模式.
PHP學習以下代碼摘自是laravel-china@leo作者
PHP學習 <tr v-for="item in services"> <td>@{{ item.id }}</td> <td>@{{ item.name }}</td> <td>@{{{ displayHosts(item.hosts) }}}</td> <td>@{{{ bool2icon(item.enabled) }}}</td> <td>@{{{ bool2icon(item.allow_proxy) }}}</td> <td>@{{ item.created_at }}</td> <td> <a href="void(0)" rel="external nofollow" @click="edit(item)">{{ trans('admin.edit') }}</a> </td> </tr>
PHP學習以下是本人自己寫的代碼:
PHP學習 <li class="wrap" v-for="(course,index) in courses.data"> <div class="img"> <a v-on:click="show(course)"> <img v-bind:src="course.thumblink" width="236" height="124"> </a> </div> <div class="coursetitle"> @{{course.name}} </div> <div class="lecturer"> 講師:@{{course.teachername}} 學期:@{{course.semester}} </div> <div class="price"> @{{course.price}}元 </div> <div class="pull-left"> <button type="button" class="btn btn-success btn-xs" v-on:click="show(course)">詳情</button> </div>
PHP學習有時候我們可能向帶有鏈接的地方插入Vue數據值作為參數,但是熟悉Vue的同學知道Vue是mustache 語法不能作用在 HTML 特性上,遇到這種情況應該使用 v-bind 指令:
PHP學習另外一種思路是使用v-on:click.
PHP學習 <a v-on:click="show(course)"> Vue實例代碼: methods:{ show:function(course) { // debugger; window.location.href="/prices/detail/" rel="external nofollow" +course.course_id; // console.log(result); }, }
PHP學習又例如下面的代碼:
PHP學習 <img v-bind:src="course.thumblink" width="236" height="124">
PHP學習就是使用v-bind實現數據的綁定.
PHP學習最重要的是我吃了很長的時間的慣性思維的虧,認為使用ajax發送請求都是同樣的模板.
PHP學習但是在laravel中必須考慮CSRF-TOKEN.
PHP學習如下的代碼:
PHP學習 function init_courses() { // debugger; $.ajax({ type:"post", url:'/selectCourse', dataType: 'json', data:{result:resul='全部,全部,全部'}, headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, success:function(data) { mydata.courses=eval(data.result); console.log(mydata.courses); }, error: function(xhr, type){ alert('Ajax error!') } }); };
PHP學習如果你的頁面沒有看到一個CSRF,可以在頁面頭部加入
PHP學習 <meta name="_token" content="{{ csrf_token() }}"/>
PHP學習這樣就可以請求成功.
PHP學習以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家.
轉載請注明本頁網址:
http://www.snjht.com/jiaocheng/301.html