vue的简单使用

yt字不同

已于 2024-07-02 11:03:33 修改

阅读量809

点赞数 30

文章标签： vue.js 前端 javascript

于 2024-06-29 22:55:10 首次发布

本文链接：https://blog.csdn.net/m0_68599156/article/details/140070725

版权

vueの简单使用：）

什么是vue？
vueの简单使用
vue的常见指令
vue案例
vue的生命周期

什么是vue？

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MWVM(Model-View-ViewModel)思想，实现数据的双向绑定（这个双向绑定一会儿看操作就行

在 MVVM 模式中，各个组件的作用如下：

Model（模型）：
- Model 代表应用程序的数据层，包括数据和业务逻辑。
- 它通常负责管理应用程序的状态和规则，不直接与用户界面交互。
View（视图）：
- View 是用户界面的一部分，它负责展示数据给用户，并接收用户的输入。
- 在 Vue.js 中，视图通常是通过 HTML、CSS 和 Vue 的模板语法来构建的。
ViewModel（视图模型）：
- ViewModel 是 MVVM 模式的核心，它作为 Model 和 View 之间的桥梁。
- 它负责从 Model 中获取数据，并将其转换为 View 可以展示的形式。
- ViewModel 也负责监听 View 上的用户操作，并相应地更新 Model。
- 在 Vue.js 中，ViewModel 通常是通过实例化 Vue 对象来创建的，其中定义了数据（data）、方法（methods）、计算属性（computed）和侦听器（watchers）等。

MVVM 模式的关键特性是数据绑定和双向绑定。在 Vue.js 中，这意味着当 Model 的状态发生变化时，ViewModel 会自动更新 View，反之亦然。这种绑定减少了开发者需要编写的大量样板代码，使得开发者可以专注于业务逻辑，而不是如何将数据同步到界面上。
例如，在 Vue.js 中，你可以使用 v-model 指令来实现表单输入和应用状态之间的双向绑定。当用户在输入框中输入内容时，ViewModel 会自动更新对应的数据，而不需要开发者手动编写事件监听器和数据更新的代码。
MVVM 模式通过分离关注点，提高了代码的可维护性和可测试性。它也使得前端应用程序的结构更加清晰，便于团队协作和项目规模的扩展。

vueの简单使用

1.首先要引入vue.js文件()：
搞个vue.js文件先（去vue官网搞个：https://v2.vuejs.org/js/vue.min.js）
在这里插入图片描述

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

2.在js代码区域，创建vue的核心对象，定义数据模型：

<script>
    //定义vue对象
    new Vue({
        el: "#app", //vue的接管区域：id为app的区域
        data: {	//这个里面就是数据模型
            message: "ytnb"
        }
    })
</script>

3.编写html（也就是视图）

<body>
    <div id="app">  
    <!-- 对应了vue对象中的"#app" -->
        <input type="text" v-model="message">   
        <!-- v-model 绑定了 <input> 元素到 Vue 实例的 message 数据属性-->
        {{message}}  
        <!-- {{ message }} 插值表达式将 Vue 实例的 message 属性的值渲染到 <input>后面那里 -->
        
    </div>
</body>

总代码如下：

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

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

<body>
    <div id="app">  <!-- 对应了vue对象中的"#app" -->
        <input type="text" v-model="message">   <!-- v-model 绑定了 <input> 元素到 Vue 实例的 message 数据属性-->
        {{message}}  <!-- {{ message }} 插值表达式将 Vue 实例的 message 属性的值渲染到 <input>后面那里 -->
        
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el: "#app", //vue的接管区域：id为app的区域
        data: {
            message: "ytnb"
        }
    })
</script>

</html>

然后跑一下：
在这里插入图片描述
这时候，如果我们更改输入框里面的“ytnb”，那后面也会跟着更改：

在这里插入图片描述
这就体现了双向数据绑定，因为实际上它们显示的都是同一个massage，所以更改一个，那另一个也会变

vue的常见指令

指令	作用
`v-bind`	为HTML标签绑定属性值，如设置 `href`，CSS样式等
`v-model`	在表单元素上创建双向数据绑定
`v-on`	为HTML标签绑定事件
`v-if`	条件性的渲染某元素，判定为 `true` 时渲染，否则不渲染
`v-else-if`	条件性的渲染某元素，前一个 `v-if` 或 `v-else-if` 判定为 `false` 时渲染
`v-else`	当 `v-if` 或 `v-else-if` 判定为 `false` 时渲染
`v-show`	根据条件展示某元素，区别在于切换的是 `display` 属性的值
`v-for`	列表渲染，遍历容器的元素或者对象的属性

`v-bind`和 `v-model` 的简单使用

指令	作用
`v-bind`	为HTML标签绑定属性值，如设置 `href`，CSS样式等
`v-model`	在表单元素上创建双向数据绑定

1.引入vue.js

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

2.创建vue对象

