欧宝娱乐app下载地址Symfony UX Vue.js
编辑本页欧宝娱乐app下载地址Symfony UX Vue.js
欧宝娱乐app下载地址Symfony UX Vue.js是一个Symfony bundle集成Vue.js在Sy欧宝娱乐app下载地址mfony应用程序中。它是Symf欧宝娱乐app下载地址ony UX计划．
Vue.js是一个用于构建用户界面的JavaScript框架。欧宝娱乐app下载地址Symfony UX Vue.js提供了从Twig渲染Vue组件的工具，处理渲染和数据传输。
欧宝娱乐app下载地址Symfony UX Vue.js只支持Vue.js v3。
安装
在你开始之前，确保你有欧宝娱乐app下载地址在你的应用中配置Symfony UX．
然后使用Composer和Symfony Flex安装包:欧宝娱乐app下载地址
1 2 3 4 5 6 7 8 9
＄作曲家需要symfony/ux-v欧宝娱乐app下载地址ue不要忘记安装JavaScript依赖项并进行编译＄NPM install——force＄NPM运行监视#或用纱线＄纱线安装力＄纱看您还需要在您的末尾添加以下行资产/ app.js文件:
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
/ /资产/ app.js进口{registerVueControllerComponents}从“@欧宝娱乐app下载地址symfony / ux-vue”；//注册Vue.js控制器组件，允许从Twig加载它们//// Vue.js控制器组件是要被渲染的组件// from Twig。这些组件可以依赖于其他组件//直接从Twig调用。////通过在' vue/controllers '中只放置控制器组件，你可以确保//内部组件不会自动包含在JS构建文件中，如果//它们不是必需的。registerVueControllerComponents (需要.context (“vue /控制器。”，真正的/ \ .vue /美元));//如果你喜欢惰性加载你的Vue.js控制器组件，为了减少JavaScript包尽可能小，//和提高性能，你可以使用下面的行代替:/ / registerVueControllerComponents (require.context”。/vue/controllers'， true， /\。vue /美元,“懒惰”));使用
UX Vue.js通过使用Vue.js控制器组件: Vue.js组件使用registerVueControllerComponents而这意味着从树枝渲染。
当使用registerVueControllerComponents配置，所有Vue.js组件位于目录中资产/ vue /控制器被注册为Vue.js控制器组件。
为了确保这些组件可以被Webpack Encore加载，您需要按照文档中相关部分的说明进行配置。欧宝体育电话
然后，你可以在Twig中使用vue_component．例如:
1 2 3 4 5 6 7 8 9 10
/ /资产/ vue /控制器/ MyComponent.vue<模板><div>你好{{name}}!div></template> <脚本设置> defineProps({name: String});脚本>1 2 3
{#模板/ home。树枝#}<div{{vue_component('MyComponent'， {'name': app.user.fullName})}}>div>事件
事件vue: before-mount在将组件挂载到页上之前调用。如果你需要修改Vue应用程序(例如:添加插件，添加全局指令，…)，这是要监听的事件:
12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
文档.addEventListener (“vue: before-mount”， (event) => {常量{componentName,// Vue组件名称组件,//解析后的Vue组件道具,//将被注入到组件的道具应用程序,// Vue应用实例} = event.detail;// Vue路由器的示例常量router = VueRouter.createRouter({历史: VueRouter.createWebHashHistory (),路线:【/ *……* /}));app.use(路由器);})；请注意
当使用Vue路由器时，你可以使用“hash”或“memory”历史模式来阻止你的Vue路由通过Symfony控制器被服务。欧宝娱乐app下载地址若要使用网页历史记录模式，请参阅欧宝娱乐app下载地址Symfony UX Vue.js
事件vue:山当组件被挂载到页面上时调用:
1 2 3 4 5 6 7
文档.addEventListener (“vue:山”， (event) => {常量{componentName,// Vue组件名称组件,//解析后的Vue组件道具,//注入到组件的道具} = event.detail;})；事件vue:卸载在页面上卸载组件时调用:
1 2 3 4 5 6
文档.addEventListener (“vue:卸载”， (event) => {常量{componentName,// Vue组件名称道具,//注入到组件的道具} = event.detail;})；Web历史模式与Vue路由器
要在Vue Router中使用“web”历史模式，需要一个捕捉所有路由，它应该呈现相同的模板和Vue组件:
1 2 3 4 5
#路线(' /调查/{路径< + >}”)公共函数调查（＄路径＝”）：响应｛//渲染模板｝这个控制器将捕获任何以' /survey '开头的URL。这个前缀可以用于所有Vue路由:
1 2 3 4 5 6 7 8 9 10
常量router = VueRouter.createRouter({历史: VueRouter.createWebHistory (),路线: [{路径：“/调查/列表”，组件: ListSurveys}， {路径：/调查/创建的，组件: createssurvey}， {路径：/ /编辑/调查:surveyId”，组件: EditSurvey}，]，});app.use(路由器);向后兼容承诺
这个包旨在遵循与Symfony框架相同的向后兼容性承诺:欧宝娱乐app下载地址https://欧宝娱乐app下载地址www.oldmanjams.com/doc/current/contributing/code/bc.html
