Fork me on GitHub

laravel5.5使用vue的基本开发


知识太多了就容易装B,知识太少就容易犯浑,像我这样不多不少刚刚好,想装B就装B,想犯浑就犯浑。

准备

1
2
3
php artisan make:auth
php artisan migrate
npm install

注册用户以后登录到 home, 接下来我们会在 home 视图上创建我们的第一个组件;

使用laravel提供的一个默认组件

执行命令

1
npm run dev

默认组件位置:

1
la555\resources\assets\js\components\Example.vue

组件注册位置:

1
2
la555\resources\assets\js\app.js
Vue.component('example', require('./components/Example.vue'));

在视图页面中直接使用:

1
<example></example>

刷新页面即可

创建我们自己的组件

创建组件并注册使用

1
la555\resources\assets\js\components\Like.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<button
class="btn btn-default"
>
like
</button>
</template>

<script>
export default {
mounted() {
console.log('初次加载')
}
}
</script>

注册

1
2
3
4
5
Vue.component('example', require('./components/Example.vue'));
Vue.component('like', require('./components/Like.vue'));
const app = new Vue({
el: '#app'
});

在模版页面中使用

1
<like></like>

组件传参数

1
<like user="{{ Auth::id() }}" title="yangzie"></like>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<button
class="btn btn-default"
>
like
</button>
</template>

<script>
export default {
props: ['user', 'title'],
mounted() {
console.log(this.user);
console.log(this.title);
}
}
</script>
请我喝一个苹果味的美年达吧,谢谢!