Vue 前端开发

Vue前端开发基础

uptime year

4013人浏览 · 2023-03-14 14:00:24

uptime year · 2023-03-14 14:00:24 发布

Vue介绍

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任

官网：https://v3.cn.vuejs.org/

Vue 优点

响应式的数据绑定：当数据发生改变，视图可以自动更新，不用关心DOM操作，而专心数据操作

可组合的视图组件：把视图按照功能切分成若干基本单元，可维护、可重用、可测试等

使用Vue的四种方式：

在HTML中以CDN包形式导入

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

2 下载js文件保存至本地再导入

<script src="/存储路径/vue.global.js"></script>

3使用npm安装 4使用官方VueCli脚手架构建项目（不建议新手直接用）

使用参考文档https://cn.vuejs.org/guide/quick-start.html

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ message }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    message: "hello Vue"  //变量名和对应值
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ counter }} <!--引用变量-->
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            },
            // 打开页面执行的函数
            mounted() {
                setInterval(()=> { //周期性执行递加
                    this.counter++
                },1000)
            }
        };
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层组件实例的数据。所有VUE,js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。

数据绑定的常见形式就是使用"双大括号"语法在HTML中插入文本：

<span>Message:{{msg}}</span>

{{msg}}将被替代对应组件实例中msg属性的值。无论何时，绑定的组件实例上msg属性发生改变，插值处内容都会更新

常用指令

指令是指V-前缀的特殊属性，它的作用是当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM

v-text

v-text的效果与{{}}的效果一样，将数据填充到标签中，但是没有闪烁问题！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p v-text="msg"></p>
        <p>{{ msg }}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-html

在某些情况下，从服务端请求的数据本身就是一个HTML代码，如果使用{{}}会将将数据解析为普通文本而非HTML代码，为输出真正的HTML，就需要使用v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        {{ msg }}<br>
        <span v-html="msg"></span>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "<span style='color: red'>Hello Vue!</span>"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-bind

用于动态绑定一个或者多个属性值，或者向另一个组件传递props值

应用场景：图片地址src、超链接herf、动态绑定一些类、样式等

v-bind 指令接受一个参数，以冒号分隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <a v-bind:href="url">百度</a>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    url: "https://www.baidu.com"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-bind: 绑定Class

操作元素标签的class和style属性是数据绑定的一个常见需求

例如希望动态切换class，为div显示不同背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
        .active {
            background: orange;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:class="{active: isActive}" class="test"> <!--active这个class存在与否取决于数据属性isActive-->
        </div>
        <button type="button" @click="btn">增加样式</button>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    isActive: false  //变量名和对应值
                }
            },
            methods: {
                btn() {
                    // this.isActive = True;
                    // 实现动态切换
                    if (this.isActive) {
                        this.isActive = false
                    } else {
                        this.isActive = true
                    }
                    
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-bind 绑定style

v-bind:style语法非常像css,但其实是一个JavaScript对象。css属性名可以用驼峰式或短横线分隔（kebab-case,记得用引号括起来）命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
    <style>
        .test {
            width: 200px;
            height: 200px;
            background: grey;
        }
    </style>
</head>
<body>
    <div id="hello-vue">
        <div v-bind:style="styleObject" class="test">
            Hello Vue!
        </div>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    styleObject: {
                        background: 'orange',  //变量名和对应值
                        fontSize: '24'
                    }
                }
            }
        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

v-on

在前端开发中，经常监听用户发生的事件，例如点击、拖拽、键盘事件等，这个时候就需要使用v-on

v-on: 冒号后面是even参数，例如click、change

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <p>点击次数: {{ counter }}</p>
        <button type="button" v-on:click="counter++">按钮</button>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    counter: 0  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

指令缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind缩写

 <!-- 完整语法 -->
<a v-bind:href="url"> ... </a>
<!-- 缩写 -->
<a :href="url"> ... </a>
<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

常用指令之流程控制

v-if

判断一个元素是否显示

通过seen值的真假来插入/移除元素。

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: true
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

多分支

 <div id="hello-vue">
        <div v-if="type === 1">
            方式1
        </div>
        <div v-if="type === 2">
            方式2
        </div>
        <div v-else="type === 3">
            方式3
        </div>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     type: 2
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');
    </script>

v-show

与v-if不同的式，v-show的元素始终会被渲染并保留在DOM中，所以v-show只是简单的切换元素display CSS属性

<div id="hello-vue">
        <p v-if="seen">现在你能看到我</p>
        <p v-else>看不到</p>
        <p v-show="seen">看不到了</p>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     seen: false,

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for

基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，

其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名

// 循环数组
 <div id="hello-vue">
        <ul>
            <li v-for="(c,j) in myArray">
                {{ i }}-{{ c }}
            </li>
        </ul>

    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: [
                         '主机',
                         '键盘',
                         '鼠标'
                     ]

                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

