博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞收藏⭐评论✍
文章目录
1.0 Vue 概述
2.0 Vue 指令
2.1 指令 - v-bind
2.2 指令 - v-model
2.3 指令 - v-on
2.4 指令 - v-if、v-else-if、v-else
2.5 指令 - v-show
2.6 指令 - v-for
3.0 生命周期
1.0 Vue 概述
Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写。基于 MMVM 思想，实现数据的双向绑定，将编程的关注点放在数据上。
View 相当于 HTML 中的标签，在网页中展示出来的数据，而 Model 则是负责存储数据，ViewModel 则负责连接 View 和 Model ，实现数据的双向绑定。双向绑定的意思可以简单的理解为，无论改变 View 还是 Model 的数据都会影响另外一方的数据。Vue.js 正是通过双向数据绑定实现了这种便捷的数据驱动开发模式。
Vue.js 采用了响应式数据绑定的机制，当数据发生变化时，页面会自动更新。Vue.js 提供了丰富的指令（Directives），用于操作 DOM 、数据绑定、事件处理等。
2.0 Vue 指令
在 Vue.js 中，指令（Directives）是一种特殊的标记，用于向 Vue 实例传达特定的行为。指令以 v- 开头，可以直接绑定到 DOM 元素上，告诉 Vue.js 在渲染 DOM 时要对元素进行怎样的处理。
2.1 指令 - v-bind
用于动态绑定 HTML 属性，可以将元素的属性与 Vue 实例的数据进行动态绑定。
举个例子：
例如将 标签中的属性 herf 进行绑定，v-bind:href="url" 也可以简写成 :href="url" 。
运行结果：
2.2 指令 - v-model
用于实现表单元素和 Vue 实例数据的双向绑定，当表单元素的值发生改变时， Vue 实例的数据也会相应的更新。
举个例子：
{{message}}
用 v-model 指令将输入内容与存储数据绑定起来，保证输入内容与存储数据一致。
双大括号 {{}} 是一种插值表达式，用于在模板中输出 Vue 实例中的数据。当 Vue 实例的数据发生变化时，插值表达式会自动更新对应的值，从而实现数据的动态展示。当页面渲染时，{{ message }} 会被替换为当前 message 数据的值，
运行结果：
当改变文本框中的内容时，存储的数据也会相应的改变，因为利用了 v-model 将两者进行绑定了。
2.3 指令 - v-on
用于绑定事件监听器，可以监听 DOM 事件并在触发时执行 Vue 实例中方法。
举个例子：
指令 v-on 将监听器进行绑定，一旦触发，会执行 methods 中指定的方法。v-on:click="on()" 可以简写为 @cilck="on()" 。
运行结果：
2.4 指令 - v-if、v-else-if、v-else
条件性的渲染某元素，判定为 true 时渲染，否则不渲染。
举个例子：
年龄
年轻人
中年人
老年人
运行结果：
2.5 指令 - v-show
根据条件展示某个元素。
举个例子：
年轻人
中年人
老年人
运行结果：
与 v-if 的区别：
与 v-if 区别的是，指令 v-show 是将全部条件都会进行渲染，根据 display 属性的值进行展示，而 v-if 不符合条件的不会进行渲染。
v-if 不合符条件的不会进行渲染：
只会渲染符合条件的值。
v-show 即使不符合条件也会渲染：
不合符条件的渲染了，但是不展示在网页上，通过 display 属性值判断。
简单概括，v-if 是完全的条件渲染，而 v-show 是简单的显示与隐藏。
2.6 指令 - v-for
用于循环渲染数组或对象，可以遍历数组的每个元素或对象的属性。
语法格式：
举个例子：
| 序号 | 名字 | 年龄 | 性别 | 成绩 | |
|---|---|---|---|---|---|
| {{index+1}} | {{user.name}} | {{user.age}} | 男 | 女 | {{user.score}} |
运行结果：
3.0 生命周期
指一个对象从创建到销毁的整个过程。每触发一个生命周期事件，会自动执行一个生命周期方法。
Vue 的生命周期：
在 Vue 实例挂载到 DOM 之后，Vue实例已经可以正常工作并与 DOM 进行交互。
代码如下：
运行结果：
挂载完成之后会自动执行 mounted() 方法，Vue 初始化成功，HTML 页面渲染成功。可以发送请求到服务端，加载数据。
文章来源
您阅读本篇文章共花了：
发表评论