<script>
    //定义vue对象
    new Vue({
        el: "#app", //vue的接管区域：id为app的区域
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

3.编写html（也就是视图）

<body>
    <div id="app">
        <a v-bind:href="url">隐痛牛逼</a> <br>
        <!-- 上下这两行是一样的效果 -->
        <a :href="url">隐痛牛逼</a> <br>
        <input type="text" v-model="url">
    </div>
</body>

总体如下

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

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

<body>
    <div id="app">
        <a v-bind:href="url">隐痛牛逼</a> <br>
        <!-- 上下这两行是一样的效果 -->
        <a :href="url">隐痛牛逼</a> <br>
        <input type="text" v-model="url">
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el: "#app", //vue的接管区域：id为app的区域
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

</html>

那我们跑一下看看效果：
在这里插入图片描述
那么我们点超链接，就会跳转到百度
好玩的来了
那么我们如果修改输入框里面的网址呢？

鼠标放在超链接上就发现他的目标网址已经变成b站了

这就是双向数据绑定！！！

v-if 和v-show的简单使用

指令	作用
`v-if`	条件性的渲染某元素，判定为 `true` 时渲染，否则不渲染
`v-else-if`	条件性的渲染某元素，前一个 `v-if` 或 `v-else-if` 判定为 `false` 时渲染
`v-else`	当 `v-if` 或 `v-else-if` 判定为 `false` 时渲染
`v-show`	根据条件展示某元素，区别在于切换的是 `display` 属性的值

实际上在前端的展示方面，v-if 和v-show没啥大区别，主要是这俩的实现的原理和性能不太一样

渲染机制：
- v-if：当条件为 false 时，元素及其所有子元素都不会被渲染到 DOM 中。条件变为 true 时，元素才会被创建并插入到 DOM 中。这意味着 v-if 会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-show：无论条件是否为 true，元素始终被渲染并保留在 DOM 中。v-show 只是通过切换 CSS 的 display 属性来显示或隐藏元素。条件为 false 时，元素会被赋予 display: none 样式，使其不可见。
性能开销：
- v-if：因为它是“真正”的条件渲染，有更高的切换开销。如果条件频繁变更，可能会导致性能问题。
- v-show：由于元素始终在 DOM 中，切换开销较低，适合频繁切换的场景。

开始实践！

<script>
    new Vue({
        el:"#app",
        data:{
            age:23333
        },
        methods: {
            
        },
    })
</script>

<body>
    <div id="app">

        年龄<input type="text" v-model="age"><br>
        经过判定，你是一个<br>
        <span v-if=" age <= 35">小登（35岁以下）</span>
        <span v-else-if="age>35 && age<=60">中登（35岁-60岁）</span>
        <span v-else>老登（60岁以上）</span>
        <br><br>

        年龄<input type="text" v-model="age"><br>
        经过判定，你是一个<br>
        <span v-show=" age <= 35">小登（35岁以下）</span>
        <span v-show="age > 35 && age <=60">中登（35岁-60岁）</span>
        <span v-show="age > 60">老登（60岁以上）</span>
    </div>
</body>

跑一下看看

在这里插入图片描述

上下两坨没区别，说明v-if 和v-show在显示方面是没区别的
那我们修改一下年龄试试

在这里插入图片描述
我们f12打开控制台瞅瞅：

说明这俩的原理是不一样的

v-for的简单使用

指令	作用
`v-for`	列表渲染，遍历容器的元素或者对象的属性

代码如下：

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

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

</head>

<body>
<div id="app">
    <div v-for="location in locations">{{location}}</div>
    <br>
    <div v-for="(location, index) in locations" >{{index}}:{{location}}</div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            locations: ["德玛西亚", "弗雷尔卓德", "圣安地列斯", "洛圣都"]
        },
        methods: {

        },
    })
</script>

</html>

注意以下的对应哦
在这里插入图片描述
跑一下：

vue案例

要求：
数据模型如下：

    data : {
            users:[{
                name:"tom",
                age : 20,
                gender : 1,
                score : 78
            },{
                name:"james",
                age : 40,
                gender : 1,
                score : 86
            },{
                name:"curry",
                age : 35,
                gender : 1,
                score : 90
            },{
                name:"Weili",
                age : 34,
                gender : 2,
                score : 50
            }]
        }

（gender == 1 ：男，gender ==2 ：女）
（score >= 85 : 优秀， score >= 60 ：及格，否则：不及格）
要求呈现一个表格如图：
在这里插入图片描述

代码如下：

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

        <table border="1" cellspacing = "0"  width ="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user, index) in users" >
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">man!</span>
                    <span v-if="user.gender == 2">woman!</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >=85 ">nice!</span>
                    <span v-else-if="user.score >=60 ">not bad!</span>
                    <span style="color: red;" v-else >挂科了啊兄弟</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data : {
            users:[{
                name:"tom",
                age : 20,
                gender : 1,
                score : 78
            },{
                name:"james",
                age : 40,
                gender : 1,
                score : 86
            },{
                name:"curry",
                age : 35,
                gender : 1,
                score : 90
            },{
                name:"Weili",
                age : 34,
                gender : 2,
                score : 50
            }]
        }

    })
</script>
</html>

vue的生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

阶段周期	Vue生命周期函数
创建前	beforeCreate
创建后	created
挂载前	beforeMount
挂载完成	mounted
更新前	beforeUpdate
更新后	updated
销毁前	beforeDestroy
销毁后	destroyed

其中mounted这个周期比较重要
mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
(发送请求到服务端，加载数据)
可以利用这个mounted的钩子来操作，代码如下：

    new Vue({
        el: "#app",
        data: {
            locations: ["德玛西亚", "弗雷尔卓德", "圣安地列斯", "洛圣都"]
        },
        methods: {
        },mounted() {
            alert("vue挂载完成！发送请求到服务端")
        },
    })