vue基础

Vue基础

学习Vue之前我们需要了解一下什么是Vue。

vue.js是什么

vue是java script的响应式开发库，是现在主流的开发框架之一，vue于2015年发布1.0版本，2016年发布2.0版本，2020年发布3.0版本。

vue是一个遵循MVVM模式的渐进式技术栈

MVVM模式

mvvm

• mv （视图层 Model-view）
• v （数据层view）
• vm （视图模型层view-Moderl）控制数据的改变和视图

mvvm模式是由mvc模式衍生来的，当视图层发生改变时，会自动更新到视图模型中

mvc是什么？

mvc是后台框架的模式分为

• m（model模型）
• v （ view视图）
• c （ controllrt控制器 ）

mvvm是为了实现mvc中的V

vue通过mvvm的模式拆分，分为视图和数据两部分，我们只需要操作数据即可，vue会帮助我们操作DOM

语法

在vue中语法是用{{}}来将数据渲染到页面上

指令

vue的指令带有前缀v- v-可以绑定一个表达式并且把一些特性作用到DOM上

v-cloak

解决差值闪烁

为什么会出现插值闪烁，因为代码在加载时是从上到下加载先加载的是HTML后加载的是js 在html 加载完成后js才把插值如法替换掉 所以会出现插值闪烁

v-text

数据填充到标签内

单项的绑定插值改变时不会影响数据

用于将数据填充到标签中

v-html

和v-text一样 可以将HTML片段填充到标签内

和text去区别是 text输出的是纯文本，html输出的是 将html当作标签解析后输出

v-on

用来绑定事件

v-on:click可以简写为@click

v-model

双向数据绑定

v-model用法限定于、、、components中使用

v-mondel绑定后，视图输入内容会变化绑定指令的数据，数据发生改变时也会改变视图。

v-bind

用于绑定属性 用来相应更新html属性

v-bind也可以简写

例： 简写

v-bind 也可以作用域class 、styls

v-if

通过条件判断展示或者音程某个数据，或多个数据

配合v-eles v-eles if 一起使用

v-show

判断dom 显示隐藏

v-show 本质就是标签的display设这为none

v- show 和 v-if 的区别

v-show是控制css的显示隐藏

v-if是不停的销毁创建

咋性能方面v-show性能更好

v-if有局部编译、卸载的过程、切换过程中销毁和重建内部的事件监听和子组件

最后一点是v-model的底层原理

重要

v-model的底层原理

v-model 就是vue的双向数据绑定

实现原理是

采用数据劫持的方式结合发布者-订阅者模式的方式 通过object.defineproperty来劫持各个属性seter 、geter，在数据发生改变时发送小时给订阅者，触发相应的回调来渲染视图，实现数据与视图的同步