Vue笔记

node.js和JDK: node.js是基于v8引擎的,即所有node.js文件可以通过v8引擎把js文件编译成让操作系统可以识别的代码和数据.它是在安装node.js时就内置在操作系统上,而与浏览器无关 安装JDK的目的:因为底层的操作系统没有提供运行java应用程序的环境.即在操作系统之上装jvm,java代码可以通过jvm编译成让操作系统可以直接运行和识别代码 --save保存到配置文件里面去 -dev保存到开发环境里面去

• axios接口调用: 拉去数据一般用get 推送数据一般用post 删除数据一般用post/delete 更新数据一般用push

• 对象作用域: 全局对象data:{} 局部对象data(){}

• 子传父 点击事件: 子组件通过@click="$emit('事件名')" 父组件通过 @事件名="方法" 或者说子组件通过$emit调用父组件的事件

• importe和requied: import 是预编译加载,即编译时import文件就会被加载进来,写入内存中 require是从上到下执行时才加载

@click:默认是传函数 但是如果只有单一表达式or一个变量控制时,也可以用表达式,更为简单

Actions:异步操作/复杂或批量的同步操作 Mutation:同步的对Starte修改 State:公用数据存储处

• Vuex: 专门为vue.js应用程序开发的状态管理模式(或者说是状态管理框架) ,通俗点讲就是vuex为vue.js打造的状态机,帮助vue.js使用者管理状态. 具体解决问题:帮助前端做组件之间的数据传输/数据共享(在兄弟组件、没有任何关系组件之间,做数据存储共享) 三个行为(特点): 在组件里面以一个按钮的点击事件,通过dispatch派发用户的点击行为action,action会提交commit到mutation,mutation会自动提交到state状态里面去.从而状态会重新重新渲染视图. mapActions:变量方法太多时,使用该方法进行替代 ps:当数据有延迟时,获取状态是没有用的,因为页面已经获取完数据了.此时要用computed计算属性 vue的双向绑定: 只是停留在表单视图之间的双向绑定,但是组件之间是单向流通的,react也是单向流通的 数据共享:cookie/ 图片懒加载:为了解决带宽的问题,解决首屏加载速度问题

computed计算属性: 内置缓存 依赖的属性改变,计算属性会重新计算一次 侦听器(具备缓存机制,但是语法复杂): watch:{语句}

插槽（像是往子组件里面插入了内容）:子组件使用slot展示父组件传入的内容(使用模板字符串``) Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）
并且可以作为承载分发内容的出口

vue: mounted是函数 methods是project

路由跳转是$router.push 参数是route router是路由 this.$route.params.id;//获取id this.$router.push(`/detail/${id}`); //跳转到商品详情页面

CSS:

• 防止样式串用 每个页面都有一个主的class,防止各页面组件之间的class串用

中的scoped虽然可以防止页面串用,但是会生成很多无用的标签和属性,来达到只有这个页面复用的目的,这样子页面会比较"重" 不好!!1 - [ ] 定义行高是为了让文字垂直方向居中 **box-shadow 属性值由 6 部分组成。** 语法形式： **box-shadow: offset-x offset-y blur spread color position;** blur 值越大，边角越不锋利，阴影越朦胧。 这里的 position 可以写在最前面。也可以像上面一样写在最后面 muted:让音频静音播放 object-fit: cover;//覆盖视频原生组件的阴影(视频内容覆盖整个 窗口) 让弹框水平方向和垂直方向都居中 top: 50%; left: 50%; transform: translate(-50%, -50%);  animation: slideDown(执行样式) .6s(动画时间) linear(匀速); - [ ] clear: both表示“清除浮动”。 1. both会在两侧清理浮动，并将其左边和右侧的浮动元素移除。简单来说，就是谁设定了“clear: both”，哪个元素不能出现在左边和右边。  JS: addEventListener() 方法用于向指定元素添加监听事件。且同一元素目标可重复添加，不会覆盖之前相同事件，配合 removeEventListener() 方法来移除事件。 参数说明：有三个参数 第一个参数event：指事件的类型（如’click’,‘mousedown’）\ 第二个参数function：事件触发后调用的函数\ 第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递 y轴偏移量:window.pageYOffset 滚动调高度: document.body.scrollTop(IE) document.documentElement.scrollTop(谷歌)