在Vue-Cli环境中我们可以使用一下:
在router中的index.js中,引入data.js文件:
1
| import {data} from '@/data.js'; |
之后就可以在任意组件中调用,例如下面在document组件中进行调用和渲染:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <template>
<div>
这里是document的路由
<ul>
<li v-for="item,index in data">{{item.userName}}</li>
</ul>
</div>
</template>
<script type="text/javascript">
import {
data
} from '@/data';
export default {
data() {
return {
data
};
},
created() {
console.log(data);
console.log("组件已经准备就绪");
},
mounted() {
console.log('组件加载完毕');
}
}
</script> |
data.js中的文件内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| let data = [
{
id:1,
userName:"leo1",
sex:'男',
hobby:'写代码'
},
{
id:2,
userName:"leo2",
sex:'男',
hobby:'唱歌'
},
{
id:3,
userName:"leo3",
sex:'男',
hobby:'读书'
}
];
export {data}; |
补充说明,css中import属性的使用
现在有a.css,b.css,c.css三个css文件,如果一个个引入,就太麻烦了,这个时候,我们就可以将这些文件统一进入到一个叫做app.css的文计中(文件名任意取),然后在html中就只需要引入app.css就可以了。
1 2 3 4 5 6 7
| //在app.css中引入的写法,他们都在同一目录下
@import './a.css';
@import './b.css';
@import './c.css';
//在html中引入
<link rel="stylesheet" type="text/css" href="./app.css"> |
在Vue-Cli中,less会在编辑器保存之后自动编译成同名的css文件,我们只需要引入同名的css文件就可以了
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"Es6中的导入和导出"
最新评论