Vue学习之路（3）

最新推荐文章于 2024-07-08 16:01:05 发布

刘什么同学

最新推荐文章于 2024-07-08 16:01:05 发布

阅读量235

点赞数 1

分类专栏： html vue 文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_43217271/article/details/112711416

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

自定义事件内容分发 $emit(自定义事件)

在这里插入图片描述

SOC原则

“系统中的一个部分发生了变化，不会影响其他部分。”
“即使需要改变，也能够清晰地识别出那些部分需要改变。”
“如果需要扩展架构，将影响最小化，已经可以工作的每个部分都将继续工作。”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test6-slot</title>
	</head>
	<body>
		<div id="app"> 
			<todo>
				<todo-titile slot="todo-title" :title="title"></todo-titile>
				<todo-items slot="todo-items" v-for="(item, index) in city"
				 :item="item" :index="index" @remove="removeItem(index)"></todo-items>
			</todo>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			Vue.component('todo', {
				//这里美化了写法-即只要在对应换行处加上\
				template: '<div>\
								<slot name="todo-title"></slot>\
								<ul>\
									<slot name="todo-items"></slot>\
								</ul>\
						  </div>'
			});
			
			Vue.component('todo-titile', {
				props: ['title'],
				template: '<div>{{title}}</div>'
			});
			
			Vue.component('todo-items', {
				props: ['item', 'index'],
				template: '<li>{{item}}---{{index}} <button @click="remove">删除</button></li>',
				methods: {
					remove: function(index) {
						this.$emit('remove', index);
					}
				}
			});
			
			var vm = new Vue({
				el: '#app',
				data: {
					title: '浙江',
					city: ['杭州', '临海', '乌镇']
				},
				methods:{
					removeItem: function(index) {
						console.log('删除了' + this.city[index])
						this.city.splice(index, 1)
					}
				}
			})
		</script>
	</body>
</html>

Vue-cli

官方提供的一个脚手架，用于快速生成一个vue的模板。

首先下载node.js 官网https://nodejs.org/zh-cn/download/

在这里插入图片描述

由于自动为你配好环境，cmd敲node -v以及npm -v 查看结果

在这里插入图片描述

然后安装一个node.js淘宝镜像加速器 cmd敲入npm install cnpm -g

在这里插入图片描述

安装vue-cli cmd敲入 cnpm install vue-cli -g

在这里插入图片描述

测试是否成功 vue list

在这里插入图片描述

创建一个vue项目

在这里插入图片描述

安装npm npm install

在这里插入图片描述

启动 npm run dev

成功显示

在这里插入图片描述

输入http://localhost:8080

在这里插入图片描述

停止 ctrl+c

在这里插入图片描述

目录结构

在这里插入图片描述

webpack

Js–>CommonsJs–>AMD–>CMD–>ES6

安装 :npm install webpack -g ; npm install webpack-cli -g

使用webpack

创建一个项目
创建modules文件夹

创建hello.js

//暴露一个方法
exports.sayHi = function() {
	document.write('<h1>hello</h1>');
}

main.js

var hello = require("./hello");
hello.sayHi();

webpack.config.js

module.exports = {
	//版本问题，加入下面这句即可
	mode: 'development',
	entry: './modules/main.js',
	output: {
		filename: './js/bundle.js'
	}
};

终端进入该文件夹敲入 webpack

在这里插入图片描述

生成的bundle.js

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./modules/hello.js":
/*!**************************!*\
  !*** ./modules/hello.js ***!
  \**************************/
/***/ ((__unused_webpack_module, exports) => {

eval("//暴露一个方法\r\nexports.sayHi = function() {\r\n\tdocument.write('<h1>hello</h1>');\r\n}\n\n//# sourceURL=webpack:///./modules/hello.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		if(__webpack_module_cache__[moduleId]) {
/******/ 			return __webpack_module_cache__[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
(() => {
/*!*************************!*\
  !*** ./modules/main.js ***!
  \*************************/
eval("var hello = __webpack_require__(/*! ./hello */ \"./modules/hello.js\");\r\nhello.sayHi();\n\n//# sourceURL=webpack:///./modules/main.js?");
})();

/******/ })()
;

创建html去使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!--前端模块化开发-->
		<script src="dist/js/bundle.js"></script>
	</body>
</html>

效果
在这里插入图片描述

文件目录

在这里插入图片描述

刘什么同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之路（3）

自定义事件内容分发 $emit(自定义事件)SOC原则“系统中的一个部分发生了变化，不会影响其他部分。”“即使需要改变，也能够清晰地识别出那些部分需要改变。”“如果需要扩展架构，将影响最小化，已经可以工作的每个部分都将继续工作。”<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test6-slot</title> </head&gt
复制链接

扫一扫