ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue、day1

2022-05-02 22:01:29  阅读:157  来源: 互联网

标签:vue 63342 js 点击 api 开发者 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>
    •  

标签:vue,63342,js,点击,api,开发者,day1
来源: https://www.cnblogs.com/raoxin/p/16217041.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有