概述:
vue 是一个MVVM的前端js库,渐进式(需要什么用什么的)JavaScript框架,他封装的一些内容(基础指令以及相关组件)拱我们使用,里面用到的思维主要是数据驱动视图的思维(MVVM核心).Vue主要运营的公司阿里巴巴
Vue的常见版本
Vue2 (2.6以上版本支持某些VUE3的语法)
Vue3(2020年诞生 语法更加简化了)
view主要是对应的dom操作
viewmodel主要里面内置对应的虚拟dom (通过编译将对应实体dom抽取为虚拟对象---监听对象的改变---影响对象的虚拟dom---通过虚拟dom的比对(diff算法)--完成对应的实体dom渲染)
model主要是数据存储对象
插值表达式{{}}
里面填写的变量为data里面的变量
支持对应的js语法
支持运算符及表达式
支持对应的基础数据类型
Vue的相关指令(语法和插值表达式一致)
vue相关支持使用v-开头
v-html(innerHTML)以及v-text(innerText)v-text相当于直接写插值表达式
v-if和v-show的
根据对应的内容判断是否显示对应的标签
区别
v-if判断当前的内容是否渲染,如果为true就渲染 为false就不渲染
v-show 不管怎样都渲染 如果为false设置为dispaly为none
使用场景
切换较多使用v-show 切换只有一次使用v-if(v-if会重新渲染 v-show只渲染一次)
属性相关绑定
v-bind
v-bind:属性名="data中的变量"
v-bind简写
:属性名="data中的变量"
通过属性绑定改变样式的两种方法
通过class属性绑定
通过style属性绑定
事件绑点使用v-on
基础写法
v-on:事件名.事件修饰符="methods里面的处理函数"
事件修饰符
stop 停止事件冒泡
prevent 禁止默认行为
self 停止详细传递
capture 捕获
once 只触发一次
passive 修饰符一般用于触摸事件的监听器,可以用来改善移动端设备的滚屏性能
事件修饰符可以链式调用
事件绑定的简写
@事件名.时间修饰符="methods里面的处理函数"
对应的时间处理函数不能是箭头函数(this会指向window)
对应事件出发的this指向当前的vue实例
当前的this要访问对应的属性使用this.$属性 来访问
当前的vue实例中访问对应的data中的数据 使用this.属性名
v-model
双向数据绑定(实现原理 Object.defineProperty+obServer)
v-model针对表单标签进行双向数据绑定 主要绑定value值
