前端框架Vue-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端框架Vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue

学习路线

前端框架Vue,Vue,前端框架,vue.js,前端

学习HTML、CSS和JavaScript基础知识：Vue是基于JavaScript的框架，所以首先需要掌握HTML、CSS和JavaScript的基础知识，包括DOM操作、事件处理、变量和函数等。
学习Vue的基本概念：了解Vue的核心概念，如Vue实例、组件、指令、生命周期等。可以通过官方文档、教程或者在线课程来学习。
掌握Vue的基本语法：学习Vue的模板语法、指令和数据绑定等基本语法，包括v-bind、v-on、v-if、v-for等常用指令的使用方法。
学习Vue的组件化开发：Vue是一个组件化的框架，学习如何创建和使用Vue组件，以及组件之间的通信和交互。
学习Vue的路由和状态管理：学习Vue的路由和状态管理工具，如Vue Router和Vuex，用于实现单页面应用的路由和状态管理。
实践项目开发：通过实践项目来巩固所学的知识，可以选择一些简单的项目开始，逐渐增加项目的复杂度和功能。
深入学习Vue的高级特性：学习Vue的高级特性，如自定义指令、混入、插件等，以及Vue的性能优化和调试技巧。
持续学习和实践：Vue是一个不断发展的框架，持续学习和实践是提高自己的关键。可以通过阅读官方文档、参与社区讨论、参加相关的培训和活动等方式来不断提升自己的Vue技能。

介绍

官方网站：https://cn.vuejs.org/

Vue.js是一种用于构建用户界面的开源渐进式JavaScript框架。
它是一种轻量级的框架，易于学习和使用。
它基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的，组件时的编程模型，帮助开发人员高效的开发用户界面。无论简单还是复杂的界面，Vue都可以胜任。
Vue.js采用了组件化的开发方式，使得开发者可以将一个页面拆分为多个可复用的组件，从而提高代码的可维护性和复用性。

前端框架Vue,Vue,前端框架,vue.js,前端

特点

响应式：
- Vue.js使用了双向数据绑定的机制，当数据发生变化时，页面会自动更新，无需手动操作DOM。
组件化：
- Vue.js将页面拆分为多个组件，每个组件都有自己的逻辑和样式，可以独立开发和维护。
轻量级：
- Vue.js的体积较小，加载速度快，性能优秀。
简单易用：
- Vue.js提供了简洁的API和清晰的文档，使得开发者可以快速上手并进行开发。
生态丰富：
- Vue.js拥有庞大的社区和生态系统，有大量的插件和工具可供选择，方便开发者进行扩展和集成。

渐进式框架

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

无论再怎么灵活，Vue 的核心知识在所有这些用例中都是通用的。即使你现在只是一个初学者，随着你的不断成长，到未来有能力实现更复杂的项目时，这一路上获得的知识依然会适用。如果你已经是一个老手，你可以根据实际场景来选择使用 Vue 的最佳方式，在各种场景下都可以保持同样的开发效率。这就是为什么我们将 Vue 称为“渐进式框架”：它是一个可以与你共同成长、适应你不同需求的框架。

MVVM模式

Vue.js使用MVVM（Model-View-ViewModel）模式

前端框架Vue,Vue,前端框架,vue.js,前端

Model：数据模型
- 应用程序的数据，可以从后端获取的数据，也可以是组件自身的数据
View：
- 展示用户界面，即HTML模板部分
ViewModel：
- Vue.js的核心，视图层和数据模型层的中间层，负责建立视图和数据的双向绑定关系

通过MVVM模式，Vue.js实现了数据驱动的开发方式，使开发者能够更专注于业务逻辑的实现，而不用过多关注DOM操作和数据的同步问题。同时，MVVM模式也提高了代码的可维护性和可测试性，使得开发和维护复杂的应用程序更加简单和高效。

搭建Vue开发环境

前端框架Vue,Vue,前端框架,vue.js,前端

第一个程序

传统的javaScript代码

在Vue.js中，双括号{{}}被用作文本插值的语法，用于在模板中插入动态的数据。

当Vue实例渲染模板时，模板中的{{}}会被替换为实例中对应的数据值。这个过程被称为数据绑定，它建立了视图（View）和模型（Model）之间的联系，使得界面可以随着数据的改变而自动更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 第一步，引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>

