学习vue第一天总结_vue一天能学会吗-优快云博客

本文链接：https://blog.youkuaiyun.com/C_MP_/article/details/102564937

本文深入探讨了Vue.js框架的基本概念，包括MVC与MVVM的区别，以及el、data、methods等关键组成部分。详细解析了插值表达式、v-cloak、v-text、v-html等指令的作用与应用场景，同时介绍了v-on、v-bind、v-model、v-for等高级指令的使用技巧，对比了v-if与v-show的性能差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了MVC和MVVM的区别;
学习了基本代码的结构；
el:只要控制的区域；
data:是个对象，控制区域要用到的数据；
methods：是和对象，自定义方法；
插值表达式：
v-cloak:可以解决表达式闪烁问题，不会覆盖元素中原本的内容;

v-text：没有闪烁问题，会覆盖元素中原本的内容;

v-html:解析data中的标签；

v-on:提供的事件绑定机制，可以缩写为 @ ；

v-bind:用于绑定属性的指令，可以缩写为：，只能实现数据单向绑定，从M自动绑定到V；

v-model：可以实现双向绑定，只能运用在表单元素中；

v-for：in后面可以放普通数组，对象数组，对象，数字，后面如果放数字的话，count值从1开始循环，要使用key属性只接受string或者number；

v-if：每次都会重新的删除或创建元素，有较高的切换性能消耗

v-show：每次不会删除或者创建，只是切换display:none的样式，有较高的初始渲染消耗；

如果元素涉及频繁的切换，那么最好不使用v-if，推荐用v-show；
如果元素可能永远不会显示出来被用户看到，那么推荐使用v-if。
绑定样式的方法：
v-bind:class;
v-bind:style
事件修饰符：
.stop:阻止冒泡;
.prevent:阻止默认行为;
.capture:捕获机制;
.self:只有点击当前元素才会触发;
.once:只触发一次
如果要访问data上的数据，或者访问methods中的方法，必须带this