vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法
以计算器为案例Calculator.html<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3
·
以计算器为案例
Calculator.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<--绑定Vue ,让Vue接管这块(<div id="app">)-->
<div id="app">
<!--view视图-->
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>
<button v-on:click="jisuan()">计算</button>
<spn v-text="result"></spn>
</div>
</body>
<--
(进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入:webpack main.js build.js )
引入webpack打包 main.js 后的 **build.js**
-->
<script src="./build.js"></script>
</html>
模板.js ( 统称 )
var add = function (x, y) {
return x + y;
};
var add2 = function (x, y, z) {
return x + y + z;
};
module.exports = {add, add2};
main.js 想引用模板.就先要在模板中设置,导出模板代码。
导出代码:
//**单**个方法引用例子:
module.exports.add = add;
//**多**个方法引用例子
module.exports = {add, add2};
main.js 入口
//导入模板
//var {add2} 大括号里的内容与方法名一致,用哪个导入哪个(目前,我猜有更好的方法,但我目前还不知道)
var {add2} = require("./mode_01");
//导入vue.min.js
var Vue = require("./vue.min");
//定义的数据类型
new Vue({
el: "#app",
data: {
num1: 1,
num2: 1,
result: 0,
},
methods: {
jisuan: function () {
// 在此处调用方法
this.result = add2(Number.parseInt(this.num1), Number.parseInt(this.num2), Number.parseInt(this.num2));
}
}
});
main.js 入口引用方法注意三点:
1.模板最后要设置导出,main.js要设置导入模板
module.exports = {add, add2};
2.main.js导入模板哪个方法就用哪个模板中的方法名
var {add2} = require("./mode_01");
3.html页面中要引入打包后的js(我的是build.js)
<--
(进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入:webpack main.js build.js)
引入webpack 打包后的js
-->
<script src="./build.js"></script>
更多推荐
已为社区贡献1条内容
所有评论(0)