vue入门

发布于：2025-05-01 ⋅ 阅读:(22) ⋅ 点赞:(0)

Vue入门

目录:

  1. 导入
  2. 快速入门
    • 什么是Vue
    • 为什么要学Vue
    • 面试题：Vue的特定
    • Vue要学习什么
  3. Vue常用指令
    • 指令介绍
    • 表单绑定
    • 文本插值
    • 绑定属性
    • 条件渲染
    • 列表渲染
    • 事件绑定
    • 总结

0.导入

0.1什么是Vue

Vue.js，通常称为Vue，是一个用于构建用户界面的渐进式JavaScript框架。Vue的设计目标是通过简单的API实现响应式的数据绑定和组合的视图组件。它的核心库专注于视图层，易于学习且易于与其他库或现有项目集成。同时，Vue也完全能够支持开发复杂的单页应用（SPA）。

0.2为什么要学Vue?

  1. 原生JS频繁的DOM操作，视图层和数据层混在一起，导致视图层渲染效率大大降低，代码可读性差。

    ​ Vue采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。

  2. Vue将数据和视图层分离。数据更新之后，视图会自动的刷新。

  3. 微信小程序等快应用，开发压缩包要求2M，脚本包越小越好！

  4. Vue渐进式的框架：意思就是你不需要学习完Vue的全部知识。

  5. 现在企业里主流，一线大厂面试必会技术栈！

MVVM  是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM  的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。
  • M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。
  • V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。
  • VM：ViewModel（视图模型）它是 View 和 Model 之间的连接层。ViewModel 处理用户界面上的事件和输入，并将它们转化为对 Model 的操作。它还负责从 Model 中获取数据，并将数据绑定到 View 中，使得数据的变化能够自动更新到用户界面上。

0.3面试题：vue特点

  1. 易用：在有HTMLCSSJavaScript的基础上，快速上手。
  2. 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  3. 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。
  4. 采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。
  5. 代码可读性高。视图和数据逻辑耦合性低。

0.4 Vue要学习什么

  1. 了解Vue。
  2. 快速入门Vue，熟练的用Vue对象，操作属性和数据。
  3. 掌握Vue常用指令，并熟练用指令写一些案例。
  4. 掌握Element的基本使用，熟悉Element官网插件和样式，让我们的前端开发飞起来。
  5. 掌握用Element布局，编写学生列表网页综合案例。

1.快速入门

Vue的使用可以分为三步：

1.新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2.编写视图，创建带有id属性的标签

<div id="app">
   <input name="username" v-model="username" >
    {{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

3.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el: "#app",
    data:{
       username: ""
    }，
    methods:{}
});

  1. 创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

    • el ： 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值

  • data ：用来定义数据模型

    • methods ：用来定义函数。这个我们在后面就会用到

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//2.编写视图，创建带有id属性的标签
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
//1.新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></script>
<script>
    //3. 创建Vue核心对象,进行数据绑定
    new Vue({
        el:"#app",
        data{  // data() 是 ECMAScript 6 版本的新的写法
            return {
                username:""
            }
        }
    });

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

2.Vue 常用指令

2.1 指令介绍

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
  • 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
  • 常用指令
指令						作用
v-html					把文本解析为HTML代码
v-bind					为HTML标签绑定属性值
v-if					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else 					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else-if				条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-show					根据条件展示某元素，区别在于切换的是display属性的值
v-for					列表渲染，办理容器的元素或者对象的属性
v-on					为HTML标签绑定事件
v-model					在表单元素上创建双向数据绑定

2.2 表单绑定

  • 表单绑定

    v-model：在表单元素上创建双向数据绑定。

  • 双向数据绑定

    更新data数据，页面中的数据也会更新。
    更新页面数据，data数据也会更新。

  • MVVM模型(ModelViewViewModel)：是MVC模式的改进版

    在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
    将Model和View关联起来的就是ViewModel，它是桥梁。
    ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

