Vue2 第一节 通用概念和前置知识

本篇将记录自己学习Vue的知识点总结

学习资源:

B站 :尚硅谷Vue2.0+Vue3.0全套教程

有个博主将这个视频总结成了笔记,之后的博客也会参考这个笔记

(126条消息) 【2022.3】尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查)_尚硅谷vue.js笔记_@大吉的博客-CSDN博客

(1)Vue是什么

答:vue是一套用于构建用户界面(将数据展示到界面)的渐进式JavaScript框架,可以自底向上逐层的应用(如果是简单应用,只需要一个轻量小巧的核心库,如果是一个复杂应用,可以引入各式各样的Vue插件)

(2)由谁开发的

答:尤雨溪

(3)Vue的特点

① 采用组件化模式,提高代码复用率,使代码更好维护(组件化就是将需求按照功能进行模块式划分,一个.vue文件中有自己的html, css, js代码)

② 声明式编码,编码人员无需直接操作DOM,提高开发效率

(4)Vue的官网使用

① Vue的官网: https://cn.vuejs.org/

② Vue2文档入口:

Vue2 第一节 通用概念和前置知识_第1张图片

 ③ 需要关注的官方提供的学习资料

1)学习栏里面的内容

Vue2 第一节 通用概念和前置知识_第2张图片

教程: 就是vue提供的使用指南,如何安装以及如何使用 

Vue2 第一节 通用概念和前置知识_第3张图片

API:相当于一本字典,编写遇到不会的就可以在API中去查

Vue2 第一节 通用概念和前置知识_第4张图片

风格指南:类似于代码规范,只针对Vue

Vue2 第一节 通用概念和前置知识_第5张图片

示例:官方提供的示例

Cookbook : 编码技巧

 2)生态系统栏里面的内容

Vue2 第一节 通用概念和前置知识_第6张图片

3)Awesome Vue:  一些Vue官方认为不错的vue的周边库(比如实现报表)

Vue2 第一节 通用概念和前置知识_第7张图片

(5)搭建Vue开发环境

① 下载 Vue.js

官网链接: 安装 — Vue.js (vuejs.org)

可以选择开发版本和生产版本

开发版本包含完整的警告和调试模式,在开发的时候选择

生产版本删除了警告,包比较小,项目写完上线之后,为了让vue.js体积更小,选择使用生产版

 ② 在html文件中引入Vue.js


    
    初识vue
    

 ③ vue开发者工具安装

1)在网上找一下vue的开发者工具的安装包

2)打开你要安装的浏览器,我这边用谷歌来示范,选择右上角三个点

Vue2 第一节 通用概念和前置知识_第8张图片

 选择拓展工具中的管理拓展工具

Vue2 第一节 通用概念和前置知识_第9张图片

 3)打开右上角开发者模式

Vue2 第一节 通用概念和前置知识_第10张图片

4)将刚才的开发者模式的安装包拖进来,再将右边的开关打开 

Vue2 第一节 通用概念和前置知识_第11张图片

5)点击浏览器右上角的这个按钮(我这边是已经安装好开发者工具的截图,所以左边有两个开发者工具的图标,如果没有配置好应该是没有的)

Vue2 第一节 通用概念和前置知识_第12张图片

 6)点击下图的图钉给钉上,就可以在浏览器中使用开发者工具了

Vue2 第一节 通用概念和前置知识_第13张图片

 7)查看开发者工具,按F12键之后,打开网站调试模式,点击下图Vue就可以使用Vue的开发者工具

Vue2 第一节 通用概念和前置知识_第14张图片

 8)查看开发者工具Vue2 第一节 通用概念和前置知识_第15张图片

你可能感兴趣的:(前端学习,Vue,学习,vue.js,前端)