</head>
<body>
    <!-- view层 视图层 -->
    <div id="app">
        <!--
        {{ }}  :  文本插值的语法，用于在模板中插入动态的数据
        {{ }} 会被替换为实例中对应的数据值。这个过程被称为数据绑定，
              它建立了视图（View）和模型（Model）之间的联系，使得界面可以随着数据的改变而更新
        -->
        <h1>我叫：{{ name }}</h1>
        <h1>年龄：{{ age }}</h1>
        <!-- 可以做运算 -->
        <h1>{{ 1 + 2 + 3 }}</h1>
        <!-- 可以做条件判断 -->
        <h1>{{ 3 > 2 }}</h1>
        <h1>{{ 1 > 2 ? '√' : '×'}}</h1>
    </div>

    <!--
        传统的javaScript数据呈现到页面的方式
        对DOM的操作太过繁琐
    -->
    <!--
        <script type="text/javascript">
            var name = "张三";
            var nameValue = document.getElementById("app")
            nameValue.textContent = name;
        </script>
    -->

    <script>
        // 创建一个Vue对象
        var app = new Vue({
            // element的简写，将Vue示例挂载到id为app的元素上
            el: '#app',
            // 数据对象
            // model层 数据模型
            // 用于定义组件的初始数据
            data: {
                // 定义一个message的属性，并赋值为‘Hello World;
                name: '张三',
                age : 18
            }
        })
    </script>
</body>
</html>

Vue常见的属性

el
- 用于指定Vue示例将要挂载到的元素
data
- 用于定义组件的初始数据
methods
- 用于定义组件的方法
computed
- 用于定义计算属性，并在数据变化执行相应的操作
watch
- 用于监听数据的变化，并在数据变化时执行相应的操作
props
- 用于接收父组件传递的数据
components
- 用于注册子组件，使其在父组件中可以使用
directives
- 用于注册自定义指令，可以用于操作DOM 元素
filters
- 用于定义和应用文本格式化的过滤器
created
- 在组件实例被创建后立即调用的钩子函数。
mounted
- 在组件挂载到页面后调用的钩子函数
destroyed
- 在组件被销毁前调用的钩子函数

指令模式

v-bind

用于绑定数据，将Vue实例中的数据绑定到HTML元素的属性上，可以简写为冒号(😃。

例如：v-bind:title=“message”，将Vue实例中的message属性的值绑定到元素的title属性上。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>指令语法：</h1>
    	<a v-bind:href="url">跳转到CSDN</a>
</div>
<script>
    // 创建一个Vue实列
    var app = new Vue({
        // 将Vue示例挂载到id为app的元素上
        el: '#app',
        data: {
            url : 'https://www.csdn.net'
        }
    })
</script>
</body>
</html>

v-model

用于实现双向数据绑定，将表单元素的值与Vue实例中的数据进行双向绑定。

例如：v-model=“message”，将表单元素的值与Vue实例中的message属性进行双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>v-model指令模式</h1>

    <!--    输入框，使用v-model指令绑定数据-->
    <input type="text" v-model="message" value="请输入">
    <p>{{ message }}</p>

    <input type="checkbox" v-model="isChecked" >
    <label>{{ isChecked ? '检查' : '不检查' }}</label>

    <select v-model="selectedOption">
        <option value="唱">唱</option>
        <option value="跳">跳</option>
        <option value="rap">rap</option>
    </select>
    <p>选择的选项是: {{ selectedOption }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: '',
            isChecked: false,
            selectedOption: ''
        }
    });
</script>
</body>
</html>

v-if / v-else

用于条件渲染，根据表达式的值来决定是否渲染某个元素。

例如：v-if=“isShow”，根据isShow属性的值来决定是否渲染该元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if / v-else指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="showMessage">Hello, Vue!</h1>
    <h1 v-else>Goodbye, Vue!</h1>
    <button @click="toggleMessage">切换信息</button>
</div>

<script>
    // 创建一个Vue实例
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        //数据对象
        data: {
            // 控制是否查看消息的变化
            showMessage: true
        },
        // 方法对象啊
        methods: {
            // 切换消息显示状态的方法
            toggleMessage() {
                //将showMessage的值取反
                this.showMessage = !this.showMessage;
            }
        }
    });
</script>
</body>
</html>

v-for

用于循环渲染，根据数组或对象的内容来生成多个相同的元素。

例如：v-for=“item in items”，根据items数组的内容来生成多个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>学生列表</h1>
    <ul>
        <!-- 遍历students数组 -->
        <!-- 遍历数组为students，将每一个元素赋值给变量student -->
        <!-- :key属性用于提供唯一的标识符，以便Vue能够跟踪和优化每一个列表项的更新 -->
        <li v-for="student in students" :key="student.id">
            {{student.id}}-{{ student.name }} - {{ student.age }}岁
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [
                { id: 1, name: '张三', age: 18 },
                { id: 2, name: '李四', age: 20 },
                { id: 3, name: '王五', age: 22 },
                { id: 4, name: '赵六', age: 19 }
            ]
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>学生列表</h1>
    <ul>
        <!-- 遍历students数组 -->
        <!--
            students : 要迭代的数组
            student  : 存储数组的元素的变量名
            index    : 迭代到的当前元素索引，从0开始
        -->
        <li v-for="(student,index) in students" :key="student.id">
            {{index}}-{{student.id}}-{{ student.name }} - {{ student.age }}岁
        </li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [
                { id: 1, name: '张三', age: 18 },
                { id: 2, name: '李四', age: 20 },
                { id: 3, name: '王五', age: 22 },
                { id: 4, name: '赵六', age: 19 }
            ]
        }
    })
