Vue 前端框架

最新推荐文章于 2024-06-01 09:24:06 发布

你是个什么橙

最新推荐文章于 2024-06-01 09:24:06 发布

阅读量137

点赞数

文章标签：前端框架 vue.js 前端

本文链接：https://blog.csdn.net/Cupid_kl/article/details/133635113

版权

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于 MVVM 思想，实现数据的双向绑定，将编程的关注点放在数据上。

MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：

Model: 数据模型，特指前端中通过请求从后台获取的数据。
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据。
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上。

如图所示就是MVVM开发思想的含义：
在这里插入图片描述

1. 简单入门

编写<script>标签来引入vue.js文件，代码如下：

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

在js代码区域定义vue对象,代码如下：

<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
 }
 })
</script>

在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上：

<body>
<div id="app">
<input type="text" v-model="message">
 {{message}}
</div>
</body>

在创建vue对象时，有几个常用的属性：
el: 用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值。
data: 用来定义数据模型。
methods: 用来定义函数。

插值表达式：
形式：{{表达式}}
内容：变量、三元运算符、函数调用、算术运算

在这里插入图片描述

<!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.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}

    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data: {
        message:"hello vue"
       }
    })
</script>
</html>

2. Vue常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在这里插入图片描述
v-bind： 为HTML标签绑定属性值，如设置href，css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。

<a v-bind:href="url">链接</a>
//v-bind指令是可以省略的，但是:不能省略
<a :href="url">链接</a>

v-model： 在表单元素上创建双向数据绑定
在这里插入图片描述

v-on： 为HTML标签绑定事件。需要注意的是如下2点：
v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on
例如：在js中，事件绑定demo函数：<input onclick="demo()">
vue中，事件绑定demo函数：通过v-on指令绑定单击事件，例如：<input v-on:click="demo()"> ；v-on也存在简写方式，即v-on: 可以替换成@：<input @click="demo()">
在这里插入图片描述

v-if 和 v-show：
在这里插入图片描述

v-show和v-if的作用效果是一样的，只是原理不一样。复制上述html代码，修改v-if指令为v-show指令，代码如下：

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

浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
 {{变量名}}
</标签>


<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
 {{索引变量 + 1}} {{变量名}}
</标签>

在这里插入图片描述

3. 案例

需求：
在这里插入图片描述
如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

<!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.js"></script>
    <style>
        td {
                text-align: center; 
            }
    </style>
</head>
<body>
    <div id="app">
        <table border="1px" cellspacing="0" width="600px" align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr v-for="(item, index) in users">
                <td>{{index + 1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><span v-if="item.gender==1">男</span>
                <span v-if="item.gender==0">女</span>
                </td>
                <td>{{item.score}}</td>
                <td>
                    <span v-if="item.score > 80">优秀</span>
                    <span v-else-if="item.score < 80 && item.score > 60">及格</span>
                    <span v-else-if="item.score < 80" >不及格</span>
                </td>
            </tr>

        </table>


    </div>
    
</body>

<script>
    new Vue({
        el:"#app",
        data: {
            users:[
                {
                    name:"Tom",
                    age:20,
                    gender:1,
                    score:78
                },
                {
                    name:"Rose",
                    age:18,
                    gender:0,
                    score:86
                },
                {
                    name:"Jerry",
                    age:26,
                    gender:1,
                    score:90
                },
                {
                    name:"Tony",
                    age:30,
                    gender:1,
                    score:52
                }

            ]
        }
        
    })
</script>
</html>

在这里插入图片描述
得到的结果是：