vue.js调用html模板,vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法...

以计算器为案例

Calculator.html

计算器

)-->

+

计算

(进入资源管理器文件所在位置 Shift+鼠标右键 在此处打开命令窗口输入：webpack main.js build.js )

引入webpack打包 main.js 后的 **build.js**

-->

模板.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

-->