✨初识Vue--Vue之初体验😘【学习笔记】✨什么是Vue Vue的特点 Vue是我接触到的第一个框架，那么什么是框架

什么是Vue

Vue是一种用于构建用户界面的JavaScript框架。它是一种渐进式框架，专注于通过简单的API实现响应式数据绑定和组件化的构建方式。Vue.js的目标是通过尽可能简单的API实现高效的数据绑定和组合的视图组件。

Vue的特点

响应式数据绑定： Vue.js使用双向数据绑定来实现视图和模型之间的同步。当数据模型发生变化时，视图会自动更新，反之亦然

指令系统： Vue.js提供了一套内置的指令，用于处理DOM元素。指令是带有前缀v-的特殊属性，用于实现诸如条件渲染、循环、事件处理等功能。

Vue是我接触到的第一个框架，那么什么是框架？它和库有什么区别呢？

库（Library）：

调用关系： 在使用库时，开发者有更多的控制权，可以选择在项目中的哪些地方使用库的功能。开发者通过调用库中的函数或方法来实现特定的功能。

控制反转： 控制权在开发者手中，开发者决定何时调用库。通常，库不会强制性地规定项目的整体结构。

轻量级： 一般来说，库相对较轻量，主要提供一组工具和函数，而不是定义整个应用程序的结构。

框架（Framework）：

控制权： 在使用框架时，开发者将更多的控制权交给框架。框架通常提供了一整套规则和结构，开发者需要按照这些规则来组织和实现项目。

控制反转： 控制权在框架手中，框架决定何时调用开发者编写的代码。框架通常有一个主循环或执行流，开发者的代码被框架调用。

重量级： 框架通常更加重量级，因为它们提供了更多的工具和规则，以确保整个应用程序的一致性和结构。

在了解完Vue的一些基本知识后，我们一起来看看Vue到底怎么用吧

原生js

首先我们来看看在之前我们用原生js是怎么写代码的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        
    </div>

    <script>
        let app = document.getElementById("app")
        let h2 = document.createElement("h2")
        h2.innerHTML = "Hello World"
        app.appendChild(h2)
    </script>
</body>
</html>

在这段代码中，利用原生js

<div id="app"></div>：在<body>中创建了一个空的<div>元素，这个div的id属性为"app"，用于在后续的JavaScript中操作。

<script>：包含了JavaScript代码，用于动态地修改DOM（文档对象模型）。

let app = document.getElementById("app")：获取id为"app"的元素，并将其赋值给变量app。

let h2 = document.createElement("h2")：创建一个新的<h2>元素，并将其赋值给变量h2。

h2.innerHTML = "Hello World"：设置<h2>元素的内部HTML内容为"Hello World"。

app.appendChild(h2)：将创建的<h2>元素作为子元素添加到id为"app"的<div>元素中。

使用Vue

首先我们去到Vue的官网Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 在快速上手中的通过CDN使用Vue中复制 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>这段代码，并添加到自己要写的js之前，让这段代码先执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const tel = {
            template: '<h1>Hello World</h1>'
        }
        const app = Vue.createApp(tel)
        app.mount('#app')
    </script>
</body>
</html>

这段代码使用了Vue框架，相比于原生JavaScript的方式，它具有以下不同点：

