# learn-vue

**Repository Path**: fcourage/learn-vue

## Basic Information

- **Project Name**: learn-vue
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-05
- **Last Updated**: 2021-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# learn-vue
## 自己的感悟
* 从信息论的角度来看，vue框架统一三种技术：
    * 存储信息：定义变量
    * 展示信息：HTML模板变量
    * 修改信息：
        * Script中的逻辑运算（函数），交互事件处理
            * @keydown.enter="addTodo"
            * @click="clear"
        * 计算属性：不直接使用变量数据，而是在此变量的基础上有些逻辑运算
            `let all = computed(() => todos.value.length);`
        * CSS定义了一个响应式变量 
            `<style scoped>h1 {  color:v-bind(color);}</style>`
    * 传输信息：
        变量和模板直接Vue框架帮助更新，数据变化驱动页面变化    
        1. 响应式变量
            ```
            import { ref } from "vue";
            let count = ref(1)
            ```
        2. \<input> 中的 v-mode
            ` <input type="text" v-model="title" />`
        3. 通过 defineProps 定义了传递数据的格式，通过 defineEmits 定义了监听的函数，
## [Vue3基础](https://v3.cn.vuejs.org/guide/introduction.html)
### Vue.js 是什么
* Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
* v-bind:将这个元素节点的 title attribute 和当前活跃实例的 message property 保持一致
* v-on: 指令添加一个事件监听器，通过它调用在实例中定义的方法
* v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
* v-if="seen"
* v-for 指令可以绑定数组的数据来渲染一个项目列表
* Vue应用和组件,在一个大型应用中，有必要将整个应用程序划分为多个组件，以使开发更易管理。
    * 在 Vue 中，组件本质上是一个具有预定义选项的实例。
    * 在 Vue 中注册组件很简单：如对 App 对象所做的那样创建一个组件对象，并将其定义在父级组件的 components 选项中：
    ```
    const TodoItem = {
        template: `<li>This is a todo</li>`
    }

    // 创建 Vue 应用
    const app = Vue.createApp({
    components: {
        TodoItem // 注册一个新组件
    },
    ... // 组件的其它 property
    })

    // 挂载 Vue 应用
    app.mount(...)
    ```
### 应用 & 组件实例
* 每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的
* 根组件
    * 传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。
    ```
    const RootComponent = { 
        /* 选项 */ 
        }
    const app = Vue.createApp(RootComponent)
    const vm = app.mount('#app')   
    ```