</script>
</body>
</html>

v-once

v-once指令用于只渲染元素和组件一次，并且之后不再进行重新渲染。这意味着元素或组件的初始状态将会保留，而不会受到后续数据变化的修改

使用v-once指令会提高其性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                title: 'v-once指令的用法',
                navs: [
                    {name: '首页', url: 'home.html'},
                    {name: '新闻', url: 'news.html'},
                    {name: '视频', url: 'video.html'},
                ]
            }
        }
    }).mount('#app');
</script>
</body>

</html>

v-on

用于绑定事件，将Vue实例中的方法绑定到HTML元素的事件上，可以简写为@。

例如：v-on:click=“handleClick”，将Vue实例中的handleClick方法绑定到元素的click事件上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 显示message变量的值 -->
    <h1>{{ message }}</h1>
    <!-- 点击按钮时调用changeMessage方法 -->
    <button v-on:click="changeMessage">改变信息</button>
</div>


<script>
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        data: {
            // 定义一个名为message的变量，初始值为'Hello, Vue!'
            message: 'Hello, Vue!'
        },
        methods: {
            // 定义一个名为changeMessage的方法
            changeMessage: function() {
                // 将message的值改为'New Message!'
                this.message = 'New Message!';
            }
        }
    });
</script>
</body>
</html>

v-show

用于条件显示，根据表达式的值来决定是否显示某个元素，与v-if不同的是，v-show只是通过CSS的display属性来控制元素的显示与隐藏。

例如：v-show=“isShow”，根据isShow属性的值来决定是否显示该元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 点击按钮时调用toggleShow方法 -->
    <button @click="toggleShow">Toggle Show</button>
    <!-- 根据show的值来决定是否显示该段落 -->
    <p v-show="show">点击按钮时显示这一段</p>
</div>


<script>
    new Vue({
        // 将Vue实例挂载到id为app的元素上
        el: '#app',
        data: {
            // 初始化show的值为false，即不显示该段落
            show: false
        },
        methods: {
            // 定义toggleShow方法
            toggleShow() {
                // 切换show的值，如果为true则变为false，如果为false则变为true
                this.show = !this.show;
            }
        }
    });
</script>
</body>
</html>

组件

Vue组件是Vue.js框架中的核心概念之一，可以应用程序划分为几个独立，可重复的模块。每个组件包含了相关的HTML模板，CSS样式和JavaScript代码，用于构建用户界面。

在Vue中，组件是可复用的自定义元素，通过Vue示例的components选项来注册，一旦注册了组件，就可以在其他的组件和应用程序作用使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show Directive Example</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <sin></sin>
    </div>
    <script type="text/javascript">

        /**
         * 全局注册组件：在所有的Vue实例中都可可以使用组件
         * 参数1：组件名称，参数2：具体的组件
         *  Vue.component("sin",{
                template:'<h1>hello!!!</h1>',
            });
         */
            //定义组件
        const countertemp = {
            template: `<button @click='num++'>点击了{{num}}</button>`,
            data(){
                return{
                    num:0
                }
            }
        };

        var vm = new Vue({
            el: "#app",
            //局部组件注册：只能在当前Vue示例中使用
            components:{
                //组件名称：具体组件
                sin: countertemp
            }
        });



    </script>


</body>
</html>

Axios

Axios提供了一种简介且易于使用的方式来处理一步HTTP请求，并自动转换响应数据为JavaScript对象。她支持各种请求方法，例如：GET，POST，PUT，DELETE等，并提供了许多配置选项，例如请求头，发送请求参数，处理错误等。

在Vue中，可以使用Axios来与后端API进行通信，获取数据并更新页面。

在Vue组件中导入Axios，并在需要的地方发起HTTP请求。

官网：https://www.axios-http.cn/

configData.json

{
  "name": "SIN",
  "url": "https://www.baidu.com/",
  "page": 1,
  "method": "get",
  "isNonProfit": true,
  "address": {
    "street": "雁塔区",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "sin",
      "url": "https://blog.csdn.net/qq_44715376?type=blog"
    }
  ]
}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show Directive Example</title>
    <!-- 导入相关文件-->
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="vue">

    </div>

    <script>
        var vm = new Vue({
            el: '#vue',
            //钩子函数，程序执行的时候插入到Vue的整个生命周期的任意位置执行
            mounted(){
                //get请求
                axios.get('configData.json').then(response=>(console.log(response.data)));
            }
        });
    </script>

</body>
</html>

