Vue-快速入门

Bro_cat

于 2024-10-06 17:18:22 发布

阅读量528

点赞数 5

分类专栏： Web前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Broken_x/article/details/142724675

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是Vue

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。与其他重型框架不同，Vue的设计理念强调自底向上的增量开发，核心库专注于视图层，易于逐步引入到现有项目中。Vue允许开发者使用声明式的模板语法，有效地管理数据和界面之间的关系。它不仅适合于单页应用（SPA），也能够用于更复杂的企业级应用。

Vue的主要特点包括：

响应性：Vue能够自动追踪所有依赖于数据的状态，当这些状态变化时，会自动更新界面。
组件化：开发者可以将应用拆分成多个组件，每个组件拥有自己的模板、逻辑和样式，便于维护和复用。
渐进式框架：Vue能够与其他库或现有项目无缝集成，提供灵活的使用方式。

Vue-引入方式

Vue可以通过多种方式引入项目中。以下是两种常用的引入方式：

1.通过CDN引入：这是最简单的方式之一，适合小型项目或逐步增强的应用。只需在HTML文件中添加以下 <script> 标签即可使用Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过这种方式使用时，所有Vue顶层API都将挂载到全局的Vue对象上，可以直接调用。

2.使用Vue CLI创建项目：对于较复杂的应用，推荐使用Vue CLI来创建项目。这将为您提供完整的开发环境和构建工具。以下命令将创建一个新项目：

npm install -g @vue/cli
vue create my-project

运行该命令后，CLI将指导您完成项目配置过程，包括选择需要的功能，如TypeScript支持、路由、状态管理等

可以去Vue官网来根据知道创建项目 Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue-指令

Vue中的指令是以 v- 开头的特殊属性，主要用于在DOM上进行行动。下面是一些常见的Vue指令：

v-bind ,v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue常用指令</title>
    <script src="JS/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <a v-bind:href="url" target="_blank"> 百度一下1</a>
        <a :href="url"> 百度一下2</a>

        <input type="text" v-model="url">

    </div>

     <!-- v-bind   v-model  -->

    
    <script>

        new Vue({
            el: '#app',
            data: {
                url: 'https://www.baidu.com'
            }
        })
    </script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令_v-on</title>
    <script src="JS/vue.min.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="按钮1" v-on:click="handleClick" >
        <input type="button"value="按钮2" v-on:click="handleClick" >

    </div>



    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                handleClick: function() {
                    alert(this.message)
                }
        }})
    
    </script>
    
</body>
</html>

v-if,v-else-if,v-else,v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令_v-if和v-show</title>
    <script src="JS/vue.min.js"></script>
</head>
<body>
    <div id="app">

        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age <= 50">中年人(35-50)</span>
        <span v-else>老年人(50及以上)</span>

        <br>

        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age <= 50">中年人(35-50)</span>
        <span v-show>老年人(50及以上)</span>

        <br>



    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                age:20
            },
            methods: {
                changeShow() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令_v-for</title>
    <script src="JS/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="a in arr">{{a}}</div>
        <hr>
        <div v-for="(value,index) in arr">{{index}}:{{value}}</div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                arr:['北京','上海','广州','深圳','杭州']    
                
            },
            methods: {
            },
        })

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

Vue-生命周期

Vue组件有一系列的生命周期钩子（方法），这些钩子在组件实例的不同阶段被调用。以下是常见的生命周期钩子,每个生命周期都有与之对应的方法，每次创建一个Vue对象时，都会自动调用这些方法……

这些生命周期钩子使得开发者可以在组件的不同阶段执行特定的操作，增强了组件的功能和可维护性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期</title>
    <script src="JS/vue.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            mounted () {
                alert('Vue组件已挂载')
            }
        })
    </script>
    
</body>
</html>