跟着 b 站黑马程序员的视频入门 vue,跟敲代码过程中,踩到一些坑,在这里记录一下:

  • 定义方法时,是methods而不是method

  • {{}}叫做插值表达式

  • 写计数器案例时用到了 flex,发现下面这种换行不是 flex 认可的换行,align-content无效:

<span>{{num}}</br>{{num}}</span>
  • v-bind
    bind,绑定的意思,就是给元素绑定属性。首先,用简写形式:[name]="content"。然后绑定类名属性class时,最简单的写法是,:class="{[name]:isActive}",也就是切换类。
    v-for 有一个性能优化问题。实时绑定的数据,在数据量大的情况下,计算复杂大,所以,vue 在使用了 v-for 的标签里添加了一个 key 属性,并将其用 v-bind 绑定,属性值应该是一个不重复的值,在数据更新时,判断是否时新的 key, 然后渲染。不宜用索引值,因为在数组中间插入时,很多数据的 key 会更新。

  • v-model
    双向绑定表单元素的值。那么常见的表单元素及其值有哪些呢?

你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。

官网文档上的举得例子挺多,感觉这里是比较容易犯错的。

  • <input type=''>

顺便复习一下 input 表单元素。看到以下类型能想起他们作用和浏览器中的样式即可。
text/password/radio/checkbox/button


下面是做视频中的项目时遇到问题的记录

  • 如何将输入框的内容双向绑定?

原以为input需要声明一个值作为输入内容,实际上 v-model 自己就可以将输入值和data中的变量绑定。所以应该先创建data中的变量,然后绑定。

  • 悬浮在 item 时,显示删除符合的 css

原本想的是先用行内样式将删除模块设为display:none。后来发现不起效。原因是行内样式的优先级最高,<style>标签里的 css 会被覆盖。所以把上述代码放到了<style>里,成功。

  • 如何设置主体高度随条目数量增大而增大,并在超过某一限度时设置滚动

直接上代码:

.items {
  max-height: 420px;
  overflow: auto;
}

附上overflow中 scroll 和 auto 属性的区别:

二者都会在内容超出范围时显示滚动条,但在元素没有超出时,auto 会隐藏滚动条,scroll 依旧显示滚动条,但是禁用该滚动条。


一起记录下 vuecli 的入门学习过程。

  • babel:将 es 较新版本的规则编译成较低的,来让浏览器运行

  • npm run serve后,生成的两个地址中,有一个网络地址,可以通过其他在同一局域网下的设备访问

  • package.json中,script下包含了项目的启动方式。除了start外,都要写成npm run ...的形式。

  • 开发环境和生产环境:开发环境包含了很多库,还要.vue后缀文件,不能被浏览器解析。所以,执行 webpack(vuecli 自带)打包,npm run build命令后,变成 html\css\js 的生成环境。

  • .gitignore说明了哪些文件在 git 上传中被忽略

  • .vue文件中的<template>标签下。只能用一个 html 根标签。一个组件就包含了 html\js\css.

  • main.js和 vue 组件里的 js 代码什么关系?
    index.html直接执行的 js 文件只有main.js,而main.js导入了其他组件编写的 js 代码的接口。

  • 组件注册分为全局(很少用)和局部。局部组件三步走:引入+注册+使用。注册完毕后,就可以将整个组件以 html 标签的形式插入到 app.vue 中。

  • style标签里面添加scoped可以令样式只作用于当前组件,是通过为组件标签添加 hash 值属性实现的。

  • slot是什么?用于组件之间的嵌套。在组件 a 标签内部,插入组件 b 标签,并在组件 b 标签中添加 slot 属性及 id。然后在组件 a 内添加<slot>标签,name 属性是 id。即可实现精确的占位。

package.json 里面的 devDependencies 和 dependencies 分别是什么?

配置项命令描述
devDependencies--save-dev 简写 -D开发环境,管理的依赖包仅在开发阶段有效
dependencies--save 简写 -S生产环境,管理的依赖包在项目上线后依然有效