vue_js 进阶（vue-cli vue-route 配置流程）

视频出处
视频作者是主后端的，主要学会使用vue框架进行开发，学完以后才知道，有点尴尬，建议换个老师
建议视频
前辈建议视频，我觉得太长了，就没看，等以后遇到问题再看吧
vue_js基础博客
前部分基础差的不多 我就没看 从组件开始看的

随看随记

• then后的function在不需要this的情况下可以用箭头函数代替
  .then(response=>()) 箭头函数语法
• 变量和函数提升
• var和 let 的不同

计算属性 computed

• 计算属性的值是一个属性，不是一个函数，不需要加（），而methods的值是一个函数，调用需要加（）
• 计算属性计算以后是不会改变的，除非在计算属性中的，某些属性被改变了，这时才会被计算
• methods和computeds最大的区别就是methods是实时变化的，可以随时调用，comptued是一个静态属性，在其内内容没有改变之前不会发生变化

组件component L_V_01

• 语法Vue.component(“my-component-name”, {}) V一定要大写，表示创建一个对象
• 在{}中
  • props表示属性，在HTML标签中和href等属性同样效果，在[]中的每个属性都必须加"" 或者 ‘’
  • template表示模板，表示你的组件套用的模板，一般在HTML部分写完拷贝过来，一定要用‘ ’ 来引用起来，在需要回车的地方只用(反斜杠即可)
  • data去API仔细查看一下，感觉不太常用，可能是要返回一些碰撞事件时需要用到。
• 在使用时和使用正常标签一样。
• template中最外面一层的在使用的时候会被组件名替换

插槽 slot L_V_02

• 插槽通过< slot >来使创建的组件存在接口，而且位置了保证前端视图的统一性，往往通过另一个组件去插入到插槽中
• 插槽需要自定义姓名，在视图层中，通过自定义的name来实现这个组件插到哪个插槽里
• 子组件属性传值绑定时名称不能有大写，必须小写 这个很重要
• 因此在使用组件时，使用W3C的标准命名，中间使用-进行连接而不使用驼峰法命名

自定义事件内容分发 $emit L_V_03

其思想是通过中间的视图层将子组件事件和父组件事件连接起来，因为子组件和父组件之间不能之间狗沟通，子组件就像标签里的属性，父标签就像属性的属性值，之间用@进行触发。

• 写法 $emit(‘子组件的函数名’,需要传递的参数)
• 父组件向子组件传递参数用props，子组件需要调用父组件需要使用$emit才能调用。
• 在模板的button中，需要将组件的remove和button进行触发绑定。
• 在父组件中需要有方法，才能使控件中对其进行调用
• 在视图层中需要对remove进行绑定用 @remove=”父组件的调用“
• 同时还需要对key进行绑定:key=“index”

路由的配置

• 配置文件不需要像视频中的这么麻烦再npm install 时就已经配置好了vue-router 在 vue init webpack dirname 时 vue-router选择yes 会把路由的配置文件的模板写好

配置流程 （强行终止cmd ctrl+C）

• 在npm安装时 有可能会失败 会提示使用 npm aduit fix 进行修复 这时输入npm aduit fix修复就可以了
• 先安装node.js 下载地址（除了路径改个除了系统盘路径以外，一直next就可以了）
• 使用node -v 和 npm -v 若都能打印出版本号即安装成功
• 安装淘宝镜像加速器 npm install cnpn -g
• 安装vue-cli npm install vue-cli -g 如果速度过慢，把npm改成cnpm 使用淘宝镜像链接下载
• 判断是否成功 vue list
• 在初始化脚手架 vue init webpack ”dirname“ 如果需要使用 vue-router 则在选择vue-router时间yes 会把路由的配置文件的模板写好 ，后面的全选择no就可以了，
• 通过cd 指令进入指定目录 然后 通过 npm install 来下载node_modules，我在下载完成的时候就有 vue-router 配置文件
• 使用element-ui进行开发 npm i element-ui -S
• 需要安装sass 文件 npm install node-sass sass-loader --save-dev 速度过慢可使用cnpm