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" /> <button type="submit">提交</button> </form> ```
Vue.js 在其他 js 文件调用 main.js 的 Vue 扩展方法 作者: Chuwen 时间: 2021-08-06 分类: Vue.js,JavaScript 评论 > 表述的不是很准确 `main.js` 扩展了以下方法： ```js import Vue from 'vue' import App from './App.vue' import dayjs from 'dayjs' dayjs.locale('en') dayjs.extend(require('dayjs/plugin/localizedFormat')) //看这里！ Vue.prototype.$dayjs = require('dayjs') new Vue({ render: h => h(App), }).$mount('#app') ``` 某个文件夹下的 `Request.js` 需要调用刚刚扩展的方法，需要这么做: ```js // 注意要导入这个包 import Vue from 'vue' // 这样子就可以用了 const dayjs = Vue.prototype.$dayjs console.log(dayjs()) ```
Vue.js 报错 [Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter. 作者: Chuwen 时间: 2021-06-15 分类: Vue.js 评论 ```log [Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter. ``` 我是这么写的： ```js //这里省略部分代码 watch:{ getSearchOther() { return this.SearchOther }, } //这里省略部分代码 ``` ## 解决方案 手动给予 `get`、`set` 方法 参照官方文档：[https://cn.vuejs.org/v2/guide/computed.html#计算属性的 setter](https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter "https://cn.vuejs.org/v2/guide/computed.html#计算属性的 setter") ```js //这里省略部分代码 watch:{ getSearchOther: { get() { return this.SearchOther }, set(newVal) { this.SearchOther = newVal; } }, } //这里省略部分代码 ```