Vue2.0开发笔记(实时更新)

  1. index.html添加meta name="viewport"标签,是移动端基本的一个设置,手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中,也不会破坏没有针对手机浏览器优化的网页的布局,用户可以通过平移和缩放来看网页的不同部分。
  2. 依赖项"bable-runtime"es的语法进行转义,"fastclick"解决移动端点击按钮300毫秒延迟的问题,"babel-polyfill"es6API进行转义
  3. fastclick.attach(document.body)就是让body下所有的按钮的点击都没有延时
  4. 别名的配制
  5. router-link tag="div"这个tag的意思是把和这个连接渲染成div,默认本来是a
  6. Jsonp解决跨域问题,他发送的不是ajax请求,他是动态创建了一个 <script>这个标签不受同源策略的限制
  7. 对象的遍历用for in
  8. 在一个文件或模块中,export、import可以有多个,export default仅有一个
  9. 通过export方式导出,在导入时要加{ },export default则不需要
  10. 浏览器的17毫秒的刷新率,数据变化到dom变化需要事件
  11. ref如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。
  12. 通过 Prop 向子组件传递数据
  13. 为什么要用slot?既然你用了子组件,你为什么要给她传一些dom,直接去定义复用的子组件不就好了。后来想想觉得一个复用的组件在不同的地方只有些许变化,如果去重写子组件是很不明智的一件事,当然也可以将不同之处都写在子组件里,然后通过父组件传来的标识进行选择显示。其实质是对子组件的扩展,通过slot插槽向组件内部指定位置传递内容,即将\<slot>\</slot>元素作为承载分发内容的出口;
  14. better-scroll配制
  15. 初始化better-scroll的时候它会拷贝开头一份放在结尾,结尾一份放在开头
  16. :class {} true的时候实现样式
  17. 组件里面有计时器这种资源的时候,在组件销毁的时候要对计时器进行清理,有利于内存的释放
  18. 请求头host refer限制访问权限,可以通过后端代理来解决修改请求头
  19. 加冒号的,说明后面的是一个变量或者表达式,没加冒号的后面就是对应的字符串字面量
  20. npx eslint --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .显示错误格式的文件(ESLINT)
  21. npx eslint --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore . --fix整个项目更正
  22. vscode的自身语法检查有问题,一般都把 "javascript.validate.enable": false禁用默认的 js 验证,所以采用了ESlint.
  23. window.reload是重新加载当前需要的所有内容,也就包括页面和后台的代码,此过程中实际上是从后台重新进行操作;window.Refresh是刷新,保留之前的缓存内容,重新加载页面,之前存在的东西不会动,没加载上来的东西继续加载,也会去加载后台代码内容的
  24. box-sizing: border-box;整个盒子除了margin的大小就是设置长宽的大小,content,border,padding嵌入里面
  25. jusify-content: center;实现水平居中 align-items: center; 实现垂直居中
  26. created:html加载完成之前,执行。执行顺序:父组件-子组件,mounted:html加载完成后执行。执行顺序:子组件-父组件
  27. @load 图片有值的时候就加载 onload事件是在src的资源加载完毕的时候,才会触发
  28. 内用$来将连接字符串
  29. v-if 呢如果条件为false,那么在生成的HTML语句中,条件为false的标签不会生成在代码中.v-show呢如果条件为false,运行后,还是生成了条件为false所在的标签,但是只是让其display属性为none,即该标签不进行显示
  30. 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的
  31. 使用 data-* 属性来嵌入自定义数据
  32. ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素.ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法() 就可以使用了。
  33. $emit 点此进
  34. 字符&指向父选择器
  35. watch question: function (newQuestion, oldQuestion) {}
  36. 基础组件没业务逻辑(按钮点击的话就派发)
  37. 解决路由复杂数据传递(vuex)或者很多的组件共享数据
  38. payload 点此进
  39. import * as会将若干export导出的内容组合成一个对象返回
  40. es6解构赋值 let {musicData} = item相当于let musicData = item.musicData
  41. :bg-image="bgImage"
  42. css在vue中自动prefix,js的话要自己实现,利用浏览器能力检测
  43. getters.js中也能写计算属性
  44. click.stop阻止冒泡,适用于父元素的点击事件
  45. 标志位解决点击速度过快audio异步出错的问题
  46. 在移动端上点击屏幕时,会依次触发touchstart,touchmove,touchend,click事件。可以通过preventDefault来解决事件的默认行为
  47. SVG有空在看下 viewbox width height r cx cy
  48. Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值
  49. !important 可以覆盖style的值
  50. computed和methods我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
0%