* 生命周期钩子
    * ![生命周期钩子](https://v3.cn.vuejs.org/images/lifecycle.svg)
### 模板语法
* Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
* 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html 指令
* `<div v-bind:id="dynamicId"></div>`如果绑定的值是 null 或 undefined，那么该 attribute 将不会被包含在渲染的元素上。
    * 提供了完全的 JavaScript 表达式支持
* 指令
    * v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
    `<p v-if="seen">现在你看到我了</p>`
    * 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
        * `<a v-bind:href="url"> ... </a>`
        * 在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
    * 动态参数
        * 在指令参数中使用 JavaScript 表达式，方法是用方括号括起来
        * `<a v-bind:[attributeName]="url"> ... </a>`
        * 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。
* 缩写
    * v-bind 缩写
        ```
        <!-- 完整语法 -->
        <a v-bind:href="url"> ... </a>

        <!-- 缩写 -->
        <a :href="url"> ... </a>

        <!-- 动态参数的缩写 -->
        <a :[key]="url"> ... </a>
        ```
    * v-on 缩写
        ```
        <!-- 完整语法 -->
        <a v-on:click="doSomething"> ... </a>

        <!-- 缩写 -->
        <a @click="doSomething"> ... </a>

        <!-- 动态参数的缩写 -->
        <a @[event]="doSomething"> ... </a>
        ```
### Data Property 和方法
* property
    * 组件的 data 选项是一个函数,返回一个对象，对象的属性可以在模板中使用。
    * data函数返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中
    ```
    const app = Vue.createApp({
    data() {
        return { count: 4 }
    }
    })

    const vm = app.mount('#app')

    console.log(vm.$data.count) // => 4
    console.log(vm.count)       // => 4

    // 修改 vm.count 的值也会更新 $data.count
    vm.count = 5
    console.log(vm.$data.count) // => 5

    // 反之亦然
    vm.$data.count = 6
    console.log(vm.count) // => 6
    ```


### 计算属性和侦听器
* 对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性
    ```
    <div id="computed-basics">
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage }}</span>
    </div>

    Vue.createApp({
    data() {
        return {
        author: {
            name: 'John Doe',
            books: [
            'Vue 2 - Advanced Guide',
            'Vue 3 - Basic Guide',
            'Vue 4 - The Mystery'
            ]
        }
        }
    },
    computed: {
        // 计算属性的 getter
        publishedBooksMessage() {
        // `this` 指向 vm 实例
        return this.author.books.length > 0 ? 'Yes' : 'No'
        }
    }
    }).mount('#computed-basics')
    ```
### Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
* 绑定 HTML Class
    * 我们可以传给 :class (v-bind:class 的简写) 一个对象，以动态地切换 class
    ```
    <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
    ></div>
    ```
* 绑定内联样式
    ```
        <div :style="styleObject"></div>
        data() {
            return {
                styleObject: {
                color: 'red',
                fontSize: '13px'
                }
            }
        }
    ```
### 条件渲染
* v-if 
    * 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
    ```
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    ```
* v-show
    * 另一个用于条件性展示元素的选项是 v-show 指令。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property
### 列表渲染
* 用 v-for 把一个数组映射为一组元素
    * v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
    ```
    <ul id="array-with-index">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>

    Vue.createApp({
        data() {
            return {
            parentMessage: 'Parent',
            items: [{ message: 'Foo' }, { message: 'Bar' }]
            }
        }
    }).mount('#array-with-index')

    ```
* 显示过滤/排序后的结果
    ```
    <li v-for="n in evenNumbers" :key="n">{{ n }}</li>

    data() {
        return {
            numbers: [ 1, 2, 3, 4, 5 ]
        }
    },
    computed: {
        evenNumbers() {
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
    ```
### 事件处理
* 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"
```
<div id="event-with-method">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">Greet</button>
</div>

Vue.createApp({
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    greet(event) {
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}).mount('#event-with-method')
```
* 事件修饰符
```
<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

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

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

<!-- 只有修饰符 -->
<form @submit.prevent></form>

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

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>
```
### 表单输入绑定 
* 基础用法
    * 你可以用 v-model 指令在表单 \<input>、\<textarea> 及 \<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
    ```
    <input v-model="message" placeholder="edit me" />
    <p>Message is: {{ message }}</p>
    ```
* 值绑定
* 修饰符
### 组件基础
* 示例
```
<div id="components-demo">
  <button-counter></button-counter>
</div>

// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})
app.mount('#components-demo')

```
* 通过 Prop 向子组件传递数据
    * Prop 是你可以在组件上注册的一些自定义 attribute。为了给博文组件传递一个标题，我们可以用 props 选项将其包含在该组件可接受的 prop 列表中
    ```
    <div id="blog-post-demo" class="demo">
        <blog-post title="My journey with Vue"></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>
    </div>

    const app = Vue.createApp({})

    app.component('blog-post', {
        props: ['title'],
        template: `<h4>{{ title }}</h4>`
    })

    app.mount('#blog-post-demo')
    ```
## [玩转 Vue 3 全家桶](https://time.geekbang.org/column/intro/100094401?tab=catalog)
### 前端发展史
* 发展史
    1. 浏览器的诞生让我们可以方便地显示文本和图片的内容和样式；JavaScript 的出现让网页动了起来；Gmail 的发布，宣告前端也可以使用 Ajax 异步加载技术，来进行复杂网页的开发，前端工程师这个工种也正式出现了。
    2. 随着浏览器厂商的混战，各个浏览器都有自己的特色，jQuery 框架的出现统一了写法，解决了那个时代最棘手的前端问题：兼容性，极大提高了开发者的效率。
    3. 随着 Angular 1 的诞生，我们多了一套开发模式，就是数据驱动页面。我们甚至不再需要使用 jQuery 去寻找 DOM，而是只关注数据的来源和修改，这也就是现在我们所处的前端时代。我们所熟悉的 Vue、React、Angular 和 Svelte 等框架，都是在**数据驱动页面**这个场景下涌现的框架。
* Vue 与 React 框架的对比通过上面对前端三大框架的介绍，我们不难发现 Vue 和 React 在数据发生变化后，在通知页面更新的方式上有明显的不同，通俗的来说，就是：**在 Vue 框架下，如果数据变了，那框架会主动告诉你修改了哪些数据；而 React 的数据变化后，我们只能通过新老数据的计算 Diff 来得知数据的变化。**
* 响应式数据是主动推送变化，虚拟 DOM 是被动计算数据的 Diff，一个推一个拉，它们看起来是两个方向的技术，但被 Vue 2 很好地融合在一起，采用的方式就是组件级别的划分。
    * 对于 Vue 2 来说，组件之间的变化，可以通过响应式来通知更新。组件内部的数据变化，则通过虚拟 DOM 去更新页面。这样就把响应式的监听器，控制在了组件级别，而虚拟 DOM 的量级，也控制在了组件的大小。
    * 体现了 Vue 一直以来坚持的中庸的设计思想。
### TODO应用入门
* 转变思路
    * 旧:
        1. 先找到输入框，给输入框绑定输入事件；
        2. 输入的同时，我们获取输入的值；
        3. 再找到对应的 html 标签，更新标签的内容。
        ```   
        <div>
            <h2 id="app"></h2>
            <input type="text" id="todo-input">
        </div>
        <script src="jquery.min.js"></script>
        <script>
            // 找到输入框，监听输入
            $('#todo-input').on('input',function(){
                let val = $(this).val() // 获取值
                $('#app').html(val) // 找到标签，修改内容
            })
        </script>
        ```
        * jQuery 时代的开发逻辑，就是我们先要找到目标元素，然后再进行对应的修改。
    * 新：
        1. 在 Vue 框架下，如果你想要页面显示一个数据，就要先在代码的 data 里声明数据；
        2. 在输入框的代码里，使用 **v-model** 来标记输入框和数据的同步；
        3. 在 HTML 模板里，使用两个花括号标记，来显示数据，例如 **{{title}}**。
        ``` 
        <div id="app">
        <h2>{{title}}</h2>
        <input type="text" v-model="title">
        </div>

        <script src="https://unpkg.com/vue@next"></script>
        <script>
        const App = {
        data() {
            return {
            title: "" // 定义一个数据
            }
        }
        }
        // 启动应用
        Vue.createApp(App).mount('#app')
        </script>
        ```
        * 不要再思考页面的元素怎么操作，而是要思考数据是怎么变化的。这就意味着，我们只需要操作数据，至于数据和页面的同步问题，Vue 会帮我们处理。
            * input  是 model，提供数据。
            * {{title}}是 view，供给用户的操作界面
            * 控制层controller是vue框架帮我们完成了
### Vue语法
* 在 Vue 中，我们使用 **@来标记用户的交互**，@click 是点击，@keydown 是键盘敲下，所以就像上述代码展示的那样，如果只监听回车键，那么我们就用 @keydown.enter="addTodo"
* 在 Vue 中，只要是渲染列表，我们都是用 **v-for** 这个语法，而具体到上述代码对 v-for 语法的使用，也即：`<li v-for="todo in todos">{{todo}}</li>`
* 在 Vue 中，**冒号":" 开头的属性是用来传递数据的**，这里的写法的意思就是根据 todo.done 来决定是否有 done 这个 class。

### Vue 3 主要的新特性
![新特性](https://static001.geekbang.org/resource/image/cc/d0/cc47460b1f9441d843bff6d37777a8d0.jpg?wh=3059x1664)
1. 新的 RFC 机制也让我们所有人都可以参与 Vue 新语法的讨论。
2. 工程化工具 Vite 带来了更丝滑的调试体验。
3. 对于产品的最终效果来看，Vue 3 性能更高，体积更小。
4. 对于普通开发者来说，Composition API 组合语法带来了更好的组织代码的形式。全新的响应式系统基于 Proxy，也可以独立使用。
5. Vue 3 内置了新的 Fragment、Teleport 和 Suspense 等组件。
6. 对于 Vue 的二次开发来说，自定义渲染器让我们开发跨端应用时更加得心应手。
7. 对于 Vue 的源码维护者，全部的模块使用 TypeScript 重构，能够带来更好的可维护性。
### Vue 2项目如何升级到Vue 3
![](https://static001.geekbang.org/resource/image/2d/1a/2d26cea2a48d9caec0yybe6862643e1a.jpg?wh=1921x1270)

* 在升级 Vue 的过程中，我们可以利用官方和社区的工具，帮助我们高效地升级。我们可以使用 compat 来给出提醒，项目中设置 @vue/compat 作为 vue 的别名，这样内部就会把所有和 Vue 2 的语法相关的升级信息提示出来，逐个替换即可，或者直接使用 gogocode 进行自动化批量替换。

## 基础入门
### 项目搭建
* 软件准备
    1. 安装Node.js
    2. VS Code 安装扩展插件 Volar
    3. 在目录执行下面的命令，这样就可以创建一个 Vite 的初始化项目。
    `npm init @vitejs/app`
    4. 输入项目名称，例如：geek-admin;接着选择框架 vue,vue
    5. 执行 `npm install`进行依赖的安装
    6. `npm run dev` 命令来启动项目
    7. 安装 Vuex 和 vue-router
        * `npm install vue-router@next vuex@next`
        * Vue 负责核心，Vuex 负责管理数据，vue-router 负责管理路由
    8. 
* 目录结构
    * 目录中的 index.html 是项目的入口；
    * package.json 是管理项目依赖和配置的文件；
    * public 目录放置静态资源，比如 logo 等图片；
    * vite.config.js 就是和 Vite 相关所有工程化的配置；
    * src 就是工作的重点，我们大部分的代码都会在 src 目录下管理和书写，后面我们也会在 src 目录下细化项目规范。
        * api            数据请求
        * assets         静态资源
        * components     组件
        * pages          页面
        * router         路由配置
        * store          vuex数据
        * utils          工具函数
* 复杂项目开发的架构
![复杂项目开发的架构](https://static001.geekbang.org/resource/image/3c/2c/3c9c01bf8917b85c469d086d4d0eb52c.jpg?wh=1385x968)
### Composition API
* Composition API 可以让我们更好地组织代码结构，而让你感到好奇的
### 响应式
* Vue 中用过三种响应式解决方案，分别是 defineProperty、Proxy 和 value setter。
* Vueuse 工具包
    * npm install @vueuse/core
    * 把实际开发中你用到的任何数据或者浏览器属性，都封装成响应式数据，这样就可以极大地提高我们的开发效率
### 组件化
* 自定义组件，把一个功能的模板（template）封装在一个.vue 文件中，也就是把 JavaScript 和 CSS 封装在一起，方便在项目中复用整个组件的代码。
* 组件事件
    ![df](https://static001.geekbang.org/resource/image/43/1b/43767ceb3324b4887271d0d20909a31b.jpg?wh=1904x1279)
    类似于函数的传入参数数据，运算后返回数据
    * 子组件向父组件传递数据（其他组件要利用该数据）
        * 子组件向父组件传递数据，通过 $emit派发事件，父组件中通过 v-on 接收该事件，拿到传递的数据。
        * 语法：$emit(eventName，data)，第一个参数为事件名称，需要跟父组件中 v-on 监听的事件名称一致；第二个参数为要传递的数据。
        * 在 Vue 3 中，我们使用 defineEmit 来定义对外“发射”的数据，在点击评分的时候触发即可。下面的 defineEmit 代码就展示了点击评分后，向父元素“发射”评分数据 num。
    * 父组件向子组件中传递数据（该数据需要用子组件来处理）
        * 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
        * 当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个属性（例如下面的 subNum），通过属性名，我们就能够在组件实例中访问这个值。
        * 父组件向子组件中传递数据，可以在子组件中通过设置props属性来接收传递过来的数据。
* 插槽
    * 在 Vue 中直接使用 slot 组件来显示组件的子元素，也就是所谓的插槽。在下面的代码中，我们使用 slot 组件渲染 Rate 组件的子元素。
### 动画
* Vue 3 中提供了一些动画的封装，使用内置的 transition 组件来控制组件的动画。