【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue语法初探

1、第一个Vue程序

hello world 代码

运行结果

这是Vue最基础的使用，找到 id 为 root 的标签，将 Vue 实例的模板放入标签之内！

image-20210611215412591.png

我们在模板里面写一个变量

运行结果

content是一个变量，在模板中，我们使用“{{}}”将其包裹就是表示此意！这个变量会从 data 里面获取！

image-20210611220221864.png

使用mounted函数

当页面加载完成执行此函数！

2021年6月12日10点23分，我必须回来补充一下关于 this 的概念了，this 代表的是当前 vue 实例，我们下面使用的this.content表示取得 data 里面的 content ，这是一种简写，完整写法是 this.$data.content，这么写看起来更容易理解！

运行结果

image-20210611221231114.png

这告诉我们什么？

实际上我这是第二遍学习 Vue 了，第一遍学得粗糙，似懂非懂，本来不想做这么详细的笔记，但是老师告诉我了我不知道的概念或者是思想，我觉得这是极其重要的内容！认真！认真！再认真！唯有一丝不苟，才能学到真正的知识！加油！訾博！2021年6月11日22:18:59

以前我们要改变页面的内容需要使用 类似document.getElementById的代码来操作DOM，而现在我们不再关心DOM，而是更加关心数据，我们直接操作数据就可以了，剩下的交给Vue，我们就从“面向DOM编程”变成了“面向数据编程”！

2、反转字符串

我们主要来了解 vue 如何绑定事件

代码

运行结果

image-20210611225239016.png

3、显示与隐藏

我们这里来了解 vue 控制标签是否加载

代码

显示状态

image-20210611233900176.png

隐藏状态

image-20210611234035130.png

4、了解循环和双向绑定

vue 的指令 v-for 大大简化了我们的循环代码！在我刚学 vue 的时候就非常喜欢！当然我只是个前端小白！

代码

运行结果

image-20210612095304220.png

往列表里面添加新的数据

运行结果

image-20210612100351394.png

来点更有意思的

双向绑定：你变我也变，我变你也变！

运行结果

image-20210612102005701.png

5、组件概念初探

我们在”第一个 vue 程序“中演示了使用{{content}}来引入 data 里面的数据，这两个大括号的学名就做插值表达式！现在我们产生了一个新的需求：将标签的属性绑定 data 里面的一个值。但我们使用插值表达式是无法达到目的的！我们需要一个新的指令 v-bind

先了解一下v-bind指令

运行结果

image-20210612103655742.png

关于组件

组件的概念哪里都有，我们不可能把整个项目的内容写在一个文件里面，所以我们分成不同的文件和模块实现不同的功能，组合他们以实现完整的功能！这在程序开发中，在现实生活中随处可见！我们在了解循环和双向绑定的时候使用到了列表 li 标签，在实际使用的时候可能要给每一个 li 标签里面的内容添加很多相关内容或者样式，这就使得页面代码集中在一个文件中，不利于维护，也显得代码非常臃肿，因此我们尝试来把 li 标签抽取成一个组件！

下面我们来写一个简单的组件！

运行结果

image-20210612105302290.png

让组件灵活起来

组件不仅要包含其 html 内容，还要有 css 样式，以及 js 代码逻辑！

运行结果

image-20210612110551394.png