Vue.js component script separation Author: Chuwen Time: 2021-10-14 Classification: Vue.js comment <trans data-src="## 需要">##Required</trans> <trans data-src="通常情况下，在单 `.vue` 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 `script` 和 `template` 部分，用编辑器分屏也不是那么好操作，故有了**组件 script 分离**">Usually, it is convenient to develop a single '. vue' file, but when the business logic is up, the 'script' and 'template' parts often need to be modified. It is not easy to use the editor to split the screen, so there is * * component script separation**</trans> <trans data-src="## 例子">##Example</trans> <trans data-src="### `TableList.vue`">### `TableList.vue`</trans> <trans data-src="```vue">```vue</trans> <trans data-src="<template>"><template></trans> <trans data-src="<div>"><div></trans> <trans data-src="<h1>测试 {{test}}</h1>"><h1>Test {{test}}</h1></trans> <trans data-src="</div>"></div></trans> <trans data-src="</template>"></template></trans> <trans data-src="<script>"><script></trans> <trans data-src="import index from './index'">import index from './index'</trans> <trans data-src="export default index">export default index</trans> <trans data-src="</script>"></script></trans> <trans data-src="```">```</trans> <trans data-src="### `index.js`">### `index.js`</trans> <trans data-src="> 在 `TableList.vue` 同级创建个如 `index.js` 文件">>Create a file such as' index. js' at the same level of 'TableList. vue'</trans> <trans data-src="```js">```js</trans> <trans data-src="export default {">export default {</trans> <trans data-src="name: "TableList",">name: "TableList",</trans> <trans data-src="components: {">components: {</trans> <trans data-src="'pagination': Pagination">'pagination': Pagination</trans> <trans data-src="},">},</trans> <trans data-src="data(){">data(){</trans> <trans data-src="return {">return {</trans> <trans data-src="test: 'test'">test: 'test'</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans>
Vue.js drop-down box component closes the menu when clicking outside the menu bar Author: Chuwen Time: 2021-08-23 Classification: Vue.js , JavaScript comment <trans data-src="## Menu.vue">## Menu.vue</trans> <trans data-src="> 菜单组件">>Menu Components</trans> <trans data-src="> !">> !</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2021/08/23/2193569241.png">https://cdn.nowtime.cc/2021/08/23/2193569241.png</trans> <trans data-src=")">)</trans> <trans data-src="```">```</trans> <trans data-src="<template>"><template></trans> <trans data-src="<div class="menu" v-if="show">"><div class="menu" v-if="show"></trans> <trans data-src="<!--"><!--</trans> <trans data-src="假设是菜单组件......-->">Suppose it is a menu component... --></trans> <trans data-src="</div>"></div></trans> <trans data-src="</template>"></template></trans> <trans data-src="<script>"><script></trans> <trans data-src="export default {">export default {</trans> <trans data-src="data(){">data(){</trans> <trans data-src="return {">return {</trans> <trans data-src="show: true,//是否显示菜单">Show: true,//Whether to display the menu</trans> <trans data-src="}">}</trans> <trans data-src="},">},</trans> <trans data-src="mounted() {">mounted() {</trans> <trans data-src="// 在这里加上就可以了">//Just add it here</trans> <trans data-src="document.addEventListener('click', (e) => {">document.addEventListener('click', (e) => {</trans> <trans data-src="// 如果当前组件(菜单组件)的 DOM “不包含” 当前点击的 DOM">//If the DOM of the current component (menu component) "does not contain" the currently clicked DOM</trans> <trans data-src="// 就关闭显示菜单">//Close the display menu</trans> <trans data-src="if (!">if (!</trans> <trans data-src="this.$el.contains(e.target)) this.show = false">this.$el.contains(e.target)) this.show = false</trans> <trans data-src="})">})</trans> <trans data-src="}">}</trans> <trans data-src="}">}</trans> <trans data-src="</script>"></script></trans> <trans data-src="```">```</trans>
Vue.js uses the form and presses the Enter or Submit button to prevent the page from jumping Author: Chuwen Time: 2021-08-07 Classification: Vue.js , JavaScript 1 comment <trans data-src="#### 添加 `.prevent` 事件修饰符即可阻止跳转">####Add the '. event' event modifier to prevent jumping</trans> <trans data-src="[">[</trans> <trans data-src="https://cn.vuejs.org/v2/guide/events.html#">https://cn.vuejs.org/v2/guide/events.html#</trans> <trans data-src="事件修饰符](">Event Modifier]（</trans> <trans data-src="https://cn.vuejs.org/v2/guide/events.html#">https://cn.vuejs.org/v2/guide/events.html#</trans> <trans data-src="事件修饰符 "">Event Modifier“</trans> <trans data-src="https://cn.vuejs.org/v2/guide/events.html#">https://cn.vuejs.org/v2/guide/events.html#</trans> <trans data-src="事件修饰符")">Event modifier ")</trans> <trans data-src="> 使用 `form` 的好处还有一点就是，在 input 按下回车(Enter)即可提交表单">>Another advantage of using 'form' is that you can submit the form by pressing Enter in input</trans> <trans data-src="```vue">```vue</trans> <trans data-src="<!--"><!--</trans> <trans data-src="添加 .prevent 修饰符阻止跳转-->">Add the. prevent modifier to prevent jumping --></trans> <trans data-src="<!--"><!--</trans> <trans data-src="注意 login 是自定义函数-->">Note that login is a user-defined function --></trans> <trans data-src="<form @submit.prevent="login">"><form @submit.prevent="login"></trans> <trans data-src="<input type="text" />"><input type="text" /></trans> <trans data-src="<button type="submit">提交</button>"><button type="submit">Submit</trans> <trans data-src="</form>"></form></trans> <trans data-src="```">```</trans>
Vue.js calls the Vue extension method of main.js in other js files Author: Chuwen Time: 2021-08-06 Classification: Vue.js , JavaScript comment <trans data-src="> 表述的不是很准确">>The description is not very accurate</trans> <trans data-src="`main.js` 扩展了以下方法：">`Main. js ` The following methods are extended:</trans> <trans data-src="```js">```js</trans> <trans data-src="import Vue from 'vue'">import Vue from 'vue'</trans> <trans data-src="import App from './App.vue'">import App from './App.vue'</trans> <trans data-src="import dayjs from 'dayjs'">import dayjs from 'dayjs'</trans> <trans data-src="dayjs.locale('en')">dayjs.locale('en')</trans> <trans data-src="dayjs.extend(require('dayjs/plugin/localizedFormat'))">dayjs.extend(require('dayjs/plugin/localizedFormat'))</trans> <trans data-src="//看这里！">//Look here!</trans> <trans data-src="Vue.prototype.$dayjs = require('dayjs')">Vue.prototype.$dayjs = require('dayjs')</trans> <trans data-src="new Vue({">new Vue({</trans> <trans data-src="render: h => h(App),">render: h => h(App),</trans> <trans data-src="}).$">}).$</trans> <trans data-src="mount('#app')">mount('#app')</trans> <trans data-src="```">```</trans> <trans data-src="某个文件夹下的 `Request.js` 需要调用刚刚扩展的方法，需要这么做:">The 'Request. js' in a folder needs to call the method just extended. You need to do this:</trans> <trans data-src="```js">```js</trans> <trans data-src="// 注意要导入这个包">//Be careful to import this package</trans> <trans data-src="import Vue from 'vue'">import Vue from 'vue'</trans> <trans data-src="// 这样子就可以用了">//So it can be used</trans> <trans data-src="const dayjs = Vue.prototype.$dayjs">const dayjs = Vue.prototype.$dayjs</trans> <trans data-src="console.log(dayjs())">console.log(dayjs())</trans> <trans data-src="```">```</trans>
Vue.js error [Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter Author: Chuwen Time: 2021-06-15 Classification: Vue.js comment <trans data-src="```log">```log</trans> <trans data-src="[Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter.">[Vue warn]: Computed property "getSearchOther" was assigned to but it has no setter.</trans> <trans data-src="```">```</trans> <trans data-src="我是这么写的：">I wrote:</trans> <trans data-src="```js">```js</trans> <trans data-src="//这里省略部分代码">//Some codes are omitted here</trans> <trans data-src="watch:{">watch:{</trans> <trans data-src="getSearchOther() {">getSearchOther() {</trans> <trans data-src="return this.SearchOther">return this.SearchOther</trans> <trans data-src="},">},</trans> <trans data-src="}">}</trans> <trans data-src="//这里省略部分代码">//Some codes are omitted here</trans> <trans data-src="```">```</trans> <trans data-src="## 解决方案">##Solution</trans> <trans data-src="手动给予 `get`、`set` 方法">Manually give 'get' and 'set' methods</trans> <trans data-src="参照官方文档：[">Refer to official documents:[</trans> <trans data-src="https://cn.vuejs.org/v2/guide/computed.html#">https://cn.vuejs.org/v2/guide/computed.html#</trans> <trans data-src="计算属性的 setter](">Calculation property setter]（</trans> <trans data-src="https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84">https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84</trans> <trans data-src="-setter "">-setter "</trans> <trans data-src="https://cn.vuejs.org/v2/guide/computed.html#">https://cn.vuejs.org/v2/guide/computed.html#</trans> <trans data-src="计算属性的 setter")">Calculated property setter ")</trans> <trans data-src="```js">```js</trans> <trans data-src="//这里省略部分代码">//Some codes are omitted here</trans> <trans data-src="watch:{">watch:{</trans> <trans data-src="getSearchOther: {">getSearchOther: {</trans> <trans data-src="get() {">get() {</trans> <trans data-src="return this.SearchOther">return this.SearchOther</trans> <trans data-src="},">},</trans> <trans data-src="set(newVal) {">set(newVal) {</trans> <trans data-src="this.SearchOther = newVal;">this.SearchOther = newVal;</trans> <trans data-src="}">}</trans> <trans data-src="},">},</trans> <trans data-src="}">}</trans> <trans data-src="//这里省略部分代码">//Some codes are omitted here</trans> <trans data-src="```">```</trans>