jquery 打开新网站,怎么做网站的优化排名,做英语题的网站,宝安做网站公司1.插值表达式
1.插值表达式的作用是什么#xff1f;
利用表达式进行插值#xff0c;将数据渲染到页面中#xff1b;
2.语法结构#xff1f;
{{表达式}}
3.插值表达式的注意点是什么#xff1f;
#xff08;1#xff09;使用的数据要存在#xff0c;在data中…1.插值表达式
1.插值表达式的作用是什么
利用表达式进行插值将数据渲染到页面中
2.语法结构
{{表达式}}
3.插值表达式的注意点是什么
1使用的数据要存在在data中
2支持的是表达式而不是语句
3不能在标签属性中使用p title{{ 变量 }}/p ×
2.Vue 指令
Vue 会根据不同的指令针对标签实现不同的功能。指令带有 v-前缀的特殊标签属性
1v-html 作用动态的解析标签像插值表达式的话会以文本形式进行展示 v-html 表达式 → 动态设置元素 innerHTML 2v-show v-if 作用控制元素的隐藏 -v-show控制元素显示隐藏 语法v-show 表达式 表达式值 true 显示 false 隐藏 原理切换 display:none 控制显示隐藏 场景 频繁切换显示隐藏的场景 -v-if控制元素显示隐藏条件渲染 语法 v-if 表达式 表达式值 true 显示 false 隐藏 原理 基于条件判断是否 创建 或 移除 元素节点 场景 要么显示要么隐藏不频繁切换的场景 3v-else v-else-if 作用辅助v-if 进行判断渲染 语法 v-else v-else-if 表达式 注意 需要紧挨着 v-if 一起使用 4v-on 作用注册事件 添加监听提供处理逻辑 语法1 v-on事件名 “内联语句” 2 v-on事件名 “methods中的函数名” 简写 事件名“methods中的函数名” 注意methods函数中的 this 指向 Vue 实例同时我们也可以通过v-on 来调用传参 5v-bind 作用动态地设置 html 的标签属性和 - src url title ... 语法v-bind属性名 “表达式 ” 注意简写形式 属性名 “表达式” 6v-for 作用基于数据循环多次渲染整个元素 -数组、对象、数字 语法v-for item,index in 数组item 是每一项index是索引 省略 index 则 v-for item in 数组 注意v-for 的默认行为会尝试 原地修改元素 就地复用因而我们最好加上v-for 中的key并且给元素添加的唯一标识便于Vue进行列表项的正确排序复用。 注意点 1. key 的值只能是 字符串 或 数字类型 2. key 的值必须具有 唯一性 3. 推荐使用 id 作为 key唯一不推荐使用 index 作为 key会变化不对应 7v-model 作用给表单元素使用双向数据绑定 - 可以快读获取或设置表单元素内容 ① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新 语法: v-model 变量 3.指令的修饰符 通过 “ . ” 指明一些指令的 后缀 不同 后缀 封装了不同的处理操作 - 简化代码 1按键修饰符 keyup.enter - 键盘回车监听 2v-model 修饰符 v-model.trim - 去除首尾空格 v-model.number - 转数字 3事件修饰符 事件名.stop - 阻止冒泡 事件名.prevent - 阻止默认行为 4.v-bind 对于样式操作的增强* 1v-bind - 操作 class 语法 : class 对象/数组 1.对象 - 键就是类名值是布尔值。如果值是 true 有这个类否则没有这个类 div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div 适用的场景一个类名来回切换 2.数组 - 数组中所有类都会添加到盒子上本质就是一个 class 列表 div classbox :class[ 类名1, 类名2, 类名3 ]/div 适用场景批量添加或删除类 示例京东秒杀导航栏的切换 2v-bind - 操作 style 个人认为这个还是比较重要的 语法 style 样式对象 div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div 适用场景某个具体属性的动态设置 注意的一些点 1一些格式首先对于CSS属性值我们需要对其加引号其次对于带有横杠的属性名在JS对象中是不支持的因而此时可以采取两种方法一种是驼峰另一种是我们可以对这种属性名加引号 div :style{height:400px;width:600px;backgroundColor:white;background-color:white;}/div 2如果对单个的属性进行动态的改变则 div :style{height:400px;width:len;}/div/* 然后在 data 中定义 len */ 5.v-model 应用于其他表单元素 这个暂时和之前的是一样的 参考 026-v-model应用于其他表单元素_哔哩哔哩_bilibili
