vue简介

Vue.js是一个流行的JavaScript前端框架，它能够帮助开发者构建现代化的Web应用程序。作为一个初学者，了解Vue.js的几个核心概念将有助于你更好地理解Vue.js的工作原理。

模板语法：Vue.js使用模板语法来定义应用程序的UI界面，模板中可以包含HTML标记、Vue.js特有的指令和表达式，这些都能够被Vue.js处理成最终的DOM输出。
数据绑定：Vue.js使用双向数据绑定来保持数据和UI界面的同步更新，当数据发生变化时，UI界面会自动更新，反之亦然。
组件化开发：Vue.js鼓励将UI界面拆分成小的、可复用的组件，每个组件负责自己的一部分功能。这种模块化开发方式使得代码更易维护、扩展和重用。
生命周期钩子：Vue.js组件具有丰富的生命周期钩子函数，可以让开发者在不同阶段添加自定义逻辑，如在组件创建时做一些初始化操作。
指令：Vue.js提供了很多内置的指令，如v-if、v-for等，用于处理DOM元素的显示、隐藏和循环渲染等逻辑。
虚拟DOM：Vue.js使用虚拟DOM来提高渲染性能，减少直接操作真实DOM的开销。
单文件组件：Vue.js通过单文件组件，将模板、样式和逻辑封装在一个文件中，提高了代码的可读性和维护性。

Vue.js是一个易学易用、功能丰富、灵活和高效的前端框架，它能够帮助开发者构建现代化的Web应用程序。通过学习上述核心概念，你可以更好地了解Vue.js的工作原理，并开始编写自己的Vue.js应用程序。我们现在简单讲一下它的模板语法：首先我们可以从vue的官网引入vue的文件，比如：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue.createApp()

写一段html代码简单介绍一下vue的用法：

<body>
    <div id="app">

    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const title ='你好世界'
        Vue.createApp({
            template:`<h2>${title}</h2>`
        }).mount('#app')
    </script>
</body>

Vue.createApp() 是 Vue 3 中用于创建根实例的方法。Vue 3 是 Vue.js 的新版本，相较于 Vue 2 有一些重要的改进和变化。在上述示例中，通过 Vue.createApp() 创建了一个新的 Vue 3 应用程序实例，并传入一个选项对象。模板中使用了${title}插值，将title的值插入到模板中。

创建实例后，通过调用 app.mount('#app') 将 Vue 3 应用程序挂载到具有 id="app" 的 DOM 元素上。

值得注意的是，在 Vue 3 中，不再需要使用 new Vue() 来创建实例，而是使用 Vue.createApp() 方法。

简单介绍data()

在Vue中，data()是一个方法，用于定义组件的响应式数据。这些数据会被Vue实例监听变化，并且可以在模板中进行绑定和渲染。

具体来说，data()方法需要返回一个包含数据属性的对象，这些数据属性将会成为Vue实例的响应式数据。响应式数据是指当数据发生变化时，Vue会自动更新相关的DOM元素，从而保证了视图的实时更新。

简单介绍methods

在Vue中，methods是一个对象，用于定义组件中的方法。这些方法可以在模板中绑定和调用。

具体来说，methods对象中包含了一组方法，每个方法都是一个函数。这些方法可以在Vue实例中被调用，用于处理交互、响应事件或执行其他逻辑操作。

记录点击数

<body>
    <div id="app">

    </div>
    <script type="x-template" id="my-app">
        <div class="app">
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click='add'>+1</button>            
        </div>
    </script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const counter=10        
        Vue.createApp({
            template:'#my-app',
            data(){      // 数据源 是响应式的
                return {
                    title:'你好世界',
                    count:1,
                }
            },
            methods:{  //所有函数都放到里面
                add(){
                    this.count++  //更新局部的DOM结构
                },     
            }
        }).mount('#app')  
    </script>
</body>

@click是获取点击事件
<script type="x-template" id="my-app">...</script>: 这是一个类型为x-template的脚本模板，其中定义了Vue组件的模板结构。模板中包含了一个具有标题、计数和按钮的简单应用程序。
<div id="app">...</div>: app是我们将要挂载Vue应用程序的DOM元素。
<script>: 这里包含了JavaScript代码块，用于创建和挂载Vue应用程序。
- const counter = 10: 创建了一个名为counter的常量，其值为10（未被使用）。
- Vue.createApp({...}).mount('#app'): 使用Vue.createApp()方法创建了一个Vue应用程序实例，并将其挂载到id为app的DOM元素上。在这个实例中，我们使用了之前定义的模板#my-app，并且使用了data对象来存储组件的响应式数据。这里有一个名为title和count的属性，以及一个名为add的方法，该方法在按钮点击时会将计数加1。

当页面加载时，Vue会将模板渲染到指定的DOM元素上，从而显示出标题、计数和按钮。每当按钮被点击时，计数会增加，并且Vue会自动更新相关的DOM元素。

减少数目

相信你能够再写出点击就减一的代码了：

<body>
    <div id="app">

    </div>
    <template  id="my-app">
        <div class="app">
            <h2>{{title}}</h2>
            <h2>{{count}}</h2>
            <button @click='add'>+1</button>
            <button @click='minus'>-1</button>
        </div>
    </template> 

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const counter=10        
        Vue.createApp({
            template:'#my-app',
            data(){      // 数据源 是响应式的
                return {
                    title:'你好世界',
                    count:1,
                }
            },
            methods:{  //所有函数都放到里面
                add(){
                    this.count++  //更新局部的DOM结构
                },
                minus(){
                    this.count--
                }                
            }
        }).mount('#app')      
    </script>
</body>

这里补充一下template 标签可以替换x-template，和在<script></script>中的x-template效果是一样的，但是他会有颜色和代码提示。初识vue感觉应该还是蛮简单的。

不开始学vue你js毕不了业