2018-09-25工作日报

最新推荐文章于 2024-08-07 12:09:04 发布

原创最新推荐文章于 2024-08-07 12:09:04 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

企业周报专栏收录该内容

18 篇文章

订阅专栏

本文探讨了Vue.js在项目开发中的应用，包括组件树结构、生命周期钩子、指令使用等核心概念，同时介绍了PS切图及HTML网页制作流程，分享了在实际项目中解决具体问题的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上午

1.在官网里学习Vue.js
在这里插入图片描述
想想确实是这样，在具体的项目开发中，不管是什么架构，都可以抽象成组件和组件之间的关系，比如父组件和兄弟组件和子组件。形成了树的关系

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

2.Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

3.比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或
vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this
不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of
undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

4.学习PS里的切图方法，根据PSD登陆页面设计稿切图制作HTML网页全过程

5.指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

6.v-bind 缩写

<a :href="url">...</a>

v-on 缩写

<a @click="doSomething">...</a>

下午

7.单文件组件使用npm安装环境，单文件组件准备自己实现一个简单的todo应用练练手

8.和同事一起解决了JIRA上反馈的几个问题，包括

【海通证券】关注：评论正文页，发表观点者为海博士或者大V，头像无V下标，用户名非金色
【话题专栏】H5：话题/专栏详情页间距过大，与个股评论页保持一致
【海通证券】H5：资讯，关闭网络，进入资讯页面，点击返回按钮，返回失败

并与测试沟通了相关问题，走了一般解决问题的流程，感觉收获挺大的。

9.在解决上述问题的过程中，发现这个项目的Less并不是一个对应一个的，有的公用的Less常常会写到一个Less里。下次找的时候注意。

10.对于requireJS的调用问题还是有点迷茫，不知道如何调用变量，需要继续学习。