最近寫一個項目是基于laravel框架的，這個框架傳言是為藝術(shù)而創(chuàng)作的優(yōu)雅框架，簡潔分明的風(fēng)格，很吸引我，所以最近研究比較多。本次就是基于該框架然后將Vue插件加入實現(xiàn)一定的功能，vue插件本身強大，具體不說了，有興趣的同學(xué)可以去官網(wǎng)https://cn.vuejs.org/。laravel 本身php頁面是用blade引擎，渲染數(shù)據(jù)格式：
{{msg}}
但是熟悉Vue渲染的同學(xué)知道Vue的格式是：
<div id="app">
{{ message }}
</div>
這樣就引起了沖突，因此，可以是
@{{msg}}
使用@跳出blade引擎模式。
以下代碼摘自是laravel-china@leo作者
<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="javascript:void(0)" rel="external nofollow" @click="edit(item)">{{ trans('admin.edit') }}</a>
</td>
</tr>
以下是本人自己寫的代碼：
<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}}
學(xué)期：@{{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>
有時候我們可能向帶有鏈接的地方插入Vue數(shù)據(jù)值作為參數(shù)，但是熟悉Vue的同學(xué)知道Vue是mustache 語法不能作用在 HTML 特性上，遇到這種情況應(yīng)該使用 v-bind 指令：
另外一種思路是使用v-on:click。
<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);
},
}
又例如下面的代碼：
<img v-bind:src="course.thumblink" width="236" height="124">
就是使用v-bind實現(xiàn)數(shù)據(jù)的綁定。
最重要的是我吃了很長的時間的慣性思維的虧，認(rèn)為使用ajax發(fā)送請求都是同樣的模板。
但是在laravel中必須考慮CSRF-TOKEN。
如下的代碼：
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!')
}
});
};
如果你的頁面沒有看到一個CSRF，可以在頁面頭部加入
<meta name="_token" content="{{ csrf_token() }}"/>
這樣就可以請求成功。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持。
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。