vue、day1

1.vue是什么

  • 是一套用于构建用户界面的渐进式框架

2.学习vue之前要掌握哪些知识

  1. 首先是es6的语法规范

    1. 箭头函数

    2. 结构赋值

    3. 模板字符串

  2. es6模块化

    1. 默认暴露

    2. 分别暴露

    3. 统一暴露

    4. import

    5. export

  3. 包管理器（会一个就行）

    1. npm

    2. ya

  4. 原型、原型链

  5. 数组常用方法

  6. axios

  7. promise

3.vue的特点

  • 组件化模式，代码复用率高

image-20220430125911758

  • 声明式编码

    • image-20220430130015964

  • 高度复用dom

    • image-20220430130320422

     

4.了解vue.js

image-20220430130448254

  • 这张图中的学习的教程和api

    • image-20220430130522489

    • api相当于字典，是帮助文档

    • cookbook 技巧是一些好的技巧

  • 图中的生态系统

    • image-20220430130838529

  • 资源列表

    • image-20220430131054294

    • 其中awesome vue是官方整理的比较好用的软件

5.安装

  • image-20220430131442005

    • 指定src，可以引入本地

    • 也可以引入在线

  • npm

    • image-20220430131453211

  • 我们最好使用开发版本，这样就会自动报错

6.使用idea开发

  • 首先我们创建一个vue的文件夹，然后直接打开就可以了

  • 然后找到插件搜索vue.js

  • 安装好后重启idea

  • 然后导入

    • image-20220430134327832

    • 右键新建file。直接a.vue就可以出现了

6.初次使用vue，搭建开发环境，关闭提示

  • 新建html文件

  • 使用script src导入 vue.js

  • 然后打开浏览器

6.1出现问题

image-20220430134839582

  • 下载开发者工具以便于提供更好的开发者环境

    • 解决，引入开发者工具

    • image-20220430135441096

    • 然后点击chrome extension

    • image-20220430140126225

    • 点击install the extension

    • 打开谷歌浏览器，在右上角点击vue的小图钉

    • 然后点击添加扩展程序就可以了，这样就解决了这个问题

  • 正在开发者模式，确保你在部署产品的时候转换成产品模式。

    • 生产环境应该使用压缩的文件

    • 解决

    • 打开api找到全局配置vue.config

    • image-20220430141302004

    • 默认提示是开着的，搜易饿哦们把他改成false就能让他关掉

    • ！！！！我的这样子改有的时候有用，有的时候没用，我也不知道为什么

    • <body>
      ​
      ​
      <script>
          Vue.config.productionTip = false;
      </script>
      </body>

       

  • 第三条问题解决方法(3条消息) 解决DevTools failed to load SourceMap: Could not load content for ***.js.map: HTTP error: code 404 问题_LYFlied的博客-CSDN博客

    • shift + 刷新以后会出现这个问题

    • 右键点击检查

    • 来到network选项卡

    • 强制刷新一下

    • image-20220430144200796

    • http://localhost:63342/favicon.ico

    • 搜索127.0.0.1:63342

    • 这个代表本机端口63342端口找页签图标

    • 没解决

7.简写有哪些，还有作用

  • v-bind：代表的是单项绑定，里面写函数，简写为冒号：

    • 用于解析标签（包括：标签属性、标签体内容、绑定事件）

    • 举例v-bind:herf="xxx"可以简写为 ：href = "xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性。

  • v-on：可以绑定事件函数

    • <button v-on:click="myfun">点我提示信息</button>
      <!--        @是v-on的简写-->
              <button @click="myfun">点我提示信息</button>
    •  
posted @ 2022-05-02 21:52  newlive122  阅读(34)  评论(0)    收藏  举报