在Pagekit扩展中使用Vue.js
为了构建 Pagekit 管理区，我们探索了广阔的 JavaScript 框架领域。一个相当新鲜的候选者最终成为了我们的合适选择：Vue.js，一个拥有简单但强大API的库。我们爱上了它，也希望你也会喜欢。
在为管理区自己构建界面时，可以使用任何你习惯的库。但既然Pagekit自带Vue.js，了解一下它是否适合你是很有道理的。
在这篇文章中，我们将介绍在Pagekit中使用Vue.js的基本概念。完成的示例扩展可以在 Github 上找到。
视频地址（YouTube）：https://www.youtube.com/watch?v=3gPGyhTroSA
1. 将数据传递给JavaScript
在之前的文章中，我们已经看到数据可以在PHP控制器中访问。要在JavaScript中使用这些数据，请使用关键字将PHP数组传递给视图渲染器。Pagekit 会自动将这些转换为 JSON 表示，并在生成的 HTML 的头部中渲染。$data
// packages/pagekit/todo/src/Controller/TodoController.php
// ...
public function indexAction()
{
$module = App::module('todo');
return [
'$view' => [
'name' => 'todo:views/admin/index.php'
],
'$data' => $module->config
];
}这将在你的部分中呈现以下内容。<head>
<script>
var $data = {
"entries": [{"message":"Buy milk","done":false},{"message":"Drink coffee","done":true}]
};
</script>2. 将视图和模型合并
ViewModel 是一个实例，将模型中的数据与视图界面同步。这被称为反应性，是Vue的关键特性之一。正确使用，有助于保持JavaScript组件小巧且易读。Vue
你可以将实例附加到DOM元素上：。模型将是你传递给参数的参数。要使用Pagekit的数据，取你视图渲染的全局对象。Vueel: '#todo'datawindow.$data
你创建的任何模板都可以调用。我们会在下一步创建模板标记。methods
// packages/pagekit/todo/js/todo.js
$(function(){
var vm = new Vue({
el: '#todo',
data: {
entries: window.$data.config.entries,
},
methods: {
add: function(e) {
// ...
},
toggle: function(entry) {
entry.done = !entry.done;
},
remove: function(entry) {
this.entries.$remove(entry);
},
save: function() {
// ...
}
}
});
});2. Vue 的加价
从 PHP 中，我们仍然渲染视图文件 。这里包含了所需的JavaScript文件。要让 Vue 在你的脚本中可用，可以在 中添加一个依赖作为第三个参数。views/admin/index.phpvue
<?php $view->script('todo', 'todo:js/todo.js', 'vue') ?>在你的HTML中，包含Vue实例寻找的DOM元素： 。在元素内部，你可以使用Vue指令。指令是某些关键词，用来告诉Vue该如何处理该元素。<div id="todo"></div>
<p v-if="entry.done">This will be displayed if the item has been done.</p>你可以绑定到视图模型中的点击事件和调用方法。@click
要从模型输出数值，可以使用大括号： 。Pagekit 提供了一个过滤器，如果对所选位置存在翻译替代字符串，它会用一个替换字符串。{{ entry.message }}trans
{{ 'Save' | trans }}这就是一个简单的视角可能的样子。
<!-- packages/pagekit/todo/views/admin/index.php -->
<?php $view->script('todo', 'todo:js/todo.js', 'vue') ?>
<div id="todo">
<button @click="save()">{{ 'Save' | trans }}</button>
<ul>
<li v-for="entry in entries">
{{ entry.message }}
<button @click="click: toggle(entry)">{{ entry.done ? 'Undo' : 'Do' }}</button>
</li>
</ul>
</div>3. 完成的示例
在完成的示例中，我们实现了后端的实际保存，并清理了源代码。它结合了之前描述的所有步骤，我们描述了如何创建一个简单的Todo扩展。结果可以在Github上发布，供你自由探索。
了解更多关于Vue的信息
Vue.js 是一个强大的库，使得构建反应式网页界面变得容易。想了解更多信息，请查看官方指南。我们也强烈推荐Vue.js的Laracasts视频。这两个平台都是了解Vue能做什么的好地方，无论是书面形式还是视频形式。
反馈与评论
虽然我们已经看到Todo的例子结束了，但这并不是你看到的最后一个屏幕录像。由于你们中有些人要求查看用户和权限，我们将在下一个视频中详细介绍。想要更多想法，请在下方留言，并加入我们的开发者聊天。
以下是所有现有屏幕录制教程的简短列表：