# vue-firebase-study

**Repository Path**: falcon/vue-firebase-study

## Basic Information

- **Project Name**: vue-firebase-study
- **Description**: 我学习vue和firebase的笔记和练习代码
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-22
- **Last Updated**: 2021-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#学习Vue 和 Firebase

## 🛠️ 资源
[Vue.js 官网中文文档 (v2)](https://cn.vuejs.org/v2)
[Vue-cli github](https://github.com/vuejs/vue-cli)
[Vue-cli (Vue.js 开发的标准工具) ](https://cli.vuejs.org/zh/)

## Day 1 

 - Vue.js的引入
 - 数据绑定 
 - 在模板使用函数
 - 在模板中绑定属性`v-bind` ，可以使用 `:` 简写
 - 在模板中绑定事件 `v-on` ,使用`@`简写，如 `@click="methodName"`
 - 使用 `v-model` (未深入)
 - 使用 修饰器 键盘/事件 修饰器，(未深入)
 - 模板基本语法，条件，循环（未深入） 
   

## Day 2

因为版本更新，这块跟视频的差别很大,当前使用 版本 `vue --version`
> @vue/cli 4.3.1 

- `vue-cli` 安装:
    ```
    npm install -g @vue/cli
    ```
    快速原型开发 `vue serve` ,默认入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个
    

- 创建一个项目
    ```
    vue create yourProject
    ```
    运行
    ```
    cd yourProjectPath
    npm run serve
    # 相当于
    node_modules/.bin/vue-cli-service serve
    ```
    查错
    ```
    npm run lint
    ``` 
    以上命令注册在项目的 `package.json`的`scripts`项中   
   创建项目时可以设定配置，加入相应的组件

- 保存预设配置

- 安装plugins
    如安装 `vue-plugin-vuetify` 对应到 `package.json`的 `devDependencies`项目
    ```
    vue add vuetify       
    ```
## Day3

- 构建web component
    
  用法
  ```
  vue build  -h 
  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component mode (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information
  ```
  
  如将`online.vue`构建为`online-status`的 `web component`
  ```
  vue build online.vue --target wc --name online-status    
  ```
- 使用 `web component`
    如使用之前构建的 `online-status`
    ```
    <meta charset="utf-8">
    <title>online-status demo</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="./online-status.js"></script>
    ...
    <online-status status="online"></online-status>
    ...

    ```

- `vue ui` 图形化工具
    `vue-cli 的 web图形化 界面`
   <img src="images/Snip20200523_12.png" width="300">


## day4 -> day5
    - ES6
    - async 

    - promise 
    
    - await


## day6
2020.07.24

- 不必记住vue的`npm run`命令，因为项目的`package.json`文件可以找到这些命令

``` javascript
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
```

- 运行开发服务器时出错 `npm run serve`

```
> vue-tobe@0.1.0 serve /Users/falcon/projects/js/vue-firebase/day6/vue-tube
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  Error: No valid exports main found for '/Users/falcon/projects/js/vue-firebase/day6/vue-tube/node_modules/colorette'
Error: No valid exports main found for '/Users/falcon/projects/js/vue-firebase/day6/vue-tube/node_modules/colorette'
```
 
解决方法有两个：

    1. `npm i colorette@1.2.0`  # 必须带版本号才管用 

    2. 升级 `node.js` 
        `homebrew`安装的 `node.js` 有时并不是最新的版本，就算使用homebrew升级也升不到官方最新版本。`N`是node内置的版本管理器，使用`npm install -g n`安装，然后执行 `sudo n latest` 可升到最新版本。


## day 7
2020.07.30

安装nvm ，node版本管理工具。 [项目用法和文档](https://github.com/nvm-sh/nvm)

```
brew install nvm
```

### 常用的指令

- 查看版本
```
nvm ls-remote #远程所有node版本
```

```
nvm ls #本地所有安装的node版本
```

- 安装

``` 
nvm install 版本 #如果版本写node，会安装最新版本的node并自动切换，如果填写lts，会安装lts版本，如果填写具体版本号，会安装指定版本
```
- 设置默认版本

```
nvm alias default node #使用最新版本
nvm alias default 'lts/*' #使用 `lts/*` 版本
nvm alias default 12.18.3 #使用 `12.18.3`版本

```

- 切换当前使用的node版本 

```
nvm use #会使用~/.nvmrc 指定的 node 版本
``` 

```
nvm use 12.18.3  #使用12.18.3版本
```

```
nvm use node/stable/unstable #切换最新版本/稳定版本/lts
```


- 删除node版本
```
nvm uninstall 8 #删除8.x版本
```

```
nvm uninstall unstable #删除unstable版本
```

*ps: 使用nvm管理node版本后，全局安装模块时不需要用`sudo`*


## day8
2020.08.08

vue文档学习

- Vue 实例还暴露了一些有用的实例属性与方法。
它们都有前缀 `$` 如:


```js
var vm = new Vue(
    el:'#app',
    data:{
        name:"falcon"
    }
)
console.log('实例属性')
console.log(vm.$el)
console.log(vm.$data)
console.log (vm.$el === document.getElementById('app')) // => true


// 这个回调将在 `vm.wage` 改变后调用

vm.$watch('wage', function(newVal, oldVal) {
  console.log(this, `wage change from ${oldVal} to ${newVal}`)
  }
);

```

- 不要在生命周期或实例方法里使用箭头函数，

如：
``` js
created: () => console.log(this.a)
vm.$watch('wage', (newVal, oldVal) => console.log(this,`wage change from ${oldVal} to ${newVal}`)) //这个this会向上查找不是vue实例，而是window
```
因为箭头函数并没有 `this`，`this` 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误


不改变值
```js
<span v-once>这个值不会改变:  wage: {{wage}}</span>
```

输出原始html
```js
<span v-html="rawHtml"></span>
```

动态绑定属性/事件
>好像这个动态绑定的属性和事件名不能用驼峰写法？会自动转化成小写的data属性
```html
<a v-bind:[attr]="url"> 动态绑定属性 </a>
<a v-on:[eventname]="doSomething"> 动态绑定事件 </a>
```          

- 计算属性

```js
computed: { //计算属性

    reversedName: function () {
      return this.name.split('').reverse().join('')  
    }

  },
```


>计算属性是基于它们的响应式依赖进行 *缓存* 的,只有相关的响应式依赖发生变化时才会重新计算。
>相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。



- 侦听属性

```js
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
  ```
> 尽量使用计算属性而不是命令式的 `watch` 回调


- 计算属性的 setter

运行 `vm.label2 = "test" `时，`setter` 会被调用 
```js
computed:{
    label2: {

        get() { //getter
        return this.name + this.age + '@' + Date.now()
        },
        set() { //setter
        console.log('Changed @' + Date.now())
        this.name += ' hack';
        
        }
    }
}

```

- 侦听器

```js
watch: {
    ...
}
```

vue项目的bin目录位于 `node_modules/.bin/`
运行`npm run serve` 相当于 `node_modules/.bin/vue-cli-service serve`


[vue.js为什么在component的template的root标签中不能使用v-for？](https://segmentfault.com/q/1010000007411018)

如果后续安装 `vue-router`插件，`App.vue` 会被覆盖


- 使用 `Netlify` 免费部署
 
参考视频: [Deploy Websites In Seconds With Netlify](https://www.youtube.com/watch?v=bjVUqvcCnxM)

部署了github  page：<https://amazing-goldstine-c1bf0b.netlify.app/>


## day9
2020.08.10

- 向组件中增加class
  当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
  如:

`组件Header.vue:`

  ```js
  
  <template>
    <h1 class="header">header</h1>
    ...
  </template>
  
  ```

`引入Header的组件`
```js
import Header from '../components/Header.vue'

<template>
<div id="app">
  <Header class="custom-header">
  ...
</div>
</tempate>
```

最后会被渲染为：

```html
<h1 class="header custom-header">header</h1>
```

- 绑定内联样式
`v-bind:style` 的对象语法十分直观——看着非常像 CSS，但其实是一个 `JavaScript 对象`。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

```html
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```

```js
data: {
  activeColor: 'red',
  fontSize: 30
}
```

- 用 key 管理可复用的元素

```html
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>
```
如果不设置key时，`loginType` 变化时，input 内的输入值会保留，仅placeholer会被替换

- 不推荐同时使用 v-if 和 v-for

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

- v-for 列表渲染

语法：

```js
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
```

支持第二个参数：索引

```js
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  ```

 - v-for 对象渲染

语法：

```js
  <li v-for="value in object">
    {{ value }}
  </li>
```

第二个参数name表示对象属性名

```js
 <div v-for="(value, name) in object">
  {{ name }}: {{ value }}
 </div>
 ```

第三个参数index表示索引

```js
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
```

- 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：
```html
<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>
```

```js
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}
```

- 2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

```js
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>
```

- 这里的 is="todo-item" attribute。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。
```js
 <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
```

- 在内联语句处理器中访问原始的 DOM 事件。
 
  可以用特殊变量 `$event` 把它传入方法：
  ```html
  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
  </button>
  ```
  
 - 访问原生事件对象

  ```js
  methods: {
    warn: function (message, event) {
      // 现在我们可以访问原生事件对象
      if (event) {
        event.preventDefault()
      }
      alert(message)
      }
  }
  ```

 - 事件修饰符

 ```html
  <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="doThis"></a>

  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>

  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>

  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>

  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>

  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>
  <!-- 点击事件将只会触发一次 -->
  <a v-on:click.once="doThis"></a>
```
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

 - 按键修饰符

 ```html
 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
 <input v-on:keyup.enter="submit">
```

任意有效按键名转换为 kebab-case 来作为修饰符。如: `page-down`
```html
 <input v-on:keyup.page-down="onPageDown">
```

- 系统修饰键

>在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

```html
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
```

- v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。

`v-model` 在内部为不同的输入元素使用不同的 `property` 并抛出不同的事件：

  * text 和 textarea 元素使用 value property 和 input 事件；
  * checkbox 和 radio 使用 checked property 和 change 事件；
  * select 字段将 value 作为 property 并将 change 作为事件。

- 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 `v-model` 来代替。
 ```html
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
 ```

 - 多个复选框，绑定到同一个数组：

```html
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
```

```js
new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})
```

## day10

2020.08.11

```
checkName是一个数组 ，值为input里的value

- 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像下面这样提供一个值为空的禁用选项。

```html
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
```

- option 用 v-for 渲染的动态选项：
```html
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
```

```js
new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
```

-  使用动态 property 

有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

  * 单选按钮

  ```html
  <input type="radio" v-model="pick" v-bind:value="a">
  ```

  选中时 `vm.pick == vm.a`

  * 复选框

  ```html
  <input
    type="checkbox"
    v-model="toggle"
    true-value="yes"
    false-value="no"
  >

  ```

  > 这里的 true-value 和 false-value attribute 并不会影响输入控件的 value attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。

  * 选择框的选项

  ```html
  <select v-model="selected">
    <!-- 内联对象字面量 -->
    <option v-bind:value="{ number: 123 }">123</option>
  </select>
  ```
  
  ```js
    // 当选中时
  typeof vm.selected // => 'object'
  vm.selected.number // => 123
  ```

- 修饰符

  * `lazy`

  ```html
  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg">
  ```

  * `number`

  ```html
  <!--自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：-->
  <input v-model.number="age" type="number">
  ```

  * `trim`

  ```html
  <!--自动过滤用户输入的首尾空白字符-->
  <input v-model.trim="msg">
  ```

- 在组件上使用  `v-model`

创建一个`custom-input`组件，注意其中的

```js
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
```

现在 v-model 就应该可以在这个组件上完美地工作起来了：

```html
<custom-input v-model="searchText"></custom-input>
```

- 通过插槽分发内容

创建一个自定义一个插槽组件，注意 `<slot>`元素

```js
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
```
用法：
```html
<alert-box>
  Something bad happened.
</alert-box>
```
> <slot> 处会被插入的文字替换


- 动态组件 (@todo)

```html
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>
```
参考代码：<https://hi.cellmean.com/p/a11cde485cc1>

- 解析dom模板时特殊元素和限制

> 有些 HTML 元素，诸如 `<ul>`、`<ol>`、`<table>` 和 `<select>`，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 `<li>`、`<tr>` 和 `<option>`，只能出现在其它某些特定的元素内部。

不能这样写，因为要能出现在 `table` 元素下的元素有限制 

``` html
<table>
  <blog-post-row></blog-post-row>
</table>
```

可以使用 `is` 替换

```html
<table>
  <tr is="blog-post-row"></tr>
</table>
```

> 需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

  - `字符串 (例如：template: '...')`

  - `单文件组件 (.vue)`

  - `<script type="text/x-template">`


- 组件名大小写

支持 kebab-case 和 PascalCase命名方式

> 注意：直接在 DOM (即非字符串的模板) 中使用时只有 `kebab-case` 是有效的。

- 组件注册

  * 全局注册，在任何新创建的 Vue 根实例 (new Vue) 及子组件中都可以使用

  ```js
  Vue.component('my-component-name', {
  // ... 选项 ...
  })
  ```

  * 局部注册

  ```js
  var ComponentA = { /* ... */ }
  ```

  实例或子组件使用时需要添加 `components` 属性

  ```js
  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
  ```

  * 模块系统中局部注册
 
  ```js
  import ComponentA from './ComponentA'
  import ComponentC from './ComponentC'

  export default {
    components: {
      ComponentA,
      ComponentC
    },
    // ...
  }
  ```

  * 基础组件的自动化全局注册 (@todo)

  >  需要 webpack (或在内部使用了 webpack 的 Vue CLI 3+) 支持


- Prop 的大小写 (camelCase vs kebab-case)

如果在prop中使用 camelCase 

``` 
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
```

在HTML中必须改成kebab-case ，
```
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
```

> 如果你使用字符串模板，那么这个限制就不存在了。

- prop类型

可以使用`对象形式`的写法指定名称和类型

``` js
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise // or any other constructor
  }
```

- 传递静态或动态 Prop

 静态：

作为字符串传入
```html
<blog-post title="My journey with Vue"></blog-post>
```

注意：这里的Prop `posTitle`,在html页使用时会转成 `post-title`, 除非在 `字符串模板` 使用才没有这种限制。

``` js

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<blog-post post-title="hello!"></blog-post>
```
> Vue的字符串模板指的是在Vue实例中的template属性所对应的字符串


动态：

``` html

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
```

- 传入一个数字

 ``` html
  <!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
  <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
  <blog-post v-bind:likes="42"></blog-post>
```

- 传入一个布尔值

``` html
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
```

- 传入一个对象的 所有 property

可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

``` html
<blog-post v-bind="post"></blog-post>
```

等价于

```
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>
```

- 单向数据流

> 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

> 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

> 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

- Prop 验证

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

``` js
Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})
```
> 注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

>当验证失败时，(开发环境构建版本的) Vue 将会产生一个控制台的警告。


- 非 Prop 的 Attribute

如父级这样调用组件:

``` html
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
```
这里的 `data-date-picker`属性不是一个prop，而是attribute时，这样写之后这个属性会添加到`组件的根元素`上。

- 替换/合并已有的 Attribute

> 对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：

- 禁用 Attribute 继承

> 如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 `inheritAttrs: false`。

> 注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。


- $attrs property  与 `inheritAttrs`

> 该 property 包含了传递给一个组件的 attribute 名和 attribute 值，例如：

```js
{
  required: true,
  placeholder: 'Enter your username'
}
```

配合 `inheritAttrs: false` 使用

``` html
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})
```
调用 ：

``` html
<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>
```

> 这个模式允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素：


## Day 11
2020.08.15

- 自定义组件的 v-model

```js
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
```

用法：

```html
<base-checkbox v-model="lovingVue"></base-checkbox>
```

- 将原生事件绑定到组件
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符

```html
<base-input v-on:focus.native="onFocus"></base-input>
```
vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：
```js
{
  focus: function (event) { /* ... */ }
  input: function (value) { /* ... */ },
}
```
有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

- .sync 修饰符

我们推荐以 `update:myPropName` 的模式触发事件

子组件触发事件 ：
```js
this.$emit('update:title', newTitle)
```

父组件监听事件并触发更新

```js
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
```

这种模式可以简写成
```html
<text-document v-bind:title.sync="doc.title"></text-document>
```

> 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑

下面这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
```html
<text-document v-bind.sync="doc"></text-document>
```

> 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑


- 插槽编译作用域

```html
<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}  
</navigation-link>
```

如果url是插槽内部 `<navigation-link>` 的属性变量，外面是访问不到的，这里会显示 `undefined`

- 插槽后备内容

如在一个 `submit-button`的组件中

```html
<button type="submit">
  <slot>Submit</slot>
