可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
-
.ctrl -
.alt -
.shift
例如：
<input @keyup.alt.67=“submit()”>
<button @click.ctrl=“clear”>Clear
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
遍历数组：
语法：v-for="item in items"
-
items：要遍历的数组，需要在vue的data中定义好。
-
item：迭代得到的数组元素的别名
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法：v-for="(item,index) in items"
- index：迭代到的当前元素索引，从0开始。
示例：
{{user.name}} - {{user.gender}} - {{user.age}}
运行结果：
遍历对象：
v-for除了可以迭代数组，也可以迭代对象。语法基本类似：
v-for=“value in object”
v-for=“(value,key) in object”
v-for=“(value,key,index) in object”
-
1个参数时，得到的是对象的属性值
-
2个参数时，第一个是属性值，第二个是属性名
-
3个参数时，第三个是索引，从0开始
示例：
-
{{index+1}} - {{user.name}} - {{user.gender}} - {{user.age}}
{{index + 1}}. {{key}} - {{value}}
效果：
key
当 Vue.js 用
v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个功能可以有效的提高渲染的效率。但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一
key属性。理想的key值是每项都有的且唯一的 id。示例代码：
-
这里使用了一个特殊语法：
:key=""我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性 -
这里我们绑定的key是数组的索引，应该是唯一的
v-if，条件判断。当得到结果为true时，所在的元素才会被渲染。 语法：v-if="布尔表达式"v-show也是用于根据条件展示元素的选项指令，用法大致一样。示例：
Title <button @click=“show = !show”>按钮
看到我啦？！
看到我啦？！show
效果：
不同点：（一般使用v-if）
v-if的元素始终会被渲染并保留在 DOM 中v-show只是简单地切换元素的 CSS 属性display，block为显示，none为隐藏.与v-for结合:
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
修改v-for中的案例，添加v-if：
-
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
测试：只显示女性用户信息
我们可以使用
v-else指令来表示v-if的“else 块”：使用了 if
使用了 else
v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别。v-else-if，顾名思义，充当v-if的“else-if 块”，可以连续使用：Title <button @click=“random=Math.random()”>点我呀{{random}}
if
if 0.5
if 0.25
else
类似于
v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。演示：
html属性不能使用双大括号形式绑定，只能使用v-bind指令。在将
v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。Title 效果：
在将
v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。绑定class样式：
语法：
v-bind:class可以简写为:class数组语法： (不会使用)
渲染后的效果：（具有active和hasError的样式）
对象语法： 传给
v-bind:class一个对象，以动态地切换 class：上面的语法表示
active这个 class 存在与否将取决于数据属性isActive的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。你可以在对象中传入更多属性来动态切换多个 class。此外，
v-bind:class指令也可以与普通的 class 属性共存。如下模板:v-bind:class=“{ active: isActive, ‘text-danger’: hasError }”>
和如下 data：
data: {
isActive: true,
hasError: false
}
结果渲染为：
active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。
测试代码：
Title v-bind:class=“{ active: isActive, ‘text-danger’: hasError }”>
运行结果：
绑定style样式：
数组语法： 数组语法可以将多个样式对象应用到同一个元素上：
数据：
data: {
baseStyles: {‘background-color’: ‘red’},
overridingStyles: {border: ‘1px solid black’}
}
渲染后的结果：
对象语法：
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：数据：
data: {
activeColor: ‘red’,
fontSize: 30
}
效果：
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
data:{
birthday:1529032123201 // 毫秒值
}
我们在页面渲染，希望得到yyyy-MM-dd的样式：
您的生日是：{{
new Date(birthday).getFullYear() + ‘-’+ new Date(birthday).getMonth()+ ‘-’ + new Date(birthday).getDay()
}}
虽然能得到结果，但是非常麻烦，在Vue中提供了计算属性，来替代复杂的表达式：
计算属性(computed)：本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。
代码：
Title 您的生日是：{{birth}}
效果：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要
birthday还没有发生改变，多次访问birthday计算属性会立即返回之前的计算结果，而不必再次执行函数。
watch可以让我们监控一个值的变化。从而做出相应的反应。
测试代码：
Title 效果：随着我们在输入框改变数据，后台会做出相应的响应
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
我们在输入框改变数据，后台会做出相应的响应
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-5tIZlJdb-1712225883871)]
[外链图片转存中…(img-cntG7UUB-1712225883872)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-l1MayO8i-1712225883872)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
扫一扫
2892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
