Vue的学习之旅-part1
- vue介绍
- vue读音
- 编程范式
- ES6中不用var声明变量
- vue的声明、初始化传参
- 使用data中数据时要用this指向
- vue中的语法糖
- MVVM
- 在Vue中， MVVM的各层的对应位置
- 方法、函数的不同之处
vue介绍
vue读音
Vue 读作 /vju:/ 不要读成v u e
Vuex 的x读作叉 不要读成埃克斯
博主 DTcode7 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
后续还有5个part，敬请期待哦~
编程范式
一般的编程方式的编程范式：命令式编程
也就是第一步创建dom元素，第二步定义变量，第三步将变量展示到dom中去
Vue的编程范式：声明式编程
通过挂载要管理的元素，在data中定义数据，页面中使用{{}}【叫做mustache（胡须）语法，是一种模板语法】 根据data中的数据名获取到数据展示在html中。 且会随着数据的改变自动改变html中的数据（响应式）
ES6中不用var声明变量
ES6中不用var声明变量了，因为var有作用域之类的缺陷 都用let声明变量，const声明常量
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，供别人调用
方法：定义在一个实例里面的函数，叫做方法，是在这个实例里的，不是放在外面给谁都能用的。