</button>
```

调用时不带内容

```html
<submit-button></submit-button>
```

渲染结果：

```html
<button type="submit">
  Submit
</button>
```
- 具名插槽

`<slot>` 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

```html
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
```
一个不带 name 的 `<slot>` 出口会带有隐含的名字 “`default`”。

> 在向具名插槽提供内容的时候，我们可以在一个 `<template>` 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

```html
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
```

最终渲染为：

```html
<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>
```

> 注意 v-slot 只能添加在 `<template>` 上


### 在动态组件上使用 keep-alive

动态切换组件时
如：
``` html
<component v-bind:is="currentTabComponent"></component>
```
重新切换到原来的组件，会重新创建组件，原来组件的状态会丢失，可以使用 `<keep-alive>`标签缓存原来组件

``` html
<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
```

[演示代码（多标签切换恢复时保持原组件状态）](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-keep-alive-with-dynamic-components?file=/index.html)

- 异步组件

Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：

```js
Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})
```

- 异步加载组件

一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用，参考使用了 vuex 插件的 路由加载 About 的方式
这段特殊注释不是多余的 : `/* webpackChunkName: "about" */  `
```js
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
```

- 异步加载时处理加载状态

这里的异步组件工厂函数也可以返回一个如下格式的对象：

```js 
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})
```

## day12
2020.08.18

- 访问根实例

子组件可以通过`$root` 属性访问根实例

```js
// 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar

