vue - vue基础/vue核心内容

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

终于算是顺利进入vue了，确实也只有学了过后才知道，之前三过vue而不学，确实是对的，现在进来了一点都不后悔，ajax、node.js、promise、webpack、git等等确实是除了三大基础外还需要额外学的。
终于能够一窥vue的真容了，学了这么久，说实话一直都忍着，不去触碰这一条线，就想留着保持浓厚的兴趣，来看看vue到底是个什么神奇的东西，能让代码如此简单，确实，至少到我现在学的阶段，其他大的感触没有，唯一的感触就是，很多功能的实现要简便的多了，那比原生js不是简单一星半点。
这中间笔记还丢过，感觉可能typora都要让我来学两编加深下记忆吧，总是有这个bug，明明占用的存储大小还在那里，打开就是一片空白，反正已经跟typora的制作团队联系过了，看能不能后续给解决掉这个bug。

这篇文章可谓是重量级，至少是我目前为止集格式、含金量、规模最大的！

一.Vue简介

1. Vue是什么

一套用于构建用户界面的渐进式（渐进式：自顶向下逐层的应用，由一个小巧的核心库，引入各式各样的vue插件）JavaScript框架。

2. 特点

• 采用组件化模式，提高代码复用率，让代码更好维护：一个.vue后缀的文件包含html、css、js全部包在一起完成一个活动版块的内容这就是组件化；代码复用率：你既然都封装好了，我直接拿来用那就是代码复用率；代码更好维护：我直接在你的基础上修改一些功能。
• 声明式编码

在了解什么是声明式编码之前先了解什么是命令式编码，我们以前要将一个数据对象渲染到页面上都是通过原生js这样一步一步往下做，像在一步一步完成别人命令一样这就是命令式代码，而我们声明式代码只需要声明一下即可。

• 使用虚拟DOM+Diff算法，复用DOM节点

原来我们用原生js，渲染数据通过模板字符串亦或者是模板引擎，如果这个时候又新增了几条数据上来，又要从头开始渲染然后生成一个完整的html，那除去我们新增的是不是又生成了一些以前就有的字符串（以前那些数据），所以vue的做法就是运动虚拟dom，再加上diff算法会去比较虚拟的dom如果有跟以前一样的直接复用。

二.搭建vue开发环境

1.安装

打开vue官网安装开发版本，引入vue.js后log会有两个提示：一个是叫你要下载开发者工具，一个是提醒你在上线后不要引入这个vuejs

Vue代码提示插件：vue 3 Snippets

2.开发者工具

谷歌应用商店下载vue-devtools

注意修改vue谷歌插件

3.productionTip

也就是我们第二个提示，参照vue官网api

这个是我们vue的全局配置下的属性，也就是vue.config的属性字面意思就是生产环境提示，修改为false。

自此所有提示消除。

三.vue基础

1.hello小案例

进入这个案例前，先解决一个问题

首先要知道我们的vscode开启live server后，他是将整个vscode文件夹放在了这个服务器下面去了，所以他回去服务器的根目录上找这个小图标，在根目录添加一个这样的图标即可

怎么来使用vue，开端需要创建一个vue的对象实例，然后主要的是，实例里面要传入的参数：

el ：‘’ el是固定写法，后面的值通常为css的选择器

data ：｛｝ data也是固定写法，后面暂时以对象进行书写，作用是向上面el也就是哪个容器传递参数

总结：

• 想让vue工作必须配置一个vue实例，并且里面的参数为一个对象
• 容器（div盒子）也被称为 vue模板 的作用一个是插入vue语法，二个是当运行js的时候看到vue这个实例，那么vue.js就回去扫描有没有这个容器，扫到后还有一个vue语法，就去看数据有没有这个键，从而完成一个转换的过程。其实这个原理有点类似于前面说过的模板引擎！

1.1.注意事项

• 我们的容器（vue模板）和实例之间是一一对应的关系，你写两个vue模板都以同样的class命名，实例写一个，并不会两个都渲染上，只有第一个模板有数据；你写一个模板，但是实