Web系列——Vue

最新推荐文章于 2024-07-30 11:44:54 发布

Vigoroushui

最新推荐文章于 2024-07-30 11:44:54 发布

阅读量551

点赞数

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

本文链接：https://blog.csdn.net/qq_37654889/article/details/111936626

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面：查阅「Vue官方网站」(Vue)是学习这个渐进式框架的推荐途径，很多想要搜寻的答案能在里面找到。本文记录Vue中的常用指令以及一个Vue简单案例的实现。

1. Vue的简介

Vue是一套用于构建用户界面的渐进式框架，尤雨溪是Vue.js框架的作者。学习Vue需要了解关于 HTML、CSS 和 JavaScript 的相关知识，只有当基础打牢后，Vue才能助力前端开发更上一层楼。

Vue具有如下特点：

JavaScript框架：可以独立完成前后端分离式Web项目的渐进式JavaScript框架
简化DOM操作：以虚拟DOM为代表，Vue提供动态绑定等功能的一个框架，把程序员从复杂繁琐的DOM操作中解放出来
响应式数据驱动：视图是由数据驱动⽣成的，程序员可以通过修改数据从而使视图自动更新，而不会直接操作 DOM

此外，Vue采用MVVM模式的软件架构开发模式，关于MVVM的详细介绍可以参考一篇博文：什么是MVVM模式?。

2. Vue常用指令

指令 (Directives) 是指以v-开头，作用于HTML的标签，它能够提供一些特殊的特性：当指令被绑定到HTML元素时，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成HTML的一种特殊属性。

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

插值表达式：标签将会被替代为对应数据对象上属性的值，形如{{vigoroushui}}
- 作用：使用Vue中的数据来替代HTML中的内容
- 内容： Vue对象data中的数据或者一些数学运算（三元运算符），注意不能写语句
- 生效范围 : Vue对象接管的范围内，超出范围不会生效，不会被解析
el挂载注意点：
- 一次选择多个标签的选择器，插值表达式只有第一个被解析
- el挂载点选中的标签，其子标签使用插值表达式也能被解析
- html标签和body标签尽量不要被Vue对象接管，因为这两个标签被挂载后插值表达式不会被解析
文本设置：
- v-text ：只用于设置文本内容，且会更新整个标签中的内容
- v-html：除文本内容外，可以渲染HTML中的标签，注意尽量避免使用，因为会受到XSS跨站脚本攻击
判断是否渲染标签：
- v-if ：若为false，则将标签从 DOM 树中移除
- v-show：将标签设置属性隐藏，本质是通过修改标签的display值
- 两者的比较：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show较好；如果在运行时条件很少改变，则使用v-if较好。
v-on事件绑定：
- 作用：用于绑定DOM事件，并在事件被触发时执行对应的JavaScript代码
- 语法: @事件名.修饰符 = “methods中的方法名” ，注意，方法可以传形参
- 修饰符：
```

<button v-on:click="add">
<button @click="sub">
```
- keydown.别名：按键（事件）触发

v-for：根据一组数组或对象的选项列表进行渲染，采用插值表达式接列表中的内容

语法：

<!--
v-for="元素 in 容器(数组和对象)"
v-for="数组中的元素 in data中的数组名"
v-for="对象中的属性值 in data中的对象名"
-->
<h1 v-for="item in items"> {{item}}</h1>
<h1 v-for="(element, index) in arr"> {{element}}</h1>
<h1 v-for="(value, key, index) in Student"> {{value}}</h1>

注意点： key属性，通常是一个唯一的标识，它是一个可选属，建议在写v-for时设置：key="唯一值"

v-bind：绑定标签上的任何属性

绑定src和alt属性：alt代表当图像无法显示时的替代文字

<img :src="imgUrl" v-bind:alt="alt" >
格式1:      v-bind:属性名="data中的值"
简化格式:   :属性名="data中的值"
对象语法:   v-bind:属性名="{属性名:data中的值}"
数组语法:   v-bind:属性名="[data中值1,data中值2...]"

