什么是vue: 是一套用于构建用户界面的渐进式javascript框架 什么是渐进式框架 可以和传统的网站开发融合在一起,例如可以简单的把他当做一个类似于jq的库来使用 也可以使用vue全家桶框架来开发大型的大页面应用程序 使用原因: 体积小,编码简单,运行效率高 无dom操作,提高开发效率 事件对象的固定写法$event 事件修饰符 .stop 阻止冒泡 .once 只执行一次 .self只有自己是事件源的时候才触发 .capture 事件捕获 prevent 阻止默认行为 按键修饰符 监听键盘 @事件.keycode=function class 绑定 动态绑定class 方式1 :class=“键名” 键名是变量 方式2 对象 :class={类名:boolean ,类名2:boolean} 数组 :class=[]加引号是字符串 不加引号是变量 控制style :style v-bind:style{“”:“”} 或者小驼峰 多个之间放在数组总 分支语句 v-if v-else-if v-else 分支语句之间不能有其他的标签 v-for=“()参数 in 字符,数组,对象” (item,index) 值 索引 类名必须是存在的 对象的参数是三个 value key index 前端框架 分类 angular react vue 使用过的库 jq,swiper,echarts 核心思想 组件化和数据驱动 es模块化 为什么需要组件化 相同代码的冗余,维护性差 核心: 将页面ui进行从上而下的拆分 把通用的可复用的功能封装到一个组件中 比如轮播图 导航栏 MVVM模型 model ----view ---viewmodel new Vue({ el:"选择器", data:{ 键1:值1, 键2:值2, 键3:值3 。。。 } }); {{键}} v-text="键" 插值语法{{属性名}} 什么是指令 vue的模板语法 本质是自定义属性 格式:v-text,v-html , v-text ="xxxxxx" 将值赋值给 覆盖原有的内容 只显示我自己的值 v-html 可以解析标签 覆盖原有内容 v-model 表单元素里面使用 双向绑定 获得text的值 v-model=“键名” 获得的radio的值 value=“” v-model=“data属性” 获得select的值 value=“” 在select 写v-model=“data属性值” 获得checkbox的值 每一个里面都要写属性值 需要用数组接收 textarea 和input一样 v-once只变更一次 在赋值以后不在改变 标签属性 v-once 值在标签里 v-bind 给标签绑定属性,单向绑定属性 v-bind:属性名=“” :属性名=“” v-bind的简写 v-on 绑定事件 v-on:事件名=回调函数 @事件名称=回调函数 data和methods 里面的键名 不能重复 所有的数据使用都要在选定的区域内 如果methods 里面需要用到data 的属性值 需要加this.键名 |
欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) | Powered by Discuz! X3.4 |