vue基础知识——进阶一

一、如何初始化一个vue项目?
vue init webpack vuetest
cd vuetest
npm run dev

如果你在npm run dev的时候报了如下的错,请更改:config文件夹里的index.js 里的 host ,把后面的host改为你本地的ip地址即可


报错图片.png

更改代码.png
二、vue-cli的作用?

主要作用:目录结构、本地调试、代码部署、热加载、单元测试。

三、使用vue-cli和不使用写代码的区别?

使用vue-cli,结构分开写(.vue的文件)

<template>
  <div >
    HelloWorld
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style>

</style>

不使用vue-cli(.html文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>
四、vue生命周期

可参考:
https://segmentfault.com/a/1190000014640577
非常非常有参考价值

之前面试,有个面试官问我:什么时候用 beforeDestroy?
      一般在做项目的购物车模块时候会用到, 选完产品之后, 到结账页面的时候 就用到 beforeDestroy (页面被销毁前),把购物车数据提交到 后台; 就是你在加购物车 ,然后点了返回。组件要销毁了。你得把数据传上去。

什么时候用 destroyed?
      在使用echarts画图表的时候,用到了destroyed
      前提:使用echarts,图表的尺寸会根据屏幕大小来展示,也有可能用户会随意变化窗口的大小。我们要监听页面的大小是否更改:

methods: {
  /* 监听浏览器屏幕重置 */
    resize() {
        let echartsLine = this.$echarts.init(this.$refs['**'], 'macarons');
        echartsLine.resize();
    }
},
mounted() {
      window.addEventListener('resize', this.resize);
},
destroyed() {
      window.removeEventListener('resize', this.resize);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,326评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,110评论 2 59
  • 小绿植物阅读 251评论 0 0
  • 兴趣以需要为基础:需要有精神需要和物质需要,兴趣基于精神需要(如对科学、文化知识等)。讲人话:比如你对某件事...
    天雅薇阅读 381评论 6 5
  • 第三十九回村老妪是信口开河痴情子偏寻根究底 螃蟹宴平儿走了回来了,说给凤姐要点螃蟹回家吃,刚才坐席的时候凤姐光忙着...
    西丝轩主阅读 252评论 0 1

友情链接更多精彩内容