vue开发-项目开发注意事项

1.关闭vue项目和仓库关联

刚建项目时，
vue create demo -n
-n表示不需要git仓库。
建完项目后，
打开–》文件—》首选项—》设置

2.关闭组件名称是否使用驼峰或多单词命名

vue/multi-word-component-names是用于检测当前的组件名称是否使用驼峰或多单词命名，eslint默认是要求检测，可以手动关闭检测。
修改.eslintrc.js文件的规则如下

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    // parser: '@babel/eslint-parser',
  },
  rules: {
    // 去掉函数()前面的空格
    'space-before-function-paren': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 关闭驼峰命名规则
    'vue/multi-word-component-names': 0,
  },
}

3. vue中的props的用法

props的注意事项
1、props是用与Vue中父组件向子组件传值的时候使用。
2、props的传递是单向的。
3、不要再子组件改变props的值
props单向传递

父组件值会改变子组件的值，子组件的值改变不会影响父组件。

详情看这篇文章https://www.jianshu.com/p/cf14c80189ad

4.Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue的两种解决办法

1.直接在v-for循环后面绑定一个属性，跟前面需要循环的属性一一对应

2.文件–》首选项–》设置–》在搜索框中输入：vetur.validation.template，找到之后将前面的打钩选项去掉即可

5.v-model和:model的区别

（1）v-model通常用于input实现数据的双向绑定，也可以实现父组件到子组件的双向数据绑定。无论是改变父组件还是子组件的输入框，value和msg的值都会改变，两个输入框的值也就改变了。
（2）：model是v-bind的缩写，这种只是将父组件的值传到了子组件上，并没有改变数据的双向绑定。

6.const _this = this是如何解决匿名函数的指向问题的

1、const that = this 其实就是将当前的this对象复制一份 给 that变量中
那是因为在JavaScript中，this代表的是当前对象，他是会随这程序运行不停改变的，在this改变之前先复制一份给that，那么在程序后面的运行中就不会出现找不到原来的对象的情况。
2、关于 const _this = this
当前VUE中的this 是指向实例，相当于父级，指向指不到子级中。所需需要一个变量 _this 存储this得指向。

还有一种方式，不用考虑const _this = this。
将.then( ( ) => { } ) 和.catch( () => { } ) 中的function换成箭头函数， 因为箭头函数中的this是指向当前作用域，所以不需要进行 const _this = this。

7.JSON.parse()用法

json通常用于与服务端交换数据，在接受服务器数据时，一般是字符串。
因此，一般用json.parse()方法将数据转换成为javaScript对象。
语法：JSON.parse(text,reviver)
参数用法：text必需，一个有效的JSON字符串；reviver：可选,一个转换结果的函数，将对象的每个成员调佣此函数。
javascript中数组遍历，详情看https://zhuanlan.zhihu.com/p/148087739

const colors = ['blue', 'green', 'white'];

for (const color of colors) {
  console.log(color);
}
// 'blue'
// 'green'
// 'white'

8.slot插槽和slot-scope作用域插槽

slot是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。
（1）slot插槽
1.匿名插槽
2.具名插槽
（2）作用域插槽
实际上是带数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里。