JavaScript-Vue

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量288 收藏
点赞数
分类专栏： 个人JavaEE笔记 文章标签： javascript vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56343951/article/details/131656334
版权

JavaScript

概念

js可以让我们的页面更加的智能，让页面和用户进行交互。

1. 引入方式

1.1 内部脚本

内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于标签之间

  • 在HTML文档中，可以在任意地方，放置任意数量的

<script>
    alert("Hello JavaScript")
</script>

1.2 外部脚本

JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含&ltscript>标签

  • 引入外部js的

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

注意：demo.js中只有js代码，没有

2. 基础语法

2.1 语法规则：

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 大括号表示代码块

  • 注释：

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

api描述
window.alert()警告框
document.write()在HTML 输出内容
console.log()写入浏览器控制台

2.2 变量

声明：

关键字解释
var早期ECMAScript5中用于变量声明的关键字
letECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const声明常量的，常量一旦声明，不能修改

注意点:

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

    • 数字不能开头

    • 建议使用驼峰命名

2.3. 数据类型

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引皆可
boolean布尔。true，false
null对象为空
undefined当声明的变量未初始化时，该变量的默认值是 undefined

2.4 运算符

运算规则运算符
算术运算符+ , - , * , / , % , ++ , –
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , = 注意 == 会进行类型转换*，=*== 不会进行类型转换
逻辑运算符&& ,
三元运算符条件表达式 ? true_value: false_value

与java中的差异

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的和=是有区别的。

  • ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较

  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

**需要注意的是：**在js中，0,null,undefined,“”,NaN理解成false,反之理解成true

2.5 流程控制语句

流程控制语句if，switch，for等和java保持一致，此处不再演示

3. 函数

3.1 第一种定义格式

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。

  • 返回值也不需要声明类型，直接return即可

3.2 第二种定义格式

var functionName = function (参数1,参数2..){   
	//要执行的代码
}

4. JS对象

4.1 基本对象

4.1.1 Array对象
  1. 语法格式：
var 变量名 = new Array(元素列表); 
例如：
var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

var 变量名 = [ 元素列表 ]; 
例如：
var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）
  1. 特点：

与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。

  1. 常用属性：
属性描述
length设置或返回数组中元素的数量。
  1. 常用方法：
方法方法描述
forEach()遍历数组中的每个有值得元素，并调用一次传入的函数
push()将新元素添加到数组的末尾，并返回新的长度
splice()从数组中删除元素
4.1.2 String对象
  1. 语法格式
var 变量名 = new String("…") ;
例如：
var str = new String("Hello String");

var 变量名 = "…" ; 
例如：
var str = 'Hello String';
  1. 常用属性
属性描述
length字符串的长度。
  1. 常用方法
方法描述
charAt()返回在指定位置的字符。
indexOf()检索字符串。
trim()去除字符串两边的空格
substring()提取字符串中两个指定的索引号之间的字符。
4.1.3 JSON对象
  1. 自定义对象
  • 语法格式
var 对象名 = {
  属性名1: 属性值1, 
  属性名2: 属性值2,
  属性名3: 属性值3,
  函数名称: function(形参列表){}
};
  • 调用属性
对象名.属性名
  • 调用方法
对象名.函数名()
  1. JSON对象
  • JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：
{
  "key":value,
  "key":value,
  "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

  • 为什么使用 JSON 而不去用 XML

    xml标签需要编写双份，占用带宽，浪费资源，解析繁琐

4.2 BOM对象

4.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的

window.alert('hello');
其可以省略window.  所以可以简写成
alert('hello')
  1. 常用属性
属性描述
history用于获取history对象
location用于获取location对象
Navigator用于获取Navigator对象
Screen用于获取Screen对象
  1. 常用函数
函数描述
alert()显示带有一段消息和一个确认按钮的警告框。
comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
4.2.2 Location对象

ocation是指代浏览器的地址栏对象

常用属性：href

//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

4.3 DOM对象

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象

  1. 封装对象

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qY3JTFM7-1689045585261)(02-JavaScript-Vue+6aea890e-7710-4a5a-8416-1a44293488c9/image.png)]

  1. 主要作用

  • 改变 HTML 元素的内容

  • 改变 HTML 元素的样式（CSS）

  • 对 HTML DOM 事件作出反应

  • 添加和删除 HTML 元素

  1. 获取DOM对象
函数描述
document.getElementById()根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组

5. JS事件

5.1 介绍

HTML事件是发生在HTML元素上的 “事情”，例如：鼠标被点击，鼠标移到元素上，输入框失去焦点……

5.2 事件绑定

5.2.1 方式一：通过html标签中的事件属性进行绑定

例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

<input type="button" id="btn1" value="事件绑定1" οnclick="on()">

创建该函数

<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>
5.2.2 方式二：通过DOM中Element元素的事件属性进行绑定

html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：

<input type="button" id="btn2" value="事件绑定2">

我们可以先通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：

document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

5.3 常见事件

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

Vue

1. 概述

  • Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qer0qtGD-1689045585262)(02-JavaScript-Vue+6aea890e-7710-4a5a-8416-1a44293488c9/image 1.png)]

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

  • Model: 数据模型，特指前端中通过请求从后台获取的数据

  • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据

  • ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

2. 快速入门

  1. 新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
  1. 在JS代码区域，创建Vue核心对象，定义数据模型
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
  1. 编写视图
<div id="app">
    <input type="text" v-model="message">
    {{ message }}
</div>

在创建vue对象时，有几个常用的属性：

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

  • data: 用来定义数据模型

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

插值表达式

  • 形式：{{ 表达式 }}。

  • 内容可以是：

    • 变量

    • 三元运算符

    • 函数调用

    • 算术运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2R2v20MO-1689045585263)(02-JavaScript-Vue+6aea890e-7710-4a5a-8416-1a44293488c9/image 2.png)]

