[vue3] 渐进式JavaScript框架---Vue.js

沫洺

已于 2022-11-19 21:37:14 修改

阅读量873

点赞数

分类专栏： Vue3 文章标签： vue.js

于 2022-09-13 14:27:24 首次发布

本文链接：https://blog.csdn.net/HeyVIrBbox/article/details/126830536

版权

Vue3 专栏收录该内容

19 篇文章 22 订阅

订阅专栏

✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏

📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🌈前言

🎉前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。

🎉使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资源，如果希望能够独立运行就需要借助基于Node.js的一些前端框架。

🎨Vue介绍

🎫Vue是一个渐进式（真正用到才引用）的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

🎫网址:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

🎫vue的优点

📌轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
📌简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
📌双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
📌组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
📌视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
📌虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
📌运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

🎨Vue入门使用

🎈首先安装15.0 或更高版本的 Node.js

🎈网址: Node.js (nodejs.org)

🎈安装很简单,注意安装位置就行

🎈然后再命令窗口输入node -v查看版本号,出来就安装成功了

🔎查看npm版本:npm --version

🔎npm更新版本:npm install -g npm

🎈如果不使用构建工具来使用 Vue的话，直接复制下面的代码到一个 HTML 文件中，并在浏览器中打开它：
<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
🎈编辑工具建议使用Visual Studio Code,当然其他的工具也可以,IDEA也行

🎨Vue常用指令

💨v-if
💨v-for
💨v-bind及v-bind简写
💨v-on及v-on简写
💨v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        {{ message }}
        <hr>
        v-if<p id="p1" v-if="seen">看见了</p>
        <hr>
        v-for
        <ul v-for="item in items">
            <li>{{item}}</li>
        </ul>
        <hr>
        <table>
            <tr v-for="language in languages">
                <td>{{language.title}}</td>
                <td>{{language.price}}</td>
            </tr>
        </table>
        <hr>
        v-bind
        <a v-bind:href="url">{{title}}</a>
        <hr>
        v-bind简写
        <a :href="url">{{title}}</a>
        <hr>
        v-on
        <button v-on:click="tijiao">提交</button>
        <hr>
        v-on简写
        <button @click="tijiao">提交</button>
        <hr>
        v-model双向模型绑定
        <input type="text" v-model="email">{{email}}


    </div>

    <script>
        // 使用了全局构建版的 Vue，该版本的所有 API 都暴露在了全局变量 Vue 上
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    seen: true,
                    email: '123@qq.com',
                    items: ["莫", "名", "其", "妙"],
                    languages: [{ title: 'java', price: 1000 }, { title: 'vue', price: 200 }],
                    url: 'https://www.baidu.com',
                    title: '百度'
                }
            },
            methods: {
                tijiao(){
                    alert(this.message);
                }
            }
        }).mount('#app')
    </script>
</body>

</html>