前端框架Vue,Vue,前端框架,vue.js,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!-- 导入相关文件-->
    <script type="text/javascript" src="./js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="vue">
        {{info.name}}
        {{info.address}}
        <a v-bind:href="info.url">点击跳转</a>

    </div>

    <script>
        var vm = new Vue({
            el: '#vue',
            data(){
                return{
                    // 请求的返回参数合适，必须喝json字符串一样
                    info: {
                        name: null,
                        url: null,
                        address:{
                            street: null,
                            city: null,
                            country: null
                        },
                        links:[
                            {name: null,
                            url:null
                            }
                        ]
                    }
                }
            },
            //钩子函数，程序执行的时候插入到Vue的整个生命周期的任意位置执行
            mounted(){
                //get请求
                axios.get('configData.json')
                    .then(response=>(this.info=response.data));
            }
        });
    </script>
</body>
</html>

计算属性

Vue计算属性（Computed properties）是一种特殊的计算属性，它们不是组件的data属性，二十依赖于data属性并根据它们计算出来的，计算属性的值会根据所依赖的数据项进行缓存，并在相关数据项发生改变时自动更新。这使得计算属性在性能和代码组织上都有优势，它可以让你用简洁的方式处理复杂的逻辑操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!-- 导入相关文件-->
    <script type="text/javascript" src="./js/vue.js"></script>
   </head>
<body>
<!-- Vue应用的挂载点，id为"app" -->
<div id="app">
    <!-- 使用v-model指令与Vue实例中的firstName和lastName进行双向数据绑定 -->
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">

    <!-- 使用插值表达式直接访问计算属性fullName的值 -->
    <!-- 当firstName或lastName的值发生变化时，fullName的值会自动更新 -->
    <p>Full Name: {{ fullName }}</p>
</div>

<!-- 定义Vue实例 -->
<script>
    new Vue({
        el: '#app',  // Vue实例挂载的元素
        data: {
            firstName: "",  // data中定义的firstName属性
            lastName: ""    // data中定义的lastName属性
        },
        computed: {
            fullName() {
                // 计算属性fullName的值依赖于firstName和lastName的值
                // 当firstName或lastName的值发生改变时，fullName的值会自动更新
                return this.firstName + ' ' + this.lastName;
            }
        }
    });
</script>

</body>
</html>

前端框架Vue,Vue,前端框架,vue.js,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!-- 导入相关文件-->
    <script type="text/javascript" src="./js/vue.js"></script>
   </head>
<body>
<!-- Vue应用的挂载点，id为"app" -->
<div id="app">
    <!-- 使用v-model指令与Vue实例中的firstName和lastName进行双向数据绑定 -->
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">

    <!-- 使用插值表达式直接访问计算属性fullName的值 -->
    <!-- 当firstName或lastName的值发生变化时，fullName的值会自动更新 -->
    <p>sum: {{ sum }}</p>
</div>

<!-- 定义Vue实例 -->
<script>
    new Vue({
        el: '#app',  // Vue实例挂载的元素
        data: {
            num1: "",  // data中定义的firstName属性
            num2: ""    // data中定义的lastName属性
        },
        computed: {
            sum() {
                const n1 = parseFloat(this.num1)||0;
                const n2 = parseFloat(this.num2)||0;
                return n1 + n2;
             }
        }
    });
</script>

</body>
</html>

前端框架Vue,Vue,前端框架,vue.js,前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!-- 导入相关文件-->
    <script type="text/javascript" src="./js/vue.js"></script>
   </head>
<body>
    <div id="vue">
        <p>currnetTime1  {{currentTime1()}}</p>
        <p>currentTime2  {{currentTime2}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: "#vue",
            methods:{
                // currentTime1方法
                currentTime1:function () {
                    //返回现在的时间戳
                    return Date.now();
                }
            },
            //计算属性，methods，computed方法名不能重写，重名之后，只会调用Methods的方法
            computed:{
                currentTime2: function () {
                    return Date.now();
                }
            }
        });

    </script>
</body>
</html>

注意：

methods和computed里的东西不能重名

说明：

methods：定义方法，调用方法使用currentTime1（）,需要带括号

cumputed：定义计算属性，调用属性使用currentTime2，不需要带括号

前端框架Vue,Vue,前端框架,vue.js,前端

插槽Slot

Vue中的插槽（Slot）是一种非常重要的内容分发技术，它允许我们在组件模板中定义一些占位符，然后再使用组件的地方填充这些占位符。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <todo>
            <!--
                通过slot="todo-title"将其放置在todo组件的todo-title插槽中
                通过:title属性传递一个标题
            -->
            <todo-title slot="todo-title" :title="title"></todo-title>
            <!--
                通过slot="todo-items"将多个列表项放置在todo组件中的todo-itmes插槽中
                通过v-for指令遍历todoItems数组中的每一项
            -->
            <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
        </todo>
    </div>

    <script>
        /**
         * Vue实现简单的列表
         * 包好三个自定义组件todo，todo-title，todo-items。
         *
         */
        Vue.component("todo",{
            template: '<div>\
                            <slot name="todo-title"></slot>\
                                <ul>\
                                    <slot name="todo-items"></slot>\
                                </ul>\
                        </div>'
        });
        /**
         * 列表的标题
         */
        Vue.component("todo-title",{
            props: ['title'],
            template: '<div>{{title}}</div>'
        });
        /**
         * 列表项
         */
        Vue.component("todo-items",{
            props:['item'],
            template: '<li>{{item}}</li>'
        });
        var vm = new Vue({
            el: "#app",
            //定义的数据
            data: {
                title: "你好",
                todoItems: ['张三','李四','王五']
            }
        });



    </script>