绑定class类名

<div v-bind:class="{active: isActive}"></div> 
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}"></div>

v-model：获取和设置表单元素的值
- 特点: 双向数据绑定（数据发生变化可以更新到界面，同时通过界面可以更改数据）
- DOM对象绑定到模型数据、模型数据绑定到DOM对象

3. Vue的相关案例

本部分给出我对简易购物车的实现思路，案例的渲染速度有待优化，案例只是实现了功能，仅供参考。

先展示一份效果图：
在这里插入图片描述

案例描述：

点击购买+则数量增加，总价格随之改变
当书本数量为1时，则不能继续减少
点击移除即可删除该行，总价格随之改变
使用Vue + HTML 实现该案例

实现思路：

引入Vue.js
构建Vue对象，其中包括el（挂载），data（数据），methods（增、减、移除按钮的实现函数），computed（计算价格函数）
逐行构建表格，涉及知识点：v-for、v-bind
采用内部样式表描述样式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车演示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
    <!-- CSS的内部样式表 -->
    <style>
    table{
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .context{
        padding: 10px 20px;
        border: 1px solid #e9e9e9;
        text-align: center;
    }
    .title{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 500;
    }
    .display{
        position: relative;
        left: 410px;
    }
    </style>
<body>
    <div id="cart">
        <table border="1px" width="50%" cellspacing="0" align="center">
            <!-- 设置表格的第一行 -->
            <tr class="title" align="center">
                <td></td>
                <td>书籍名称</td>
                <td>出版日期</td>
                <td>价格</td>
                <td>购买数量</td>
                <td>操作</td>
            </tr>
            <!-- 配合Vue 编辑表格的主体内容 -->
            <tr v-for="(book, index) in Books" class="context" align="center">
                <td>{{index+1}}</td>
                <td>{{book.bookName}}</td>
                <td>{{book.publishDate}}</td>
                <td>¥{{book.price|showPrice}}</td>
                <td> 
                    <!-- 以”按钮 内容 按钮“的思路实现该部分-->
                    <!-- v-bind实现如果书本数量为1则不能减少-->
                    <input type="button" value="-" @click="decrease(index)" v-bind:disabled="book.count===0">
                    {{book.count}}
                    <input type="button" value="+" @click="increase(index)">
                </td>
                <td>
                    <input type="button" value="移除" @click="removeBook(index)">
                </td>
            </tr>      
        </table> 
        <!-- 用div的相对定位来将总价格固定在表格正下方 -->
        <div class="display">
            <!-- 在2级标题下使用一个计算函数 -->
            <h2>总价格:¥ {{totalPrice|showPrice}}</h1>
        </div> 
    </div>
    
</body>
<script>
    var obj = new Vue({
        el: "#cart",
        data: {
            Price: 0,
            Books:[
                {bookName:"《医学大神14册：现代医学史诗》", publishDate:"2019-9", price:378.00, count:1},
                {bookName:"《机器学习》", publishDate:"2016-1", price:88.00, count:1},
                {bookName:"《Hadoop权威指南》", publishDate:"2019-10", price:59.00, count:1},
                {bookName:"《Linux/Unix系统编程手册》", publishDate:"2014-1", price:158.00, count:1}
            ]
        },
        methods: {
            increase: function(index) {
                this.Books[index].count++;
            },
            decrease: function(index) {
                this.Books[index].count--;
            },
            removeBook: function(index) {
                this.Books.splice(index,1);
            }
        },
        computed: {
            totalPrice: function() {
                let price = 0;
                for (let i in this.Books) {
                    price += this.Books[i].price * this.Books[i].count;
                }
                return price;
            }
        },
        filters:{
            showPrice(price){
                return price.toFixed(2)
            }
        }
    })
</script>
</html>