vue项目中main.js、vue.js和index.html的关系_随笔

最近在学习vue.js，当创建好一个webpack 项目后，vue实例是怎么显示到网页上的呢？

新建好后在你的 webpackProject 项目里面主要有以下的文件夹

build：在开发阶段不用管

config：配置目录

node_modules：存放项目开发的依赖模块

src：开发目录，先在这里学习

static：静态资源，图片、字体可以放在这里

还有一个index.html 文件，这是首页的入口

src文件夹下有 App.vue 和 main.js 两个文件，App.vue就是个组件

App.vue中可以写 <template>、js、<style>，其中必须要有export default 来表示对外输出本模块

main.js是初始化vue实例并使用需要的插件

首先引入了Vue库和App.vue，创建了一个vue实例，template 和 components 写入相应的组件，并且选择要挂载的元素

最后在首页 index.html中写入

<body>

</body>

即可；

—— 在中记录我的学习情况，以后继续深入 ——

对于 vue 来说，模板本质就是一个字符串

vue 中的模板是有逻辑的，是动态的，如 v-if、v-for 等

与 html 格式很像，但有很大区别；html 是静态的，而 vue 模板是动态的

最终还是要转化为 html 来显示，怎么才能转换为 html 来显示呢？

模板最终必须转换为 JS 代码？

因为模板有逻辑 (v-if,v-for)，必须用 JS 才能实现(前端中只有 JS 是图灵完备语言）

转换为html渲染页面，必须用 JS 才能实现渲染

因此模板最终要转换为一个 JS 函数(render 函数)，（render 函数是指的渲染函数，并不一定就必须是 render 这个名字）

render函数

render 函数的 with 的用法

模板中，所有信息都包含在了 render 函数中

this 即 vm

price 就是 this.price，也是 vm.parice，也是 data.price

首先vue里面内嵌html文件必须存放在项目 public文件夹下，可以和vue里面index.html同级如图所示：

我这里的 draw_PLS.html存放的是内嵌的html，map.js则是HTML里面的js。

以我项目为例

1.首先在vue页面里面通过iframe 的形式引用注意 ref的值和 name的值我这里保持一致了，接下来都会有用到。（注意src里面的路径要和项目的路径一致哦）

例：this.srcurl=' http://192.168.0.0:9527/draw_PLS.html'

2.通过声明一个iframes获取到iframe，然后添加一个name的属性，this.datavallist为我需要传递的数组，通过 iframes.postMessage 的方法进行传递。（cmd:'dian'用于做判断使用，可以不传）

3.在 draw_PLS.html 做如下 *** 作

这样就可以获取到啦。

：有什么地方不懂的可以找我共同进步，写的不够好还请多多包涵。

欢迎分享，转载请注明来源：内存溢出

vue项目中main.js、vue.js和index.html的关系