it_ga_la
it_ga_la copied to clipboard
unaheidi
[GitLab] Vue 入门
阿里云大学免费的视频课程
https://edu.aliyun.com/lesson_1728_14175#_14175
Day-01 最大收获 2019/10/16
看了 （vue介绍）1-6 个视频，在一个 html 文件中加入 vue.js 文件，就可以造出一个使用 vue 的例子。讲解了那部分是 VM ，哪部分是 V ，那部分是 M 。
👍 自我得意的地方，耳机找不到了，无声的视频课程，我也看得懂。
Day-02 转到 Vue 官网学习
https://cn.vuejs.org/v2/guide/
第二天看视频课程，发现需要边动手写代码边学习效果才好，但视频课程获取上面的代码过于繁琐。
问了有经验的开发人员，他说他是通过 Vue 官网学习的，效果不错。
于是我也转站官网看文字指南去。
令我颇有感触的是，我属于哪种看了例子方能快速理解文字的人。
比如，data 和 methods 在实际例子中出现过，再看 API 文档的时候，这些概念一下就明白，
而尚未看过实例的 props 等，看文字描述就不知道它在讲什么东西。
Vue 概念和注意点 001
- 1个 Vue 应用 = 1个根 Vue 实例（通过 new Vue 创建的） + 组件树（嵌套的、可复用） 举个例子，一个 todo 应用的组件树可以是这样的：
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。斜体的还没有理解。
-
只有当实例被创建时就已经存在于 data 中的属性才是响应式的
-
实例生命周期钩子
-
生命周期图示 流程图画得很清晰，以后回来体会。
-
mustache模板语法
{{data}}
{{#data}}{{/data}}
{{^data}}{{/data}}
{{.}}
{<partials}}
{{{data}}}
{{!comments}}
- 复合局部模板，没看懂 注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串（基于HTML）的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
指令
- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
- 有些指令带一个参数
- 2.6.0之后，支持动态参数
- 修饰符 如 .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() ，阻止缺省的行为
computed 和 methods 有什么不同？
非常好的一个问题。看到计算属性的时候，我已经问自己这个问题了。
接着往下看，“ 计算属性缓存 vs 方法 ” 里面就有答案。
理解下来，计算属性基于它们的响应式依赖进行缓存。
只在相关响应式依赖发生改变时它们才会重新求值。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
computed 计算属性优于 watch 属性？
- 代码更简洁
什么情况下只能用 watch 属性？
使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
从哪开始，又开始发晕了
一旦只讲原理，没有代码实践，我立马迷糊了。
从 https://cn.vuejs.org/v2/guide/components-props.html 这里开始。
我打算返回视频课学习。