Vue | 简单模块化

最新推荐文章于 2023-09-05 23:25:35 发布
最新推荐文章于 2023-09-05 23:25:35 发布
阅读量272 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41593408/article/details/87982382
版权 
// 项目结构

├── index.html
├── button-success.js
└── app.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="app">
        <button-success></button-success>
        <button-success></button-success>
        <button-success></button-success>
        <button-success></button-success>
        <button-success></button-success>
    </div>
    <script src="./app.js" type="module"></script>
    <script src="https://vuejs.org/js/vue.js"></script>
</body>

</html>

button-success.js

var buttonSuccess = {
    template: '<div>\
                      <button class="btn btn-success" @click="count++">成功&nbsp;&nbsp;&nbsp;{{count}}</button>\
                      </div>',
    data: function () {
        return {
            count: 0
        }
    },
    methods: {
        access: function () {
            alert('成功');
        }
    }
};

export {buttonSuccess};

app.js

import {buttonSuccess} from './button-success.js';
  var app = new Vue({
      el: '#app',
      components: {
          'button-success': buttonSuccess
      }
  })

注意

不要漏掉了.js

上面的代码不能直接访问 html，你可以通过 http-server 来访问!!!

Zero Ice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-模块化
张锦的博客
04-23 4092
记录学习的点点滴滴
前端基础（Vue的模块化开发）
MRJJ_9的博客
08-19 926
Vue项目搭建、模块化开发
Vue笔记指令
Akio的博客
07-15 107
列表渲染 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组的名字并且 item 是数组元素迭代的别名。其实item是什么都行，只要跟数据渲染里的写法一样就行了 &lt;ul id="example-1"&gt; &lt;li v-for...
vue组件化编程（模块与组件，模块化与组件化，非单文件和单文件组件）
weixin_41549971的博客
07-11 604
组件，模块，组件化，模块化，单文件组件，非单文件组件
总结Vue第三天：模块化和webpack模块化打包：
最新发布
伟庭师兄的博客
09-05 532
（属于webpack自带的插件）要使用到webpack对象，记得先导入，然后new webpack.BannerPlugin( );
详解如何用模块化的方式写vuejs
11-29
最近写了一个json viewer-ac，就是完全使用vue-loader带来的模块化特性，写的比较开心，也得到了不少经验。这里记录一下。 文件结构 <app></app> <style> ... </style> [removed] import ...
Vuex 模块化使用详解
12-10
前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有...文件结构的话，模块化的使用要多一个 modules 的文件夹，里面放着细分模块的 js 文件/模块名文件夹。 这里官方的标准
vue自动化创建简单的模块，简单的table查询增删改查页面
04-22
vue自动化创建简单的模块，简单的table查询增删改查页面
vue环境搭建、项目初始化
02-03
Vue 环境搭建、项目初始化 在本文中，我们将详细介绍 Vue 环境搭建和项目初始化的过程，从 Node.js 的安装到 Vue 项目的创建，包括了 NPM、Webpack、Vue-CLI 等工具的使用。 一、 Node.js 的安装 Node.js 是一个...
通过一个简单的例子学会vuex与模块化
01-19
但是这样带来的问题是 store 可能会非常臃肿庞大不易维护，所以就需要对状态树进行模块化的拆分。 这篇文章预设你已经了解vue相关的基础知识，因此本文不再赘述。需要学习的朋友可以参考这篇文章://...
垃圾回收机制和内存泄漏
龚珂心的博客
09-13 515
1:概述 js的垃圾回收机制是为了防止内存泄漏，内存泄漏时指：程序中动态分配的一块内存因为某种原因无法释放，造成系统内存浪费，造成系统内存浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。 1.标记清除法 这是javascript中最常用的垃圾回收方式。当变量进入执行环境是，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。 垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。
Zeroc Ice dubbo rpc测试
xiaomin1991222的专栏
07-04 601
ice-dubbo-thrift-grpc性能测试对比，本次测试过程中还发现了一个支付宝的秘密，附件文档中会详细说明。测试说明     本测试只是个人为了对rpc进行技术选型，测试可能不够严谨，对某些rpc的参数可能也不是最优，如果你知道更优的参数配置或者改进意见等，欢迎反馈给我magicdoom@gmail.com。另外代码有些地方只是为了测试方便，不作为平时编程的范例。所有测试源码和运行均...
Vue模块化-module
yongzhilu的博客
09-05 1171
vuex模块化 module
有人负责，才有质量：写给集市中的下一代—读后感
nlq66的博客
10-05 1750
原文：https://queue.acm.org/detail.cfm?id=2349257 文章中讲到对模块化搭建的担忧，在今天看来确实存在。如今的软件编程，网页搭建，还有ue4里面的蓝图等等。都出现的模块化，这减少了我们进行项目时候的工作量。对于一些搭建好的模块，我们只需要复制粘贴，或者直接引用，然后加以完善即可。甚至单靠模块组成都可以。在看文章中提到的代码重用造成的冗余，还有对程序员自身技能掌握不扎实等等问题都出现了。可能会出现你搭建好一个项目，你也许知道各个模块的功能和用处，但是你根本掌握不了某些模
使用CDN的方式使用Vue 和 iview构建vue项目
热门推荐
追逐丶的博客
01-28 1万+
使用CDN的方式使用Vue 和 iview构建vue项目一、CDN的方式是什么二、为什么采用cdn的方式三、过程1 引入vue.js和iview。2 基本功能3 组件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaT......
Vue模块化
qq_46258465的博客
08-27 271
Vue模块化 1 模块化思想 有很多模块化思想 commo js AMD CMD ES6 … 模块化不仅可以帮助我们解决作用域问题，代码管理，提高代码质量等问题还可以减少我们在开发过程中出现的"冲突"。 2 模块间的访问 2.1 {}式导入引用 2.1.1 导入 import {flag,num1} from "./01模块间的访问b"; if (flag){ console.log(num1); } 2.1.2导出 let num1=100; let flag=true; e
浏览器垃圾回收机制与 Vue 项目内存泄漏场景分析
前端下午茶
09-10 4864
1. 介绍浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。其原...
vue.js中vuex的详解配置及模块化使用
LONGLONGAGO_RU的博客
06-12 1497
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用: 首先要安装、使用 vuex 首先在 vue 2.0+ 你的vue-cli项目中安装 vuex ...
vue 生命周期
gc1329689056的博客
05-10 169
1.beforeCreate第一个生命周期函数 表示实例完全被创建出来之前,会执行它，注意:在 beforeCreate 生命周期函数执行的时候, data 和 methods 中的 数据都还没有初始化。 2.created 第二个生命周期函数 在 created 中,data 和 methods 都已经被初始化好了!如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作。 3.beforeMount 第三个生命周期函数 表示 模板已经..
vue3 store模块化
07-29
Vue 3中的Store模块化是通过使用新的Composition API来实现的。在Vue 2中，我们通常使用Vuex来管理应用程序的状态，但在Vue 3中，我们可以使用Composition API来更好地组织和管理状态。 首先，我们需要创建一个新的store模块。可以在项目的根目录下创建一个名为`store`的文件夹，并在其中创建一个名为`index.js`的文件。 在`index.js`中，我们可以使用`createStore`函数来创建一个新的store实例，并导出它。例如： ```javascript import { createStore } from 'vuex'; const store = createStore({ // state, mutations, actions, getters, 等等 }); export default store; ``` 然后，我们可以在应用程序的入口文件（通常是`main.js`）中导入并使用这个store实例。例如： ```javascript import { createApp } from 'vue'; import store from './store'; const app = createApp(App); app.use(store); app.mount('#app'); ``` 现在，我们可以在store模块中定义我们的状态、mutations、actions等。例如： ```javascript import { reactive } from 'vue'; export default { state: reactive({ count: 0, }), mutations: { increment(state) { state.count++; }, decrement(state) { state.count--; }, }, actions: { asyncIncrement(context) { setTimeout(() => { context.commit('increment'); }, 1000); }, }, }; ``` 这只是一个简单的示例，你可以根据你的应用程序需求来定义更多的模块和状态。 最后，我们可以在组件中使用`useStore`函数来访问和操作store中的状态。例如： ```javascript import { useStore } from 'vuex'; export default { setup() { const store = useStore(); // 获取状态 const count = computed(() => store.state.count); // 调用mutation const increment = () => store.commit('increment'); // 调用action const asyncIncrement = () => store.dispatch('asyncIncrement'); return { count, increment, asyncIncrement, }; }, }; ``` 这就是Vue 3中使用Composition API实现的Store模块化的基本步骤。希望对你有所帮助！如有疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值