</body>

</html>

最终所渲染的结果：

<div id="app">
    <div>
        <div>你好</div>
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
        </ul>
    </div>
</div>

前端框架Vue,Vue,前端框架,vue.js,前端

总结：

这个简单的列表项，通过使用Vue.js的插槽功能，我们可以将内容分发到响应的插槽中进行指定和重用。

前端框架Vue,Vue,前端框架,vue.js,前端

vue-cli

Vue CLI是一个官方的脚手架工具，用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架，可以帮助开发人员快速构建现代化的Web应用程序。

Vue CLI通过提供预先配置好的Webpack模板和插件，使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建Vue应用。Vue CLI还提供了一组命令行工具，如创建、构建、测试和部署Vue应用等。

使用Vue CLI可以方便地创建Vue项目，并提供了许多常用功能的预设，比如ESLint代码检查、Babel转译、单元测试工具、CSS预处理器、服务器代理等等。此外，在Vue CLI的基础上，还可以添加其他的插件来扩展其功能。

总之，Vue CLI是一款功能强大的、易于使用的工具，可以大大提高Vue应用的开发效率。

主要功能

Vue CLI 提供了一套完整的工具链，方便开发人员在创建、开发、测试和部署 Vue 项目时进行高效的操作。它简化了项目配置和管理的过程，使得开发者能够更专注于业务逻辑的实现。

快速创建项目：Vue CLI 允许你通过简单的命令行界面快速创建一个新的 Vue 项目。它提供了一系列预设模板，包括官方推荐的标准模板、PWA（渐进式 Web 应用）模板、TypeScript 模板等，可以根据需求选择合适的模板。
零配置开发服务器：Vue CLI 内置了一个开发服务器，它使用了 webpack-dev-server 来实现热重载和自动刷新等功能。在开发阶段，你可以使用 Vue CLI 启动本地开发服务器，实时预览和调试你的应用程序。
代码打包和优化：Vue CLI 可以通过 webpack 对项目进行打包和优化。它通过内置的配置文件来管理构建过程，自动处理模块依赖、代码分割、压缩、文件指纹等工作，使得最终生成的打包文件体积更小，加载速度更快。
插件系统：Vue CLI 提供了插件系统，允许你轻松地扩展项目的功能。你可以使用 Vue CLI 官方提供的插件，如 Vuex（状态管理库）、Vue Router（路由器）等，也可以开发自定义插件来满足特定需求。
单元测试和端到端测试：Vue CLI 集成了测试工具，包括 Jest（用于单元测试）和 Nightwatch（用于端到端测试）。你可以使用这些工具来编写和运行测试用例，确保项目的质量和稳定性。
项目部署：Vue CLI 提供了快速的项目部署功能。它可以帮助你生成生产环境所需的最终打包文件，并提供了构建结果分析、代码压缩等功能，以便于你将应用程序部署到生产环境中。

环境准备

Node.js支持 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi

前端框架Vue,Vue,前端框架,vue.js,前端

前端框架Vue,Vue,前端框架,vue.js,前端

配置环境变量

安装Node.js淘宝镜像加速器（cnpm）

npm install cnpm -g

前端框架Vue,Vue,前端框架,vue.js,前端

安装vue-cli

cnpm install vue-cli -g

前端框架Vue,Vue,前端框架,vue.js,前端

检验安装

vue list

前端框架Vue,Vue,前端框架,vue.js,前端

第一个vue-cli

E:\VUE笔记\vue-student>vue init webpack myvue

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
�������ļ�
? Project name myvue      // 项目名称
? Project description A Vue.js project    // 项目描述
? Author SIN   // 项目作者
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "myvue".

# Project initialization finished!
# ========================

To get started:

  cd myvue
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

前端框架Vue,Vue,前端框架,vue.js,前端

初始化并运行

cd myvue
npm install
npm run dev

前端框架Vue,Vue,前端框架,vue.js,前端

项目目录解析

demovue                   -------> 项目名称
    -build                 -------> 用来使用webpack打包使用build依赖            
    -config                -------> 用来做整个项目配置目录
    -node_modules          -------> 管理项目中使用依赖
    -src                   -------> 用来编写vue的源代码
        |+ assets          -------> 存放静态资源
		|+ components      -------> 编写vue组件
		|+ App.vue         -------> 根目录组件
		|+ main.js         -------> 根目录主入口
    -static                -------> 存放其他静态资源
    .babelrc               -------> 将es6转换为es5
    .editorconfig          -------> 项目编辑配置
    .gitignore             -------> get配置
    .postcssrc.js          -------> 源代码项目js
    index.html             -------> 项目主页
    package.json           -------> 类似pom.xml文件 依赖管理，不建议手动添加
    package-lock.json      -------> 对package.json文件加锁
    README.md              -------> 项目说明书

