js开发记录

1.position：absolute  可以使div悬浮，用  left/right/top  可以放在具体的位置；

2.w20 width：20px；（快捷键，字母缩写+数字）；

3.引入外部js包 本地和服务器地址要一致且正确；

4.      ../是退出当前目录；

5.函数名/对象名/变量名不要重名；

6.v-if和v-show/区别：if为0时代码不执行，没有该元素及属性；show只是不显示，后台数据存在；

7.用三元表达式设置样式，效果同v-show；

8.vue里，属性前加：可以使属性动态变化，不然只是字符串；

9.vue里，script里使用变量和函数要加this；在html里可以不用；

10.表单传值：表单传值每个元素都要有name属性

let formData = new FormData(document.getElementById("form"));

 

FormData参数可以不写，另外再设置表单key的方法：

 

formData.set('key', value);

 

 

11.JSON.parse()方法可以把形如“[key:{},key2:{}...]”的字符串转成数组;

JSON.stringify()方法可以把数组转字符串;

 

12.array.slice(0,10); 取原数组下标0-10的元素形成新的数组;

array.splice(index,num)方法可以在指定下标的位置删除一个或多个数组元素;

 

13.发送数据后，若要更新显示的数据，可以不用调用更新数据的函数（不用服务器发送数据），直接把新增的元素push到待显示的数组;

 

14.line-height设置为与height相同，可以使文字位于竖直方向上的正中;

 

15.checkbox多选框，可以用一个数组储存每个选项的id，当数组存在某个id时，该id就会显示选中(vue);

 

16.用对象数组储存复杂元素;

 

17.索引类数据更新方法：比如更新发帖数，不用统计表里全部数据，单独建表存放发帖数（表里只有1行数据），每发帖该数据就+1;

不要求实时可以定时更新该数据，减少数据请求

 

18.组件传入/传出参数

在组件里定义要传输的属性（属性不能用大写，大写会被识别成小写，对应不上）

传入props，传出emit

传入的属性可以用this.***来使用

 

传出的属性需在组件定义，该方法被调用则传出参数

在主页面接收传来的参数，括号里就是参数

 

组件在使用时声明参数，传来的参数要定义方法

 

 19.npm常用指令

注：

在npm中，包（package）、模块（module）、依赖（dependency）说的都是一回事儿。

常用命令

• npm init 初始化项目，其实就是创建一个package.json文件。
• npm install 安装所有项目依赖。
• npm help xxx 查看xxx命令的帮助信息。

npm search 搜索（快捷方式：find, s）

• xxx 搜索xxx 如：npm search jquery。

npm install 安装 （快捷方式：i）

• xxx 搜索并安装xxx（局部）。安装多个依赖可用空格分割，如npm i jquery bootstrap。
• xxx -g 搜索并安装xxx（全局）。安装多个同上。
• xxx -D 安装并将依赖信息写在package.json中的devDependencies中。
• 快捷方式 i均可，如npm i jquery。
• xxx@版本号 指定需要安装的版本号，若不指定将安装最新的稳定版本。

npm uninstall 卸载（快捷方式：rm, r）

• xxx 卸载xxx。多个依赖可用空格分割。
• xxx -D 卸载xxx，并将依赖信息从package.json中的devDependencies中清除。

npm list 列出已安装依赖（快捷方式：ls）

• 默认列出局部依赖。
• npm list -g 列出已安装的全局依赖。

npm outdated 检查过期依赖

npm update 更新依赖（快捷方式：up）

• xxx 局部更新xxx。
• xxx -g 全局更新xxx。

npm root 查看依赖安装路径（也就是node_modules的路径）

• 默认查看局部安装路径。
• -g 查看全局安装路径。

npm view 查看模块的注册信息

• xxx versions 列出xxx的所有版本， 如：npm view jquery versions。
• xxx dependencies 列出xxx的所有依赖， 如：npm view gulp dependencies。

 

20.引用组件，style要加scoped保证该样式只在此组件使用，否可能重名

21.组合式vue取dom元素，最好不用document.getelement，取不到（上传图片可以？）。取dom元素：

元素添加ref属性（类似id），在script里定义变量let a=ref（null），取dom元素值要加value，如a.value

另外，如果用v-if控制，元素不显示则无法获取元素。

22.路由可在一个vue文件里控制显示其他页面/组件的内容，配置方法：

调用的地方及传递url参数（/show是从根目录下开始，show是从当前目录开始）

 <RouterLink :to="`/show?id=${item.tieziId}&title=${item.title}`">{{ item.title }}</RouterLink>

在要显示的地方

<RouterView />

 

被调用的文件，使用useRoute（）来获取主文件的路由

const route = useRoute();

用route.query.属性名使用路由传来的参数

 

在route文件夹的index里设置路由路径

 path: '/show',

 name: 'showTiezi',

 component: showTiezi

path是路径，name是具体名称，这两个可以随便

组件就是要使用的组件

23.在td里让图片居中，用：

text-align: center;

vertical-align: middle;

24.input框 outline:none 可以使默认focus蓝色边框消失

25.可编辑div 纯字母不换行 word-break: break-all;

26.js文件引入，若文件没有export/export default，可以直接script引入；

若带有export/export default则需要script的type为module 然后在script里import

27.想让光标悬浮div时改变div样式，可以用css的hover

eg：.tiezi{} .tiezi:hover{}

28.padding是调整div内元素距离本div边框距离，margin是调整本div到父级div边框距离

29.截取字符串某一部分可以用substring(start,stop),s小写，不能用slice(是数组用的)

30.a标签动态设置href :href="[xxx和要拼接的东西]"

31.用background-position: -568px 0px;来确定div背景图片的位置！

32.z-index是一种样式（css）。。。