v-for维护状态：

当Vue正在更新使用v-for渲染的元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并确保他们只在每个索引正确渲染。

为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有的元素，你需要为每项提供一个唯一的key属性

<div id="hello-vue">
        <ul>
            <li v-for="(v,k) in myArray" :key="k">
                {{ k }}-{{ v }}
            </li>
        </ul>
    </div>
    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     myArray: {
                         host: '主机',
                         displayer: '键盘',
                         keyboard: '鼠标'
                     }
                 }
             },
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-for 选择列表

获取用户选择并赋值另一个变量再实时展示：

 <div id="hello-vue">
        <select @change="selectComputer($event)">
            <option value="None">未选择</option>
            <option v-for="row in computer" :key="row.id" :value="row.id">
                {{ row.name }}
            </option>
        </select>
        <p>当前选择主机ID: {{ selectComputerId }}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     computer: [
                         {id:1 , name: '联想'},
                         {id:2 , name: '惠普'},
                         {id:3 , name: '华为'}
                     ],
                    selectComputerId: ""
                 }
             },
             methods: {
                 selectComputer(event){
                     console.log(event) //获取该事件的事件对象
                     this.selectComputerId = event.target.value; //获取事件的值
                     if (this.selectComputerId == "None") {
                         this.selectComputerId = "未选择！"
                     }
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

    </script>

v-model

双向数据绑定：当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会同步变化

v-model提供表单输入绑定，可以在<input>、<textarea>及<select>元素创建双向数据绑定

v-model指令其实是一个语法糖，背后本质上包含v-bind和v-on两个操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>

    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "Hello Vue!"  //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

单选

<div id="hello-vue">
        <input type="radio" name="go"  value="go" v-model="msg">go<br>
        <input type="radio" name="python" value="python" v-model="msg">python
        <p>选择: {{msg}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    msg: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

select多选框

<div id="hello-vue">
        <select v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="Go" >GO</option>
            <option value="Pytho" >Python</option>
            <option value="Php" >Php</option>
        </select>
        <p>选择: {{selected}}</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    selected: "" //变量名和对应值
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

登录示例

获取用户输入用户名和密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="hello-vue">
        <h1>欢迎登陆管理后台</h1>
        <from action="#">
            用户名: <input type="text" v-model="form.username"><br>
            密码: <input type="text" v-model="form.password"><br>
            <button @click="login">登录</button>
        </from>
        <p style="color: red" v-if="notice">用户名或者密码不能为空</p>
    </div>
    <script type="text/javascript">
        const  HelloVue = {
            data() {
                return {
                    form: {
                        username: '',
                        password: ''
                    },
                    notice: false
                }
            },
            methods: {
                login() {
                    if (this.form.username == '' || this.form.password == '') {
                        this.notice = true;
                    } else {
                        this.notice = false;
                        console.log(this.form) //获取输入用户名和密码提交服务端

                    }
                }
            }

        }
        Vue.createApp(HelloVue).mount("#hello-vue") //绑定元素
    </script>

</body>
</html>

常用指令总结

Vue 常用属性

数据属性

组件data选项是一个函数。Vue会在创建新组件实例的过程中调用此函数，它应该返回一个对象，然后Vue会通过响应系统将其包裹起来，并以$data的形式存储起来在组件实例中。为了方便起见，该对象的任何顶级属性，也会直接通过组件实例暴露

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
    </div>

    <script>
         const HelloVue = {
            // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!'
                 }
             },
             // 定义函数（方法）区域
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>

方法

在methods选项中定义的方法与data选项中的数据一样，可以在组件的模板中使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        {{msg}}
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     msg: 'Hello Vue!',
                     count: 1
                 }
             },
             // 定义函数（方法）区域
             methods: {
                 jia(){
                     this.count++
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

         console.log(vm.$data.msg)
         console.log(vm.msg)

         vm.msg = 'hello python!'
         console.log(vm.msg)
    </script>
</body>
</html>

计算属性

根据所依赖的数据动态显示新的计算结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>总分: {{sum}}</p> <!--双大括号js基本支持表达式-->
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     math: 60,
                     english: 70

                 }
             },
             // 定义计算属性（缓存）
             computed: {
                 sum: function() {
                     return this.math + this.english
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

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

监听属性

是一个观察动作，监听data数据变化后触发对应函数，函数有newValue（变化之后结果）和oldValue（变化之前结果）两个参数。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.global.js"></script>
    <title>测试</title>
</head>
<body>
    <div id="hello-vue">
        <p>{{count}}</p>
        <button @click="jia" type="button">递增</button>
        <p>监听新值: {{newValue}}, 旧值: {{oldValue}}</p>
    </div>

    <script>
         const HelloVue = {
             // 定义数据区域
             data() {
                 return {
                     count: 0,
                     newValue: '',
                     oldValue: '',

                 }
             },
             // 定义函数（方法）区域
             methods: {
                 jia(){
                     this.count++
                 }
             },
             // 定义监听属性（数据发生变化）
             watch: {
                 // 函数名称要与数据属性名称保持一致
                 count(newValue,oldValue){
                     console.log(newValue,oldValue)
                     this.newValue = newValue
                     this.oldValue = oldValue
                 }
             }
         };
         vm = Vue.createApp(HelloVue).mount('#hello-vue');

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

实例生命周期钩子

生命周期是指Vue实例从创建到销毁的过程。就是Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、卸载等一系列过程，在vue生命周期中提供了一系列的生命周期如下图

Vue Cli脚手架

Vue Cli是什么？

是一个基于Vue.js进行快速开发的完整系统提供：

1 通过@vue/cli实现的交互式的项目脚手架。

2 通过@vue/cli + @vue/cli-service-global实现的零配置原型开发。

3 一个运行时依赖(@vue/cli-service)，该依赖：

可升级；

基于webpack构建，并带有合理的默认配置；

可以通过项目内的配置文件进行配置；

可以通过插件进行扩展。

4 一个丰富的官方插件集合，集成了前端生态中最好的工具。

5 一套完全图形化的创建和管理vue.js项目中的用户界面

为什么要使用Vue脚手架？

如果使用Vue开发整个前端项目，自建Vue项目结构及配置比较复杂，例如各种js文件引入、打包上线等，因此为了提高开发效率，官方开发了VueCli脚手架快捷搭建开发环境。

了解NPM

Npm(Node Package Manager)，存放javaScript代码共享中心，是目前最大的JavaScript仓库。类似linux yum仓库。

使用Npm

安装Node.js，默认内置npm,下载地址http://nodejs.cn/download/

下载后配置淘宝npm国内仓库：

npm config set registry https://registry.npm.taobao.org --global npm config get registry

常用命令列表

脚手架使用

使用步骤：

1 安装： npm install -g @vue/cli

2 检查版本： vue -V

3 创建项目： vue create 项目名

4 运行项目，访问

项目目录介绍

Vue组件

介绍

Vue组件是一段独立的，能代表页面某一个部分的代码片段，拥有自己的独立数据、JavaScript脚本、以及CSS样式。

组件时可复用的Vue实例，在开发过程中可以经常把重复的功能，封装为组件，达到快捷快发的目的

使用组件的优点：

1 提高开发效率

2 方便重复使用

3 易于管理维护

文件格式

Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许讲Vue组件的模板，逻辑与样式封装在单个文件中。

Vue SFC是经典的HTML 、CSS与javaScript三个经典组合的自然延伸。每个*.vue文件由三种类型的顶层代码块组成：

<template>: 部分定义了组件的模板。

<template>
    <p class="greeting">{{ greeting }}</p>
</template>

<script>
    export default {
        data() {
            return {
                greeting: "hello world"
            }
        }
    }
</script>

<style>
    .greeting {
        color: red;
        font-weight: bold;
    }
</style>

使用

使用流程：

1、在src/components目录里开发一个组件文件(首字母大写)

2、在父组件里引用子组件import xxx from xxx

3、在默认导出里注册组件

4、在template模板使用组件

注册

使用模板时，这些组件必须先注册以便Vue能够识别。注册又分为两种方式：

全局注册：声明一次，在任何Vue文件模板中使用，一般使用该组件的地方多时使用。

局部注册：在使用组件的Vue中声明和使用，一般只需要解耦代码时使用

全局注册在src/main.js文件中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Test from './components/Test.vue' //导入组件

const app = createApp(app)
app.use(router).mount("#app");
app.component('Test',Test) //注册组件

全局注册后，在任意意.vue文件里可使用该组件

如在views/home.vue中引用

局部注册：

例如在HomeView.vue中导入一个Test组件

1 先写一个Test组件在components/Test.vue

<template>
  <div class="test">

  </div>
</template>

<script>
export default {
  name: "Test"

}
</script>

<style scoped>
    .test {
      width: 200px;
      height: 200px;
      background: orange;
    }
</style>

2 在Homeview中导入

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
  <Test></Test> //引用组件
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Test from "@/components/Test"; //导入组件

export default {
  name: "HomeView",
  components: {
    HelloWorld,
    Test,  //注册组件
  },
};
</script>

传参

可以从组件用法中可以看出，组件间的使用关系像是一种嵌套关系，在这个关系中，经常涉及相互传数据的需求，即父组件传子组件，子组件传父组件。

父、子组件的关系可以总结为：prop向下传递，事件向上传递

父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息

父传子：在默认页面中，也用到了父传子，在父组件Home.vue中给引用的组件传入一个静态的值，子组件通过props属性接收，并在模板中使用

子传父：

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^