14 - Vue项目之路飞前端

项目代码：

链接:https://pan.baidu.com/s/1-49b7SY6OU8cRBxjU9C9IQ  密码:gqbi

课堂笔记

Bootcdn 是一个稳定、快速、免费的前端开源项目 CDN 加速服务，网址：https://www.bootcdn.cn/vue/


注意事项：
1，v-for指令时候的时候【要绑定一个:key】 用来绑定数据中的id或者列表中的index【官方建议的操作】
2，{{ }}插值语法中可以使用三元运算符，但是不能使用if else  
3，Compute和Watch的区别
Computed可以监听多个属性，
Watch 只可以监听单个属性
4，Npm下载的包，直接写包名进行import，不需要加 ./  这种相对路径，自己创建的包才需要加./ ，
5，@用来获取当前文件夹的绝对路径到src下，即src的绝对路劲，导入的时候后缀名，如vue，json，js等后缀名可以不写
6，当然import 之前，这个模块必须在对应的文件要有export defalut  
7，在Vue中所有资源css,js，vue文件等都可以看做是一个模块
8，Vue中组件的名字一定要大写！！！
9，组件的style标签中的scope属性表示当前的样式只对当前的组件有效
10，<APP/> 单闭合和双闭合效果一样
11，globla 下的index，清除默认样式
12，不要在vue中用原生的bootstrap，可以用vue-bootsrap
13，前端qs模块，将对象序列化


Element UI
1，element UI中表格中的Ref可以用来获取当前组件实例
2，element UI的button组件中使用click事件的时候要添加两个参数如：click.native.prevent，解释如下：
native：出发原生事件，不加native可能不会触发组件的click事件
prevent：阻止当前默认事件


Es6语法，针对 [] 对象
1，shift 删除
2，unshift 往前添加
3，push往后添加
4，promise语法，.then .catch，
5，使用箭头函数，才可以使用this？
6，parseInt 字符串转整形
7，forEach循环
8，data中的数值默认值可以写为null，这个可以用来做判断



Vue-cli文件夹目录介绍
1，Build 和 config 是webpack的文件夹，无需理会
2，node_modules 包文件夹，不要删除，上线的时候不会上线这个目录（因为这个体积较大）
3，Static 前端静态文件
4，.babelrc 支持es6的文件
5，.ingore 上传忽略的文件
6，Index.html 整个项目的首页文件
7，packae-json 项目的包依赖文件
8，src/main.js 项目的入口文件【所有开发都在src目录下】


关于Vuex
1，Vuex 好比前端的本地数据库，所有的组件都使用这个数据库
2，dispatch触发action中的方法，action中的方法触发mutation中的方法


vue-router相关
1，import导入router的时候，默认加载router下的index.js
2，声明式路由 和 编程时路由 $roiuter.push{}方法
3，router.beforeEach 路由全局守卫，即路由拦截器，防止入口中，一定要调用next


window相关属性
浏览器的local storge 和cookie类似，有getItem和setItem方法，removeItem（删除单个），clear(全部删除)
windown.location.href  中的windows可以不写



Vue全家桶包含：vue + vue-router + vuex + axios

搜索Vue高星项目：https://vue-js.com/topic/5b9699fccd6b2d5e4fd9e53e

单页面应用介绍
单页面应用的特点是，路由在前端做，防止资源过多，加载失败导致白屏。

其他
geetest 滑动验证