第一个案例

我们在vue-cli项目中主要是以vue组件形式来编写，编写位置位于：src/components下

分析：

<!-- 
	编写组件的页面结构。
	包含：组件的布局，内容的结构，定义组件的外观和展示
-->
<template>

</template>

<!-- 
	编写组件的JavaScript代码逻辑
	包含：组件的属性，组件的方法，组件的生命周期，定义组件的行为和功能等
-->
<script>
    export default {
        name: "组件名称"
    }
</script>

<!-- 
	编写组件的样式信息，
	包含：组件的Css样式，定义组件的外观和样式。
-->
<style scoped>

</style>

编写：

DemoTest.vue

<template>
    <div class="box">
        {{vueData1}}
    </div>
</template>

<script>
    export default {
        name: "DemoTest",
        data(){
            return{
                vueData1: "这是使用vue-cli编写的第一个案例"

            }
        }
    }
</script>

<style scoped>
    .box{
        background-color: red;
    }
</style>

主入口调用

App.vue是项目的主入口，需要将编写的组件在主入口中注册并调用，才能在页面中显示出来

<template>
    <div>
        <!--调用组件-->
        <DemoTest/>
    </div>
</template>

<script>
    // 引入组件
    import DemoTest from "@/components/DemoTest";

    export default {
        name: 'App',
        components: {
            // 注册组件
            DemoTest
        }
    }
</script>

<style>

</style>

在命令行中启动项目： npm run dev 命令来启动项目
前端框架Vue,Vue,前端框架,vue.js,前端

前端框架Vue,Vue,前端框架,vue.js,前端

超链接

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 深度集成，可以帮助构建单页面应用程序。通过 Vue Router，可以实现页面之间的切换、路由参数传递、嵌套路由等功能。

安装vue-router

npm install vue-router@^3.5.3

src/router下创建index.js文件

import Vue from 'vue';
import Router from 'vue-router';
import StudentAdd from "@/components/StudentAdd";
import StudentList from "@/components/StudentList";

Vue.use(Router);

export default new Router({
    mode: 'history', // 如果需要使用 history 模式，则在此设置
    base: process.env.BASE_URL, // 设置 base
    routes: [
        {
            path: '/student-add',
            name: 'StudentAdd',
            component: StudentAdd
        },
        {
            path: '/',
            name: 'StudentList',
            component: StudentList
        }
    ]
})

main.js中导入路由地址

import Vue from 'vue'
import App from './App.vue'

import router from "./router";
Vue.use(router) // 如果 router 是一个自定义插件，也可以使用 Vue.use() 来安装

new Vue({
    el:'#app',
    router,
    render: h => h(App)
})

App.vue

<template>
    <div>
        <!-- 
            <router-view>是Vue Router提供的一个功能强大的组件，
            它会根据当前路由的路径，动态地渲染匹配到的组件内容。
            这使得构建单页应用程序变得非常简单和灵活。 
		-->
        <router-view/>
    </div>
</template>

<script>
    export default {

        name: 'App',
        components: {
        }
    }
</script>

<style>
</style>

StudentList.vue

<template>
    <div>
        <button @click="handleClick">点击跳转</button>
        <a href="/student-add">点击跳转</a>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "StudentList",
        methods: {
            handleClick() {
                // 处理点击事件的逻辑代码
                // 可以使用this.$router.push进行路由跳转或其他操作
                this.$router.push('/student-add');
            }
        }


    }
</script>

<style scoped>

</style>

StudentAdd.vue

<template>
    <div>
        <h2>StudentAdd</h2>
    </div>
</template>

<script>

    export default {
        name: "StudentAdd",
    };
</script>

前端框架Vue,Vue,前端框架,vue.js,前端

表格数据

Element UI 是一套基于 Vue.js 2.0 的桌面端组件库，它提供了一系列常用的 UI 组件和工具，可以帮助开发者快速构建优秀的 Web 应用程序。

Element UI 的组件包括了各种基本组件（如按钮、输入框、单选框、复选框等）、布局组件（如栅格、表单、面板等）、数据展示组件（如表格、标签、分页、轮播图等）、弹框组件（如消息框、提示框、对话框等）和导航组件（如菜单、面包屑、分页器等）等，覆盖了常见的 UI 组件需求。

使用 Element UI，可以通过简单的配置和调用，即可快速地实现复杂的 UI 布局和交互效果，提升开发效率和用户体验。

1,安装Element UI：

npm install element-ui --save

前端框架Vue,Vue,前端框架,vue.js,前端

