Vue学习记录 (模板,差值表达式,v-text,v-html,v-bind,v-model,v-if,v-show,v-for,v-on,this关键字,按键修饰符) 前端

> new Vue({ el:"#d1",// 作用的区域 data:{// 参数}, methods:{ //函数}, computed:{ // 计算数据函数}, create:{ //页面开始加载时运行} })

插值表达式:{{}}
- 在Vue的作用范围中使用data
- 支持js代码的运算
- 支持函数的调用
v-text:直接进行输出,会覆盖原有内容
v-html:会把数据解析成html代码执行
v-bind:对属性进行绑定
- 简写 :属性=’’ ’ 值 ’ ‘’
- 变量必须使用 ’ ’ 包裹,否则会被当做变量去Vue中寻找
- 变量名中含有 - 时,需要使用 ’ ’ 进行包裹
- 使用对象时可以不用加 ’ ’
v-model:表单数据的双向绑定,也是Vue
v-if:控制标签元素
- 每次都会删除或创建元素
- 有较高的切换性能消耗
v-show:控制标签元素
- 没有进行删除,添加了display=none
- 有较高的初始渲染消耗
【Vue学习记录 (模板,差值表达式,v-text,v-html,v-bind,v-model,v-if,v-show,v-for,v-on,this关键字,按键修饰符)】v-for:循环

//遍历数组 v-for = "(item,i) in 数组" // 遍历对象 v-for = "(val,key,i) in 对象" // 迭代数字 v-for = "(count,i) in 数字"
v-on:绑定事件
- 事件修饰符
  - stop:阻止冒泡(从内到外执行函数)
  - prevent:阻止默认行为
  - capture:使用捕获机制执行函数(从外到内)
  - self:只有自己才能触发
  - once:只触发一次事件修饰符
按键修饰符:修饰v-on绑定的事件
- .enter //回车键
- .tab //Tab键
- .delete (捕获 “删除” 和 “退格” 键) //Backspace键或Delete键
- .esc //Esc键
- .space //空格键
- .ctrl //Ctrl键
- .alt //Alt键
- .shift //Shift键

Vue学习记录 (模板,差值表达式,v-text,v-html,v-bind,v-model,v-if,v-show,v-for,v-on,this关键字,按键修饰符)