详细说明Vue从文件中获取文本信息的方法

本文介绍了利用Vue从文件中获取文本信息的方法。分享给大家参考，如下：

最近在使用vue作为项目的时候，有一个需求，就是要在界面上显示大量的说明文字。为了保持界面干净快速，决定用一个单独的文件来存储显示信息，然后通过读取文件在界面上显示。

一开始我是用File和FileReader对象来获取的，但更气人的是这两个对象是IE浏览器独有的属性，chrome不支持，为了安全，现在的浏览器都不尊重这种做法，因为很容易导致文件被外界恶意删除或添加，安全性太低。无奈之下，我想到了一个简单又刁钻的方法，用导出实现了。

对实现的思考：

1.创建新的。js文件，在文件中定义一个常量，并通过export导出这个常量

2.在要使用该文本的vue文件中，导入js文件中的常量，然后直接引用它们

这里有一个简单的例子：

首先，目录结构如下：

2.开发airStruction.js内容

export construction={ title : ' p style=\ ' font-size :18 px；color: # 333333\ '哈哈哈/p '，内容： ' p style=\ ' font-size :18 px；color: # 333333margin-top : 10px；\ ' id=' airinstruction '安装说明/p \ n ' ' div style=\ ' font-size : 14px；color: # 999999线高： 25px；\ ' '内容内容'/div' }3。在vue文件中引用这个js文件中的内容，我直接读取，插入到界面中，因为里面的标题和文字样式可能不一样，所以这个方法比较简单。

模板div style=' width :100%；' height :100%；'div class=' structure _ style ' v-html=' structure '/div/div/template script import { structure } from './construction/air construction ' var self；导出默认{name : '指令页'，data(){ return { structure : structure。标题结构。content } } }/script style scoped/style完美解决了这个问题，同时也保证了代码的整洁，修改起来非常方便，给大家一个参考。

希望本文对vue.js程序的设计有所帮助。