2,在src/main.js中引入Element UI,

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el:'#app',
  render:h => h(App)
})

3,在src/components目录下创建一个名为DataTable.vue的文件

<template>
    <div>
        <!--
            使用el-table组件来展示数据，
            通过 :data="tableData" 将tableData数组绑定到表格数组的data属性上，实现动态渲染表格数据
        -->
        <el-table :data="tableData" style="width: 100%">
            <!--
                使用el-table-column组件定义表格的列
                通过 prop 属性指定需要展示的字段（例如 prop="date" 表示展示 date 字段），
                通过 label 属性设置列的标题。
            -->
            <el-table-column prop="date" label="日期" width="180"/>
            <el-table-column prop="name" label="姓名" width="180"/>
            <el-table-column prop="address" label="地址"/>
        </el-table>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                // 定义数组数组
                tableData:[{
                    date: '2023-11-02',
                    name: '张三',
                    address: '重庆市涪陵区'
                },{
                    date: '2023-11-03',
                    name: '李四',
                    address: '西安市雁塔区'
                },{
                    date: '2023-11-04',
                    name: '王五',
                    address: '西安市未央区'
                },{
                    date: '2023-11-05',
                    name: '赵六',
                    address: '西安市灞桥区'
                }
                ]
            }
        }
    }
</script>

4,在src/App.vue中引入并使用DataTable

<template>
  <div id="app">
    <DataTable/>
  </div>
</template>
<script setup>
import DataTable from "./components/DataTable.vue";

export default {
  name: 'App',
  components:{
    DataTable,
  },
}
</script>

前端框架Vue,Vue,前端框架,vue.js,前端

弹出框

ModelMessage.vue

<template>
    <div class="modal-wrapper">
        <div class="modal">
            <div class="modal-header">
                <h3>{{ title }}</h3>  <!-- 标题 -->
                <button class="close-btn" @click="$emit('close')">X</button> <!-- 关闭按钮 -->
            </div>
            <div class="modal-body">
                <!--弹出框的内容-->
                <slot></slot> <!-- 插槽，用于放置弹出框的内容 -->
            </div>
            <div class="modal-footer">
                <button v-if="showCancelBtn" @click="$emit('cancel')">取消</button> <!-- 取消按钮 -->
                <button v-if="showConfirmBtn" @click="$emit('confirm')">确认</button> <!-- 确认按钮 -->
            </div>
        </div>
        <div class="modal-overlay"></div> <!-- 模态框遮罩层 -->
    </div>
</template>

<script>

    export default {
        name: "ModelMessage",
        props: {
            title: {
                type: String,
                default: '提示' // 标题默认值
            },
            showCancelBtn: {
                type: Boolean,
                default: true // 是否显示取消按钮，默认为true
            },
            showConfirmBtn: {
                type: Boolean,
                default: true // 是否显示确认按钮，默认为true
            }
        }
    }
</script>