// 调用根组件的方法
this.$root.baz()
```

> 在绝大多数情况下，推荐使用 [Vuex](https://github.com/vuejs/vuex) 来管理应用的状态。


## day13
2020.08.20

- 访问父级组件实例

[一个google地图的例子](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-accessing-parent-component-instance?file=/index.html)

- 访问子组件实例或子元素

如果需要在javascript直接访问子组件时，可以在使用子组件时加入 `ref` 属性，如：

`<base-input ref="usernameInput"></base-input>`

可以使用 `this.$refs.usernameInput` 来访问这个 `<base-input>` 实例

- 依赖注入

在父级元素中提供 `provide` ：

```js
provide: function () {
  return {
    getMap: this.getMap
  }
}
```

在子元素实例使用 `inject` 接收指定的我们想要添加在这个实例上的 property：

```js
inject: ['getMap']
```

[依赖注入的google map实例](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dependency-injection)

> 依赖注入所提供的 property 是非响应式的，你想要共享的这个 property 是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。

- 程序化的事件侦听器 (@todo)

 * 通过 $on(eventName, eventHandler) 侦听一个事件
 * 通过 $once(eventName, eventHandler) 一次性侦听一个事件
 * 通过 $off(eventName, eventHandler) 停止侦听一个事件

[日期选择器实例](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners)


- 递归组件

>组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：

```js
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
```
类似上述的组件将会导致“`max stack size exceeded`”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。


- 组件之间的循环引用

我们先把两个组件称为 A 和 B。模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题，我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。”

`<tree-folder>` 组件设为了那个点。我们知道那个产生悖论的子组件是 `<tree-folder-contents>` 组件，所以我们会等到生命周期钩子 `beforeCreate` 时去注册它：

```js
beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
```

或者 `webpack` 异步 `import`

```js
components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}
```

- 内联模板

`inline-template` 属性，内联模板需要定义在 Vue 所属的 DOM 元素内。

```js
<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
  </div>
