Vue.js 组件 script 分离 作者: Chuwen 时间: 2021-10-14 分类: Vue.js 评论 ## 需要 通常情况下，在单 `.vue` 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 `script` 和 `template` 部分，用编辑器分屏也不是那么好操作，故有了**组件 script 分离** ## 例子 ### `TableList.vue` ```vue <template> <div> <h1>测试 {{test}}</h1> </div> </template> <script> import index from './index' export default index </script> ``` ### `index.js` > 在 `TableList.vue` 同级创建个如 `index.js` 文件 ```js export default { name: "TableList", components: { 'pagination': Pagination }, data(){ return { test: 'test' } } } ```
Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单 作者: Chuwen 时间: 2021-08-23 分类: Vue.js,JavaScript 评论 ## Menu.vue > 菜单组件 >  ``` <template> <div class="menu" v-if="show"> <!--假设是菜单组件......--> </div> </template> <script> export default { data(){ return { show: true,//是否显示菜单 } }, mounted() { // 在这里加上就可以了 document.addEventListener('click', (e) => { // 如果当前组件(菜单组件)的 DOM “不包含” 当前点击的 DOM // 就关闭显示菜单 if (!this.$el.contains(e.target)) this.show = false }) } } </script> ```
Vue.js 使用 form 表单，按下 Enter 或 Submit 按钮阻止跳转页面 作者: Chuwen 时间: 2021-08-07 分类: Vue.js,JavaScript 1 条评论 #### 添加 `.prevent` 事件修饰符即可阻止跳转 [https://cn.vuejs.org/v2/guide/events.html#事件修饰符](https://cn.vuejs.org/v2/guide/events.html#事件修饰符 "https://cn.vuejs.org/v2/guide/events.html#事件修饰符") > 使用 `form` 的好处还有一点就是，在 input 按下回车(Enter)即可提交表单 ```vue <!--添加 .prevent 修饰符阻止跳转--> <!--注意 login 是自定义函数--> <form @submit.prevent="login"> <input type="text" /> <