学习vue基础知识

Posted 2021-03-04 frank000000

什么是vue

前端框架的3马车 angular 谷歌公司 m(数据)v（视图）c（控制器） 双向数据绑定react facebook （非死不可） 视图层的框架view 虚拟domvue 尤玉溪 双向数据绑定+虚拟dom是一套用于构建用户界面的渐进式框架 入门难度最低

为什么要学习vue

高效 1.运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高2.开发效率高 采用了组件化开发 将开发者的精力从dom操作解放出来，转移到数据操作上

爱上vue 3 5

什么叫做热爱 无时无刻的思念 写页面使用vue 抛弃原来二阶段的写法（直接操作dom）

vue的实例化

1.下载引入
2.找一个dom元素 这个dom要被vue控制
3.在js中实例化vue

数据绑定

指令 directive

指令后面跟的都是表达式或者变量

内置指令 vue内部提供的直接使用自定义指令 实现自定义某些功能的指令

条件渲染 都可以控制一个元素的显示或者隐藏 v-show 通过样式 display：none v-if 直接控制div元素有还是没有 （v-else v-elseif）事件绑定 使用vue中的事件 v-on：事件名（和原生js的事件名一致）:事件的处理函数 @事件名:事件处理函数 事件的处理函数写在实例的配置项 motheds 处理函数的默认参数是事件对象 如果需要传递其他参数 事件对象需要通过`$event 手动传递属性绑定 v-bind 元素的属性都是跟的固定的值 属性绑定可以实现 属性的后方跟变量或者表达式 v-bind：要绑定的属性名 <img v-bind:src=‘‘> :要绑定的属性名 <img :src=‘‘>列表渲染v-for