Vue的学习之旅-part1

vue介绍

vue读音

Vue 读作 /vju:/ 不要读成v u e
Vuex 的x读作叉 不要读成埃克斯

---

后续还有6个part，敬请期待哦~
后续几篇博客: Vue的学习之旅-part1
后续几篇博客: Vue的学习之旅-part2
后续几篇博客: Vue的学习之旅-part3
后续几篇博客: Vue的学习之旅-part4
后续几篇博客: Vue的学习之旅-part5
后续几篇博客: Vue的学习之旅-part6

---

编程范式

一般的编程方式的编程范式：命令式编程
也就是第一步创建dom元素，第二步定义变量，第三步将变量展示到dom中去

Vue的编程范式：声明式编程
通过挂载要管理的元素，在data中定义数据，页面中使用{{}}【叫做mustache（胡须）语法，是一种模板语法】 根据data中的数据名获取到数据展示在html中。 且会随着数据的改变自动改变html中的数据（响应式）

ES6中不用var声明变量

ES6中不用var声明变量了，因为var有作用域之类的缺陷 都用let声明变量，const声明常量
在ES6中，除了使用var声明变量外，还可以使用let和const来声明变量。具体如下：

1. let声明：let是ES6中引入的新的声明变量的方式，它提供了块级作用域，与var不同的是，let声明的变量不会发生变量提升。这意味着let声明的变量必须在声明之后才能使用，否则会抛出错误。let允许在相同的作用域内重复声明变量，但每次声明都会创建一个新的变量。
2. const声明：const也是ES6中新增的关键字，用于声明常量。与let相似，const也提供块级作用域，且没有变量提升的问题。但是，const声明的变量必须被赋值，且赋值后不能再重新赋值。这就意味着const更适合那些一旦定义就不应该改变的值。
3. 不使用关键字声明：在JavaScript中，如果在代码中直接赋值而没有使用任何声明关键字（如var、let或const），那么这个变量会被隐式地声明为全局变量，这种方式通常被称为隐式全局变量。这种做法在严格模式下是不被允许的，因为它可能导致意外的全局变量污染。

在ES6中，推荐使用let和const来声明变量，因为它们提供了更好的作用域控制和避免了一些因变量提升而导致的问题。而var由于其函数作用域的特性和变量提升的行为，可能会在一些情况下导致意料之外的结果。

vue的声明、初始化传参

new Vue( ) 方法里传入的options参数是个对象{}  这个对象里可以有：
el-------》指定挂在的dom的id
data----》绑定的数据 可以是对象，但是在组件中，data必须是个函数（就是有返回值）
methods:{}  -------》方法
computed:{}  -----》计算属性  注意：因为是属性，所以里面的方法命名时尽量不要起名为：getCount这样有get这种动词的名字，直接叫做count这样的名词就行，这样才是属性

还可以有，生命周期中的各种钩子函数

使用data中数据时要用this指向

注意：methods、computed等操作中要想拿到data里的数据，需要通过this来指向

vue中的语法糖

语法糖：一种代码的简写

v-on:click  的语法糖（简写）---》 @click  v-on:就是用于监听 DOM 事件的
v-on:hover  ===>  @hover  鼠标悬停时触发

后面跟着要触发的方法

v-on: 当所要触发的函数没有参数需要传入的时候，可以不写（） 直接写方法名称

v-bind:  ---->  语法糖：就是一个 ：    

v-model（数据双向绑定）本质上就是个语法糖

v-slot: -----> 语法糖：是个 #    插槽

MVVM

MVVM：Model-View-ViewModel的简写

Model–》数据层，后端数据、来自服务器的数据等
View—》视图层，也就是前端html的DOM层，给客户看的页面效果
ViewModel—》视图模型层，是数据层和视图层链接的桥梁。 一：实现数据双向绑定，将Model层的数据变化实时展现到View层中。二：实现DOM监听，当页面DOM元素发生事件（点击、滚动、移入移出等），可以根据方法进行操作Model层的数据

在Vue中， MVVM的各层的对应位置

Model----》就是data值
View----》就是html部分的代码
ViewModel---》就是const app=new Vue()   通过new Vue()创建的实例就是数据层和视图层交互的桥梁

方法、函数的不同之处

函数：就是单独定义的一个function，供别人调用

方法：定义在一个实例里面的函数，叫做方法，是在这个实例里的，不是放在外面给谁都能用的。

在Vue中，方法和函数的区别主要体现在定义方式和使用场景上。

首先，定义方式不同：

• 方法（Methods）：是在Vue实例内部定义的，通常用于处理与视图相关的逻辑，如事件处理、数据操作等。它们可以在模板中直接通过v-on指令或简写的@符号调用，也可以通过this关键字在Vue实例的其他部分（如计算属性、生命周期钩子等）调用。
• 函数（Functions）：是在Vue实例外部定义的，它们是普通的JavaScript函数，不属于Vue实例的一部分。这些函数可以执行任何JavaScript代码，但通常不直接与Vue的模板交互。

其次，使用场景不同：

• 方法：通常用于响应用户交互，如点击事件、输入事件等，或者用于封装复用的逻辑代码。
• 函数：更多用于执行通用的、与Vue实例无关的操作，或者作为高阶函数的参数等。

总的来说，Vue中的方法主要用于处理与视图相关的逻辑，而函数则是普通的JavaScript函数，两者在定义方式和使用场景上有所区别。

---

博主 DTcode7 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！