<style scoped>
	 /* 样式定义 */
    .modal-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
	/* 模态框样式 */
    .modal {
        position: relative;
        z-index: 9999;
        width: 500px;
        margin: 100px auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
	 /* 模态框头部样式 */
    .modal-header {
        padding: 10px;
        text-align: center;
        background-color: #f1f1f1;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
	/* 模态框内容样式 */
    .modal-body {
        padding: 20px;
    }
	/* 模态框底部样式 */
    .modal-footer {
        padding: 10px;
        text-align: center;
        background-color: #f1f1f1;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
	 /* 关闭按钮样式 */
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        color: #333;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }
	/* 模态框遮罩层样式 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>

TestMessage.vue

<template>

    <div>
        <button @click="showModal">点击弹出框</button>

        <ModelMessage v-if="isModalVisible"  @close="hideModal">
            <!--弹出框的内容-->
            <h2>这是一个弹出框</h2>
            <p>弹出框的内容...</p>
        </ModelMessage>
    </div>

</template>

<script>

    import ModelMessage from "@/components/ModelMessage";

    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "TestMessage",
        components: {
            ModelMessage
        },
        data() {
            return {
                isModalVisible: false
            };
        },
        methods: {
            showModal() {
                this.isModalVisible = true;
            },
            hideModal() {
                this.isModalVisible = false;
            }
        }
    }

</script>

<style scoped>

</style>

App.vue

<template>
    <div>
        <!--调用组件-->
        <TestMessage/>
    </div>
</template>

<script>

    import TestMessage from "@/components/TestMessage";

    export default {
        name: 'App',
        components: {
            // 注册组件

            TestMessage
        }
    }
</script>

<style>

</style>

前端框架Vue,Vue,前端框架,vue.js,前端

读取json数据

1，安装axios

npm install axios

前端框架Vue,Vue,前端框架,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-656820.html

2,App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">{{ item.id }} - {{ item.name }} - {{ item.email }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'MyComponent',
    data() {
      return {
        jsonData: []
      };
    },
    created() {
      // 使用axios发送GET请求来读取数据
        // { withCredentials: true } 是一个用于配置 XMLHttpRequest 对象的属性的选项。XMLHttpRequest 是在 JavaScript 中进行网络请求的常用对象，它可以发送 HTTP 请求到服务器并获取响应数据。
        //withCredentials: true 可以让跨域请求携带凭据信息，但同时需要确保服务器端的配置也支持接收并处理这些凭据信息。
      axios.get('http://localhost:8082/demo', { withCredentials: true })
        .then(response => {
          // 处理获取到的JSON数据
          this.jsonData = response.data;
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  }；
</script>

3, 后端Cors配置类

@Configuration  // 将这个类标记为一个配置类
@EnableWebMvc    // 启用Spring MVC框架对Web请求的处理
public class CorsConfig implements WebMvcConfigurer {  // 实现WebMvcConfigurer接口

    @Override
    public void addCorsMappings(CorsRegistry registry) {  // 重写addCorsMappings方法
        registry.addMapping("/**")  // 添加CORS映射，将所有路径都映射到CORS中
                .allowedOrigins("http://localhost:8080")  // 允许跨域访问的源
                .allowedMethods("GET", "POST", "PUT", "DELETE")  // 允许的HTTP方法
                .allowedHeaders("*")  // 允许的请求头
                .allowCredentials(true);  // 开启凭据支持，允许发送Cookies等凭据信息
    }
}

4，后端Controller控制器类

/**
 * @RestController  (控制器)
 * 是一个RESTful风格的控制器（将数据以json形式发送）
 * 将该类下的所有的方法的返回值直接以json或者xml形式写入到HTTP请求体中
 */
@RestController
public class RedisTestController {

    @GetMapping("/demo")
    public String Demo(){
        return "前后交互json数据";
    }
}

上传数据

1，App.vue

<template>
  <div>
    <ul>
      <li v-for="(item, index) in jsonData" :key="index">{{ item.id }} - {{ item.name }} - {{ item.email }}</li>
    </ul>
  </div>

  <button @click="inputData">发送数据</button>
</template>

<script>
  import axios from 'axios';

  export default {
    name: 'MyComponent',
    data() {
      return {
        jsonData: []
      };
    },
    created() {
      // 使用axios发送GET请求来读取数据
      // { withCredentials: true } 是一个用于配置 XMLHttpRequest 对象的属性的选项。XMLHttpRequest 是在 JavaScript 中进行网络请求的常用对象，它可以发送 HTTP 请求到服务器并获取响应数据。
      //withCredentials: true 可以让跨域请求携带凭据信息，但同时需要确保服务器端的配置也支持接收并处理这些凭据信息。
      axios.get('http://localhost:8082/demo', { withCredentials: true })
        .then(response => {
          // 处理获取到的JSON数据
          this.jsonData = response.data;
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    },
    methods:{
      inputData(){
        // 模拟发送的数据
        const jsonData={
          name: '张三',
          sex:'男',
          age:19,
          email:'1121212@121',
          phone:'1212121212'
        };


        // 发送post请求
        axios.post('http://localhost:8082/api/sendData',jsonData,{
          headers:{
            'Content-Type':'application/json'
          }
        })
        .then(response =>{
          console.log(response.data);//发送的数据在控制台中打印
        })
        .catch(error =>{
          console.error(error)
          }
        )
      }
    }
  };
</script>

3, 控制器

package com.ke.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api")
public class MyController {

    @PostMapping("/endpoint")
    public ResponseEntity<String> handlePostRequest(@RequestBody String json) {
        // 在控制台打印接收到的 JSON 数据
        System.out.println("接受的数据"+json);
        // 返回响应
        return new ResponseEntity<>("Received JSON data: " + json, HttpStatus.OK);
    }
}

到了这里，关于前端框架Vue的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

前端框架Vue

Vue

学习路线

介绍

特点

渐进式框架

MVVM模式

搭建Vue开发环境

第一个程序

Vue常见的属性

指令模式

v-bind

v-model

v-if / v-else

v-for

v-once

v-on

v-show

组件

Axios

计算属性

插槽Slot

vue-cli

主要功能

环境准备

安装Node.js淘宝镜像加速器（cnpm）

安装vue-cli

第一个vue-cli

初始化并运行

项目目录解析

第一个案例

分析：

编写：

主入口调用

超链接

安装vue-router

src/router下创建index.js文件

main.js中导入路由地址

App.vue

StudentList.vue

StudentAdd.vue

表格数据

1,安装Element UI：

2,在src/main.js中引入Element UI,

3,在src/components目录下创建一个名为DataTable.vue的文件

4,在src/App.vue中引入并使用DataTable

弹出框

ModelMessage.vue

TestMessage.vue

App.vue

读取json数据

1，安装axios

2,App.vue

3, 后端Cors配置类

4，后端Controller控制器类

上传数据

1，App.vue

3, 控制器

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2