image-20250424122631340

2.3 文本插值

  • v-html：把文本解析为 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>"
        }
    });
</script>
</html>

效果：

<b>Hello Vue</b>
Hello Vue(有加粗效果)

2.4绑定属性

  • v-bind：为 HTML 标签绑定属性值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</script>
</html>

效果：

image-20250424121115600

2.5 条件渲染

  • v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。

  • v-else：条件性的渲染。

  • v-else-if：条件性的渲染。

  • v-show：根据条件展示某元素，区别在于切换的是display属性的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>

        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>
</html>

2.6 列表渲染

  • v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</script>
</html>

效果：

image-20250424121415770

2.7 事件绑定

  • v-on：为 HTML 标签绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"山东高合"
        },
        methods:{
            change(){
                this.name = "合齐天下"
            }
        }
    });
</script>
</html>

绑定事件：

  1. @mouseenter=“enter(index)” 鼠标移入
  2. @mouseleave="leave()"鼠标移出
  3. @focus 获得焦点
  4. @blur失去焦点
  5. @keyupj键盘键入
  6. …

注意：

  1. 小伙伴们，注意v-on:click="change()"与@click="change()"都是指绑定事件哟~
  2. :class=“cla” 和 v-bind:class=“cla” 都是指绑定属性呦~

2.8 总结

  • 指令：是带有v-前缀的特殊属性，不同指令具有不同含义。

  • 文本插值
    v-html：把文本解析为HTML代码。

  • 绑定属性
    v-bind：为HTML标签绑定属性值。

    :属性

  • 条件渲染
    v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
    v-else：条件性的渲染。
    v-else-if：条件性的渲染。
    v-show：根据条件展示某元素，区别在于切换的是display属性的值。

  • 列表渲染
    v-for：列表渲染，遍历容器的元素或者对象的属性。

  • 事件绑定
    v-on：为HTML标签绑定事件。

    @click

  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。

  • M V VM模型

扩充

面试题：mvc和mvvm的区别和应用场景

答：MVC 是 Model View Controller 的缩写

Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

View：视图层，用户界面渲染w图是依据模型数据创建的。

Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。

**MVC的特点：**实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC的优点：

耦合度低，视图层和业务层分离
重用度高
生命周期成本低
可维护性高
部署快
MVC的缺点：

不适合小型项目的开发（架构分层复杂）
**MVC的应用：**主要用于中大型项目的分层开发。

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

Model：模型，指的是后端传递的数据。
View：视图，指的是所看到的页面。
ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑

MVVM的优点：

MVVM模式的主要目的是分离页面视图（View）和页面模型（Model）。

3. vue生命周期和钩子函数

3.1 什么是生命周期

  • 一个Vue实例从开始创建一直到销毁的整个过程，称之为生命周期。
  • Vue框架的内置函数，随着组件的生命周期阶段的不同，会自动执行的函数，并且在特定的阶段做某件事，只需要调用相应的钩子函数即可。
  • ​ 我们可以通过使用生命周期（钩子）函数来判断Vue生命周期到达了什么阶段。

3.2 什么是生命周期钩子

  • 生命周期分为4个阶段，8个方法。Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者在特定的阶段可以运行自己的代码。
  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
image-20250425121920593
  • vue对象创建前、后
  • 挂载功能。先挂载标签元素、在挂载功能
  • 更新。先更新数据层、把数据同步到渲染层
  • 销毁

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

Vue生命周期到达了什么阶段。

3.2 什么是生命周期钩子

  • 生命周期分为4个阶段，8个方法。Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者在特定的阶段可以运行自己的代码。
  • 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
image-20250425121920593
  • vue对象创建前、后
  • 挂载功能。先挂载标签元素、在挂载功能
  • 更新。先更新数据层、把数据同步到渲染层
  • 销毁

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

[外链图片转存中…(img-aXJhUKGX-1745572616209)]

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布