知识太多了就容易装B，知识太少就容易犯浑，像我这样不多不少刚刚好，想装B就装B，想犯浑就犯浑。
准备
1
2
3
| php artisan make:auth
php artisan migrate
npm install
|
注册用户以后登录到 home, 接下来我们会在 home 视图上创建我们的第一个组件;
使用laravel提供的一个默认组件
执行命令
默认组件位置:
1
| la555\resources\assets\js\components\Example.vue
|
组件注册位置:
1
2
| la555\resources\assets\js\app.js
Vue.component('example', require('./components/Example.vue'));
|
在视图页面中直接使用:
刷新页面即可
创建我们自己的组件
创建组件并注册使用
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 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>
|