引入 Vue 框架：
```
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
这一行引入了Vue框架。使用Vue时，你需要引入Vue的库文件。在这里，使用了来自unpkg的Vue 3版本的全局构建（vue.global.js）。
定义组件：
```
const tel = {
    template: '<h1>Hello World</h1>'
}
```
这里使用Vue定义了一个组件（component）tel，该组件具有一个简单的模板，包含一个<h1>标签，显示文本"Hello World"。
创建 Vue 应用：
```
const app = Vue.createApp(tel)
```
使用Vue.createApp方法创建了一个Vue应用，并将之前定义的tel组件作为参数传递进去。
挂载 Vue 应用到页面：
```
app.mount('#app')
```
将Vue应用挂载到页面上，指定挂载的目标元素的选择器为#app，这是页面中预先定义的一个空的<div>元素，作为Vue应用的挂载点。挂载的意思其实就是把东西塞到这个选定的div中

综合起来，这段代码的主要作用是使用Vue框架创建了一个简单的Vue应用，其中包含一个名为tel的组件，该组件在页面上渲染了一个标题（<h1>标签），显示文本"Hello World"。Vue的声明式模板语法使得定义和渲染组件变得更加简单和直观，相比原生JavaScript，Vue提供了更高层次的抽象，使得构建复杂的用户界面更为便捷。

更方便动态的把值放进html

    <script>
        const msg = '你好'

        const tel = {
            template: `<h1>${msg}</h1>`
        }
        const app = Vue.createApp(tel)
        app.mount('#app')
    </script>

由于我们使用到了Vue，我们将html放到js里面来写，会更方便我们把变量的值放进html，我们使用字符串模板，直接就让msg变量放进html里，可以更灵活的展示数据。

进阶-更方便的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="tel">
        <div>
            <h1>{{message}}</h1>
        </div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template:'#tel',
            data: function(){
                return{
                    message:'你好'
                }
            }
        }).mount("#app")
    </script>
</body>
</html>

代码解析

<div id="app"></div>: 定义一个空的<div>元素，该元素的id为"app"，将用于挂载Vue应用。

<template id="tel">...</template>: 定义了一个Vue组件的模板，该模板包含一个带有动态内容的<h1>标签。模板的id为"tel"，后续在Vue应用中引用。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>: 引入Vue 3框架的全局构建。 <script>...</script>: 包含Vue应用的JavaScript代码。

Vue.createApp({...}): 使用Vue.createApp创建一个Vue应用实例。

template: '#tel': 指定Vue应用实例使用之前定义的模板，该模板的id为"tel"。

data: function() {...}: 定义Vue组件的数据。在这里，定义了一个名为message的数据属性，其初始值为'你好'。

.mount("#app"): 将Vue应用实例挂载到id为"app"的元素上。

在这段代码中，我们用<template id="tel">...</template>，使得我们可以直接在Vue的应用实例中使用这个模板，方便了我们敲html的代码

{{ }} 是一种特殊的语法，用于实现数据绑定。这被称为插值，它的作用是将 Vue 实例中的数据绑定到 HTML 中，使页面能够动态地显示数据的变化。具体来说，{{ expression }} 中的 expression 是一个在 Vue 实例的数据上下文中有效的 JavaScript 表达式。当 Vue 实例的数据发生变化时，插值表达式会被重新计算，并将更新后的值渲染到页面上。

methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <template id="tel">
        <div>
            <button @click="add">{{count}}</button>
        </div>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        Vue.createApp({
            template:'#tel',
            data: function(){
                return{
                    count: 1
                }
            },
            methods:{
                add(){
                    this.count++
                }
            }
        }).mount("#app")
    </script>
</body>
</html>

这段代码是一个使用 Vue 3 构建的简单Vue应用，实现了一个点击按钮增加计数的功能。

<div id="app"></div>: 定义一个空的<div>元素，该元素的id为"app"，将用于挂载Vue应用。

<template id="tel">...</template>: 定义了一个Vue组件的模板，该模板包含一个按钮（<button>标签），并使用了Vue的指令 @click 来绑定点击事件。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>: 引入Vue 3框架的全局构建。

<script>...</script>: 包含Vue应用的JavaScript代码。

Vue.createApp({...}): 使用Vue.createApp创建一个Vue应用实例。

template: '#tel': 指定Vue应用实例使用之前定义的模板，该模板的id为"tel"。

data: function() {...}: 定义Vue组件的数据。在这里，定义了一个名为 count 的数据属性，其初始值为1。

methods: {...}: 定义了Vue组件的方法。在这里，定义了一个 add 方法，该方法会在按钮点击时将 count 的值加1。

.mount("#app"): 将Vue应用实例挂载到id为"app"的元素上。

综合而言，这段代码创建了一个Vue应用，包含一个按钮，点击按钮会调用 add 方法，从而更新 count 的值，实现了一个简单的计数器应用。

我们深入了解一下`Vue.createApp`

在Vue 3中，Vue.createApp 是一个工厂函数，用于创建一个 Vue 应用实例。它返回一个应用实例，你可以使用这个实例来管理整个 Vue 应用。

const app = Vue.createApp(options)

其中，options 是一个包含组件选项的对象。这个对象可以包含一系列属性，用于配置 Vue 应用的行为。最常见的属性包括 data、methods、computed 等，用于定义组件的状态和行为。

下面是一些常见的 options 属性：

data： 用于定义组件的响应式数据。

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

methods： 用于定义组件的方法。

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

computed： 用于定义计算属性。

const app = Vue.createApp({
  data() {
    return {
      radius: 5
    };
  },
  computed: {
    area() {
      return Math.PI * this.radius * this.radius;
    }
  }
});

template： 用于定义组件的模板。

const app = Vue.createApp({
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

一旦使用 Vue.createApp 创建了应用实例，你可以使用这个实例上的方法进行挂载、卸载等操作。例如，通过 app.mount('#app') 将应用挂载到指定的 DOM 元素上。

@click 是 Vue 中用于处理点击事件的指令。这是一种缩写形式，等效于 v-on:click。这个指令允许你监听DOM元素的点击事件，并在触发事件时执行相应的方法或代码。

在你的代码片段中，<button @click="add">{{count}}</button> 这一行中的 @click="add" 表示当按钮被点击时，将调用Vue实例中名为 add 的方法。

在下一篇文章中我会带大家一起了解一些关于Vue的指令

✨初识Vue--Vue之初体验😘【学习笔记】✨

什么是Vue

Vue的特点

Vue是我接触到的第一个框架，那么什么是框架？它和库有什么区别呢？

库（Library）：

框架（Framework）：

原生js

使用Vue

更方便动态的把值放进html

进阶-更方便的写法

methods

我们深入了解一下Vue.createApp

如果感觉有收获，别忘了给我点个赞哦~

我们深入了解一下`Vue.createApp`