</my-component>
```

- X-Template

`x-template` 需要定义在 Vue 所属的 DOM 元素外。

```js
<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

```

- 通过 v-once 创建低开销的静态组件

有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来

```js
Vue.component('terms-of-service', {
  template: `
    <div v-once>
      <h1>Terms of Service</h1>
      ... a lot of static content ...
    </div>
  `
})
```

### 过渡 & 动画(@todo)

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js



### vue router

[官方文档](https://router.vuejs.org/zh/)

[免费课程](https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs)

## day15
2020.08.25

[一个 materialize UI类库](https://materializecss.com/)

[Firebase](https://firebase.google.com/)

当前建立的firebase项目为 `udemy-ninja-smoothies`


`firebase api信息`

```js
 // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyAY6uN7BCWS4licC7Yeyn_i9qE6Ceji-rs",
    authDomain: "udemy-ninja-smoothies-fab0d.firebaseapp.com",
    databaseURL: "https://udemy-ninja-smoothies-fab0d.firebaseio.com",
    projectId: "udemy-ninja-smoothies-fab0d",
    storageBucket: "udemy-ninja-smoothies-fab0d.appspot.com",
    messagingSenderId: "968931780652",
    appId: "1:968931780652:web:6678a7f3690b7d6330c989",
    measurementId: "G-K0S8B25CWF"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  ```

[vue 整合firebase /firestore](https://www.positronx.io/vue-firebase-tutorial-integrate-cloud-firestore-with-vuefire/)


## day16
2020.08.27

### [使用预处理器](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass)

### [部署到firebase](https://console.firebase.google.com/project/udemy-ninja-smoothies-fab0d/hosting)


- 安装 Firebase CLI

```
npm install -g firebase-tools
```

- 初始化您的项目

请打开终端窗口，转到 Web 应用的根目录，或为 Web 应用创建根目录

登录 Google

```
firebase login
```

启动项目
从该应用的根目录中运行此命令：

```
firebase init
```

- `npm run build`

- 部署到 Firebase 托管

```
firebase deploy
```

Project Console: <https://console.firebase.google.com/project/udemy-ninja-smoothies-fab0d/overview>

Hosting URL: <https://udemy-ninja-smoothies-fab0d.web.app>

## day17
2020.08.29-2020.08.30

[Firebase两种类型数据库比较](https://firebase.google.com/docs/database/rtdb-vs-firestore)

[js时间日期处理库](https://momentjs.com/)

[vue-chat-scroll插件](https://www.npmjs.com/package/vue-chat-scroll)

新内容添加时自动滚动到元素最底端,如聊天记录,用法

```js
import Vue from 'vue'
 
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)
```

## day18
2020.08.31

[Firebase控制台](https://console.firebase.google.com/)

[google apis console（包括google map) ](https://console.developers.google.com/apis/dashboard)


创建 google map API密钥

- 打开[google apis console](https://console.developers.google.com/apis/dashboard),导航处选择对应的项目。
- 点击 ` ENABLE APIS AND SERVICES `按钮，搜索或点击 `Maps JavaScript API`的方块，在出现的按钮点击启用
- 启用后会跳转到报表页，这时点击页眉的抽屉导航，在菜单中 选择`API与服务 > 凭据`  ，在出现的右上方标签位置点 `+创建凭据` ,选择`API密钥`

弹出图层：
```js
在您的应用中使用此密钥的方法是：用 key=API_KEY 参数传递此密钥。

AIzaSyBSaj2YcxYDzAnGV_OomO5CCMkj9-HRC1k
您的 API 密钥
```

引入：
```html
<script defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```

相关用法和文档
https://cloud.google.com/maps-platform


### 粘贴上传文件

[原理及简单示例](https://mobiarch.wordpress.com/2013/09/25/upload-image-by-copy-and-paste/)

[应用在vue,请忽略作者的中式英语](https://www.jianshu.com/p/3139227b8b4f)

[text-field-edit](https://github.com/fregante/text-field-edit)

- it doesn't break the undo history (in supported browsers)
- it fires an input event (with event.inputType === 'insertText')
- it's the most efficient way of adding/replacing selected text in a field
- it's cross-browser (modern browsers)


[fineuploader](https://docs.fineuploader.com/) 

很遗憾，作者不再维护了。

[uppy文件上传](https://github.com/transloadit/uppy)

可替代 `fineuploader`