最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

LARAVEL學習 DAY 19 VUE.JS(三)

XAMPP下载 admin 686浏览 0评论
 LARAVEL學習 DAY 19 VUE.JS(三)
前言

正文
先把H*, world!的部分都砍了吧… 只是測試用的文字而已
然後非同步我覺得這種小型專案也是沒有必要用到的 所以就不去特別講了
再來就要講到Vue如何去打API了 我們會用到axios
然而呢 一個vue檔會包含(不一定都會有)三個部分
template來放你的html區塊
script來放js
style來放css
大致上就是這樣
我們先來實作index的部分 直接貼好了…

<template>
<div class=”container”>
<router-link class=”btn btn-primary” to=”/create”>新增</router-link>
<table class=”table table-hover”>
<thead>
<th>標題</th>
<th>內容</th>
</thead>
<tbody>
<router-link
tag=”tr”
v-for=”post in posts”
:key=”post.id


:to=”`${post.id

}`”
>
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
</router-link>
</tbody>
</table>
</div>
</template>

<script>
export default {
data: () => {
return {
posts: []
};
},
created() {
axios.get(‘api/crud’).then(response => {
this.posts = response.data.posts;
});
}
};
</script>
一個不小心寫得太難…
router-link是vue-router的自定義元件 其實就是一個路由跳轉的標籤
底層預設是一個<a>標籤 也可以利用tag這個prop把他改成其他的標籤 然後也是可以套css的
再來就是v-for 就好比是php的foreach 或是其他語言的for in
然後固定要帶一個v-bind:key來當唯一識別的東西
v-bind:也可以縮寫成: 就好像是v-on:click可以縮寫成@click 不過click現在沒有用到
再來就是{{ }} 這個也就好比是blade的{{ }} 基本上一模一樣…
然後每個router-link都要有一個to的prop 告訴別人該去哪裡 不過to裡面也可以有很多種形式 但是如果是number的話就會被警告…

QQ截图20180922160111
 object的話就是放name之類的別種識別方式
這邊我直接把他強制轉成string了

再來就是script的部分
data就好比是react的state 定義所需要用到的名稱跟初值
created()則是生命週期的一環
https://vuejs.org/images/lifecycle.png![](https://i.imgur.com/YNDfa95.png

)
上面是生命週期的圖

好了 這樣子列表的部分就完成了 還剩下… 3頁

結語

转载请注明:XAMPP中文组官网 » LARAVEL學習 DAY 19 VUE.JS(三)

您必须 登录 才能发表评论!