网站建设推广费会计分录,在线设计网站海报,如今流行的网站建设,游戏咨询网站建设目标是什么一、 内容渲染指令 {{}} 模板渲染#xff08;模板引擎#xff09;
1. {{数据绑定}}
2. {{简单计算}}
3. {{简单逻辑运算}}#xff08;三元运算#xff09;
4. {{做简单 js 判断}}
注意#xff1a;不能写语句、不能解析 html 渲染、不能放在在属性身上 v-…一、 内容渲染指令 {{}} 模板渲染模板引擎
1. {{数据绑定}}
2. {{简单计算}}
3. {{简单逻辑运算}}三元运算
4. {{做简单 js 判断}}
注意不能写语句、不能解析 html 渲染、不能放在在属性身上 v-text 设置标签的内容元素的 innerText 必须是双标签
默认会替换标签内原来的全部内容使用 可替换指
定内容
支持内部写表达式
代码 v-html
设置标签的内容元素的 innerText 必须是双标签
会解析 HTML 标签
代码 解析文本要使用 v-text,解析带有 html 标签的使用
二、属性绑定指令 v-bind
² 语法V-bind:属性名“挂载的数据 ”
² 简写 属性名 ”挂载的数据 ”
² 解析属性,单向的数据绑定
代码 div idbox img v-bind:srcimgSrc alt img :srcimgSrc :titleimgTitlealt /div /body /html script srcvue.js/script script new Vue({ el:#box, data: { imgSrc:1.PNG, imgTitle:奶茶 } }) /script 三、事件绑定属性 v-on
² 语法 v-on:事件名 ”方法 ”
² 为元素绑定事件
² 绑定的方法在 methods 属性中
² 可以在方法内部通过 this 直接获取 data 中的值
² v-on 可以简写成
² 事件绑定并且传参数
代码 div idbox input typetext valuev_on 单击 v-on:clickdoIt() input typetext valuev_on 简写单击 clickdoIt() input typetext valuev_on 双击 dblclickgai() input typetext value回车键 keyup.entersayHi br span{{message}}/span /div 案例计数器 $event
$event 是 vue 提供的特殊变量用来表示原生的事件参数对象
event。$event 可以解决事件参数对象 event 被覆盖的问题
事件修饰符 按键修饰符
使用按键修饰符监听按键 四、条件渲染属性—显示切换 v-show
² 条件渲染,判断是否隐藏,true 是现实 false 是隐藏
² 原理是修改 display 属性
代码 v-ifv-else 判断是否插值
² 根据条件的真假判断是否显示数据
² 原理是 append remove
代码 案例选项卡 五、列表渲染指令 v-for 列表渲染
² 语法 v-for“ item in 数组 ”
² 根据数据生成列表结构隐式遍历
² 可以通过此语法获取到 item 子项也可以获取到索引 index 当列表的数据变化时默认情况下vue 会尽可能的复用已存在的 DOM 元素
从而提升渲染的性能。但这种
默认的性能优化策略会导致有状态的列表无法被正确更新。
为了给 vue 一个提示以便它能跟踪每个节点的身份从而在保证有状态的列
表被正确更新的前提下提升渲
染的性能。此时需要为每项提供一个唯一的 key 属性
六、双向数据绑定指令 v-model 控制表单产生数据双向绑定数据
² 设置或者获取表单元素的值