3. Vue指令

HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

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

3.1 v-bind，v-model

  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a>
  • v-model：data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：
<input type="text" v-model="url">

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

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

3.2 v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下">
        <input type="button" value="点我一下">

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

3.3 v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <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">经判定,为:
        <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>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

3.4 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        
        <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">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</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: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

4. 生命周期

魚香肉丝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网最新的vue.js下载和安装的3种方法(2023年）
念兮为美
03-08 2万+
全网最新的vue.js下载和安装的3种方法(2023年），比如官网直接下载vue.js源代码，使用npm install下载，使用使用bower下载，以及Windows系统如何下载bower
vue基本使用
小脆筒style的博客
10-31 565
vue基本使用 vue简介 vue特性 MVVM vue 的基本使用 一、vue简介 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架 二、vue特性 数据驱动视图 双向数据绑定 1. 数据驱动视图： 在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下： 2. 双向数据绑定 在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源 中。示意图如下：
Vue.js语法详解：从入门到精通
m0_55416028的博客
03-23 1687
本文介绍了Vue.js的一些核心概念和语法，包括组件、模板、数据绑定、计算属性、生命周期钩子和指令。指令以`v-`开头，后面跟着指令的名称，例如`v-if`、`v-for`和`v-bind`。在本文中，我们将深入探讨Vue.js的语法，帮助读者更好地理解和应用Vue.js。如果你想深入学习Vue.js，可以查看官方文档或者其他相关资料，这些资源可以帮助你更好地掌握Vue.js的知识。在上述示例中，我们定义了一个简单的Vue.js组件，并在该组件中使用了常见的生命周期钩子。关注我，持续分享更多优质好文！
快速了解前端——Vue.js(源码)在JS脚本看Vue构建
tanning11627的博客
05-25 417
目录 1. scripts 脚本构建 vue 项目的 package.json 文件中可以看到相关的 npm 运行命令行。 其中 dev 开头的表示开发环境下相关的运行构建脚本，build 开头的表示生产环境下的构建脚本。 只需要根据这些运行的 npm run … 命令，找到对应的入口文件即可。 这里开发环境用 npm run dev ，生产环境用 npm run build。 "scripts": { "dev": "rollup -w -c scripts/config.js --envir
vue单页面应用中增加js脚本
jinmo277的专栏
12-31 1166
将js文件放入public文件夹,并在其中的index.html中增加 注: 打包后的js文件也会在dist的根目录下 <script type="text/javascript" src="<%= BASE_URL %>xxx.min.js"></script> BASE_URL- 会和vue.config.js中的publicPath选项相...
VueJS 概述与快速入门
逍遥云恋
12-20 961
1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中...
【JavaScript-Vue】-Vue知识体系详解
07-25
JavaScript 和 Vue.js 是Web开发中的两个重要组成部分。JavaScript 是一种广泛使用的编程语言，主要用于增加网页的交互性。Vue.js 是一个流行的JavaScript框架，用于构建用户界面。 JavaScript 的起源可以追溯到...
高级软件人才培训专家-day02-JavaScript-Vue
03-10
### 高级软件人才培训专家-day02-JavaScript-Vue #### 一、JavaScript简介 **JavaScript** 是一种广泛使用的脚本语言，用于增强网页的互动性。它由 Netscape 的 Brendan Eich 于 1995 年创建，并在同年被 Netscape...
JavaScript - Vue经典教程系列
06-10
Vue.JS 是目前火的前端框架之一,是一个构建数据驱动的 web 界面的渐进式框架。 Vue.JS 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或项目整合，已经成为了...
day02-JavaScript-Vue.md
04-27
day02-JavaScript-Vue.md
idle-vue:空闲js的Vue组件包装器
05-26
:globe_showing_Europe-Africa: 安装 npm install --save idle-vue :waving_hand: 用法在项目的根目录，就在创建Vue应用程序之前，导入idle-vue插件，并使用以下代码将其添加到Vue全局文件中： import Vue from '...
VUE day_01(7.15) vue的入门---使用vue脚本可以实现的一些功能
m0_70328115的博客
07-22 857
插值语法、属性绑定语法、事件绑定语法、计数器、事件参数、显示与隐藏、html与text、v-once、v-if、v-for、安装脚手架并生成项目包
【vue】vue.js不就是一个文件吗？安装vue是什么意思？
bandaoyu的note
03-04 2913
还有就是要安装node.js环境，我有点疑惑，为什么要装它，js脚本不是在浏览器运行吗，以前我接触juery的时候，调试的时候是用Hbuilder的，边写边用浏览器同步看效果。 这里为什么还要安装node.js呢？ 总结： 1、教程里的安装vue.js，这个vue.js是一个脚本文件吗？安装到哪里呢？ 2、为什么要安装node.js环境？ 答： 1、安装是构建环境安装依赖，就是把vue...
vue基础 - 22 （vue3脚本模式：JS脚本、TS脚本）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 842
vue3介绍： 把方法，属性按照`业务` 分成不同的部分 在HTML的唯一区别：template中可以有多个子元素 data、methods、watch....与数据相关的操作，都放在setup里 脚本： 分两种模式：JS脚本模式、TS脚本模式 JS脚本模式： <template> <!-- template中可以有多个子元素 --> <div>11</div&g...
Vue.js快速入门+项目实战（源码）
热门推荐
王俊的博客
06-12 3万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 184
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1081
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 942
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 169
【代码】playwright链接本地浏览器，实现自动登录。
"深入了解JavaScript-Vue：从原型编程到组件化编程
相比于JavaScript，Vue 是一款用于构建用户界面的JavaScript框架，发音类似于“view”。Vue基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值