vue基础入门

news2025/2/2 15:25:41

1. vue简介

1.1 什么是vue

官方概念：Vue（读音/vju:/，类似于view）是一套用于构建用户界面的前端框架

1.2 vue 的特性

vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

示意图如下：
在这里插入图片描述

好处：当页面数据发生变化时，页面会自动重新渲染！

注意：数据驱动视图是单向的数据绑定。

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

示意图如下：
在这里插入图片描述

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，
它把每个 HTML 页面都拆分成了这三个部分，如图所示：
在这里插入图片描述

在 MVVM 概念中：

  1. Model 表示当前页面渲染时所依赖的数据源。
  2. View 表示当前页面所渲染的 DOM 结构。
  3. ViewModel 表示 vue 的实例，它是 MVVM 的核心。

MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
在这里插入图片描述
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

2. vue的基本使用

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

<!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>Document</title>
</head>
<body>
  <!-- 2. 在页面中声明一个将被vue所控制的DOM区域 -->
  <div id="app">{{ username }}</div>

  <!-- 1. 导入 vue.js的script脚本文件 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <script>
    // 3. 创建 Vue 的实例对象（vm示例对象）
    const vm = new Vue({
   	  // 3.1 指定当前vm示例要控制页面的哪个区域
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      // 3.2 指定Model数据源
      data: {
        username: 'zhangsan'
      }
    })
  </script>
</body>
</html>

基本代码与 MVVM 的对应关系：
在这里插入图片描述

3. vue的调试工具

3.1 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。

Chrome 浏览器在线安装 vue-devtools ：

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

FireFox 浏览器在线安装 vue-devtools ：

https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

3. 2 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的三个竖着的**.**按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下的两个选项
在这里插入图片描述

3.3 使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。

4. vue的指令与过滤器

4.1 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

注意：指令是 vue 开发中最基础、最常用、最简单的知识点。

4.1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

  • v-text
  • {{ }}
    vue 提供的{{ }}语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）
  • v-html
    如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令

注意：

  • v-text 指令会覆盖元素内默认的值。
  • 相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。
  • v-text 指令和插值表达式只能渲染纯文本内容。
<!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>Document</title>
</head>
<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">
    <p v-text="username"></p>
    <p v-text="gender">性别：</p>

    <hr>

    <p>姓名：{{ username }}</p>
    <p>性别：{{ gender }}</p>

    <hr>
    
    <div v-text="info"></div>
    <div>{{ info }}</div>
    <div v-html="info"></div>
  </div>
  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        username: 'zhangsan',
        gender: '女',
        info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>'
      }
    })
  </script>
</body>
</html>

4.1.2 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。

<!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>Document</title>
</head>
<body>
  <!-- 希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
  <div id="app">
    <input type="text" :placeholder="tips">
    <hr>
    <!-- vue 规定 v-bind: 指令可以简写为 : -->
    <img :src="photo" alt="" style="width: 150px;">

    <hr>
    <div>1 + 2 的结果是：{{ 1 + 2 }}</div>
    <div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</div>
    <div :title="'box' + index">这是一个 div</div>
  </div>

  <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
  <script src="./lib/vue-2.6.12.js"></script>
  <!-- 2. 创建 Vue 的实例对象 -->
  <script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        tips: '请输入用户名',
        photo: 'https://cn.vuejs.org/images/logo.svg',
        index: 3
      }
    })
  </script>
</body>
</html>

使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

{{number + 1}}

{{ ok ? 'YES' : 'NO'}}

{{ message.split('').reverse().join('') }}

<div v-bind:id = " 'list-' +id "></div>

4.1.3 事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

<h3>count 的值为：{{count}}</h3>
<!-- 语法格式为 v-on：事件名称 = “事件处理函数的名称” -->
<button v-on:click = "addCount">+1</button>

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

const vm = new Vue({
	el:'#app',
	data: ( count: 0 ),
	methods: {		// v-on 绑定的事件处理函数，需要声明在 methods 节点中
		addCount() { // 事件处理函数的名字
			// this 表示当前 new 出来的 vm 实例对象
			// 通过 this 可以访问到 data 中的数据
			this.count += 1
		}
	},
})

事件绑定的简写形式：由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的@）。

<div id="app">
	<h3>count 的值为: {{count}}</h3>
	<!-- 完整写法 -->
	<button V-on:click="addCount">+1</button>
	<!-- 简写形式，把 v-on: 简写为 @ 符号 -->
	<!-- 如果事件处理函数中的代码足够简单，只有一行代码，则可以简写到行内 -->
	<button @click="count += 1">+1</button>
</div>
事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令（简写为@）所绑定的事件处理函数中，同样可以接收到事件参数对象 event，示例代码如下：

<h3>count 的值为: {{count}}</h3>
<button v-on:click="addCount">+1</button>
//---分割线---
methods: {
	addCount(e){  // 接收事件参数对象 event，简写为 e
		const newBgColor = e.target.style.backgroundColor
		e.target.style.backgroundColor = newBgColor === 'red' ? '' : 'red'
		this.count += 1
	}
}
绑定事件并传参

在使用 v-on 指令绑定事件时，可以使用( )进行传参，示例代码如下：

<h3>count 的值为: {{count}}</h3>
<button @click="addCount(2)">+2</button>
//---分割线---
methods: {
	// 在形参处使用step接受传递过来的参数值
	addCount(step){  
		this.count += step
	}
}
$event

$ event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。示例用法如下：

<h3>count 的值为: {{count}}</h3>
<button @click="addCount(2,$event)">+1</button>
//---分割线---
methods: {
	// 在形参处用 e 接收传递过来的原生事件参数对象 $event
	addCount(step,e){  
		const newBgColor = e.target.style.backgroundColor
		e.target.style.backgroundColor = newBgColor === 'red' ? '' : 'red'
		this.count += step
	}
}
事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

.prevent ：阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）

.stop ：阻止事件冒泡

.capture ：以捕获模式触发当前的事件处理函数

.once ：绑定的事件只触发1次

.self ：只有在 event.target 是当前元素自身时触发事件处理函数

<!-- 触发click点击行为事件时，阻止a链接的默认跳转行为 -->
<a href="xxx" @click.prevent="onLinkClick">链接</a>
按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

<!-- 只有在key 是Enter  时调用wm .submit()-->
<input @keyup .enter="submit">

<!-- 只有在'key'是Esc  时调用'vm.clearInput()'-->
<input @keyup.esc="clearInput">

4.1.4 双向绑定指令

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<div id="app">
    <p>用户的名字是：{{ username }}</p>
    <input type="text" v-model="username">
    <hr>
    <input type="text" :value="username">
    <hr>
    <select v-model="city">
      <option value="">请选择城市</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
      <option value="3">广州</option>
    </select>
  </div>
v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

.number ：自动将用户的输入值转为数值类型
eg：

.trim ：自动过滤用户输入的首尾空白字符
eg：

.lazy ：在“change”时而非“input”时更新
eg：

<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> =<span>{{ n1 + n2 }}</span>
    <hr>
    <input type="text" v-model.trim="username">
    <button @click="showName">获取用户名</button>
    <hr>
    <input type="text" v-model.lazy="username">

4.1.5 条件渲染指令

·条件渲染指令·用来辅助开发者·按需控制 DOM 的显示与隐藏·。条件渲染指令有如下两个，分别是：

  • v-if
  • v-show
    示例用法如下：
<p v-if="flag">这是被 v-if 控制的元素</p>
<p v-show="flag">这是被 v-show 控制的元素</p>

v-if 和 v-show 的区别
实现原理不同：

  • v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
  • v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；
    性能消耗不同：
    v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：
  • 如果需要非常频繁地切换，则使用 v-show 较好
  • 如果在运行时条件很少改变，则使用 v-if 较好
v-else

v-if 可以单独使用，或配合 v-else 指令一起使用：

<div v-if="Math.random() > 0.5">
随机数大于 0.5
</div>
<div V-else>
随机数小于或等于 0.5
</div>

注意：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/522026.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

IMS补充业务场景介绍

IMS补充业务场景介绍

呼叫保持流程 通话主动Hold的一方，发INVITE消息，媒体流从sendrecv变为sendonly，对方返回200 ok，媒体流从sendrecv变为recvonly，双方ACK后，进入呼叫保持状态，没有通话的RTP包。 大致流程如下 UE A发送INVITE(Sendonly)到网络 网络发送INVITE(Sendonly)到UE B UE发…
阅读更多...
Linux文件属性修改

Linux文件属性修改

关于我们的文件属性如何修改呢&#xff1f; 我们今天来看一下 chmod chmod u(拥有者)/g(所属组)/o(其他人)(-)r/w/x(t) 文件名 就是这样&#xff0c;我们演示几个 我们想给拥有者去掉file1的读权限 我们file1的拥有者已经没有读权限了&#xff0c;那么我们还想加回来呢…
阅读更多...
asp.net+C#基于web的旅游网站自驾游网站

asp.net+C#基于web的旅游网站自驾游网站

&#xff08;1&#xff09;登录注册模块&#xff1a;输入账号密码&#xff0c;数据库进行验证&#xff0c;正确通过后&#xff0c;根据不同的账户信息&#xff0c;不同角色&#xff0c;获取不同的功能。 &#xff08;2&#xff09;自驾游模块&#xff1a;此模块可以分享自己自…
阅读更多...
《计算机网络—自顶向下方法》 第五章Wireshark实验：UDP 协议分析

《计算机网络—自顶向下方法》 第五章Wireshark实验：UDP 协议分析

用户数据报(UDP)协议是运输层提供的一种最低限度的复用/分解服务&#xff0c;可以在网络层和正确的用户即进程间传输数据。UDP 是一种不提供不必要服务的轻量级运输协议&#xff0c;除了复用/分用功能和简单的差错检测之外&#xff0c;几乎就是 IP 协议了&#xff0c;也可以说它…
阅读更多...
Python操作Redis常见类型详解

Python操作Redis常见类型详解

1、windows 上安装 Redis 便于测试&#xff0c;笔者在 windows 上安装 Redis Redis 官方不建议在 windows 下使用 Redis&#xff0c;所以官网没有 windows 版本可以下载。微软团队维护了开源的 windows 版本&#xff0c;对于普通测试使用足够了。 1.1、安装包方式安装 Redis…
阅读更多...
万字收藏：《2023网络工程师年度必看书单》

万字收藏：《2023网络工程师年度必看书单》

晚上好&#xff0c;我是老杨。 这周是总结周&#xff0c;更新的第三篇内容&#xff0c;还是关于总结的。很多人让我推荐网工适合看的书&#xff0c;其实我推荐过好多次了。 趁着年底&#xff0c;一起把我认为网工适合看的、推荐你看的、值得看的书整理一下&#xff0c;供新老…
阅读更多...
视觉SLAM ch13 设计SLAM系统

视觉SLAM ch13 设计SLAM系统

目录 一、SLAM系统 二、工程框架 三、框架流程 四、具体实现 五、VO整体流程 六、显示整体建图效果 一、SLAM系统 实现一个精简版的双目视觉里程计&#xff0c;前端使用光流法&#xff0c;局部使用局部BA优化。 二、工程框架 app中 run_kitti_stereo.cpp是代码的运行入口…
阅读更多...
国内免费可用 ChatGPT 网页版

国内免费可用 ChatGPT 网页版

ChatGPT是一个神奇的机器人&#xff0c;它可以回答任何问题&#xff0c;解决任何问题。它的名字来源于“Chat”和“GPT”&#xff0c;前者代表聊天&#xff0c;后者代表生成预测文本。它被设计成一个智能助手&#xff0c;可以帮助人们解决各种问题。 有一天&#xff0c;一个名…
阅读更多...
【Python 爬虫之requests库】零基础也能轻松掌握的学习路线与参考资料

【Python 爬虫之requests库】零基础也能轻松掌握的学习路线与参考资料

文章目录 一、概述二、Requests 库基本用法三、爬虫中的优秀实践四、参考资料 一、概述 Python 爬虫中&#xff0c;常用来请求网页的库有 urllib、urllib2、httplib等&#xff0c;但是这些库用起来比较麻烦&#xff0c;需要写很多代码。Requests 库正是为了解决这个问题而生的…
阅读更多...
Flask轻松构建钉钉接口模版，实现自动化流程优化

Flask轻松构建钉钉接口模版，实现自动化流程优化

项目背景 随着钉钉应用的不断普及和企业数字化程度的提高&#xff0c;越来越多的企业需要开发钉钉接口来完成内部业务流程的自动化和优化。而Flask框架&#xff0c;则是一个轻量级的Python web框架&#xff0c;具有快速开发和灵活性的优势&#xff0c;是钉钉接口开发的理想选择…
阅读更多...
python去重列表中相同的字典元素

python去重列表中相同的字典元素

python去重列表中相同的字典元素 文章目录 python去重列表中相同的字典元素一.知识点二.代码|代码1|问题 |代码2 三.分析总结1、分析2、总结 四.后续代码知识点代码流程问题总结总结 一.知识点 ​ data_list [{“a”: 1, “b”: 2}, {“a”: 2, “b”: 3}, {“a”: 1, “b”:…
阅读更多...
华为OD机试真题 Java 实现【相同数字的积木游戏1】【2023Q2 100分】

华为OD机试真题 Java 实现【相同数字的积木游戏1】【2023Q2 100分】

一、题目描述 小华和小薇一起通过玩积木游戏学习数学。 他们有很多积木&#xff0c;每个积木块上都有一个数字&#xff0c;积木块上的数字可能相同。 小华随机拿一些积木挨着排成一排&#xff0c;请小薇找到这排积木中数字相同且所处位置最远的2块积木块&#xff0c;计算他们…
阅读更多...
【C++】——string的模拟实现

【C++】——string的模拟实现

前言&#xff1a; 在之前的学习中&#xff0c;我们已经对string类进行了简单的介绍&#xff0c;大家只要能够正常使用即可。但是在面试中&#xff0c;面试官总喜欢让学生自己 来模拟实现string类&#xff0c;最主要是实现string类的构造、拷贝构造、赋值运算符重载以及析构函数…
阅读更多...
lightroom磨皮滤镜中文插件Portraiture4最新版本

lightroom磨皮滤镜中文插件Portraiture4最新版本

哈喽&#xff01;小伙伴们&#xff01;整个摄影后期行业都在用Portraiture&#xff0c;这是一个被奉为高级磨皮面板&#xff0c;修图神器、修图的的扩展面板&#xff01;Portraiture这款磨皮插件终于更新啦&#xff01;最近推出了Portraiture4.03版本,新版本光影处理更强大&…
阅读更多...
《编程思维与实践》1066.最小不重复数

《编程思维与实践》1066.最小不重复数

《编程思维与实践》1066.最小不重复数 题目 思路 一般在oj上循环 2 ⋅ 1 0 9 2\cdot 10^9 2⋅109次以上就会超时,所以由于这题的数据A可以很大,直接循环加一再判断会超时. 优化:首先可以明确要想使不重复数尽可能小,则高位数字应该尽可能小, 即先找到最靠前的两个重复数字,然后…
阅读更多...
【Vector VN1630/40 I/O应用】-1-简易示波器

【Vector VN1630/40 I/O应用】-1-简易示波器

案例背景(共13页精简)&#xff1a;该篇博客将告诉您&#xff1a; Vector VN1630A&#xff0c;VN1640A&#xff0c;VH6501 I/O的使用&#xff1b;将Vector VN1630A/VN1640A CAN/LIN Interface的I/O接口充当一个简易的“示波器”使用&#xff1b;观察“CAN唤醒”工作的ECU控制器…
阅读更多...
关于C语言的杂记4

关于C语言的杂记4

文章目录 数据与程序结构C语言的编程机制#include <>和#include ""的区别形式参数和实际参数值传递地址传递 素数 文章内容摘自或加工于C技能树一些大佬的博文 数据与程序结构 阅读完C的编程机制和函数的声明和定义后的一些启发。——预处理 C语言的编程机制 …
阅读更多...
dubbo技术

dubbo技术

1、Dubbo的前世今生 2011年10月27日&#xff0c;阿里巴巴开源了自己的SOA服务化治理方案的核心框架Dubbo&#xff0c;服务治理和SOA的设计理念开始逐渐在国内软件行业中落地&#xff0c;并被广泛应用。 早期版本的dubbo遵循SOA的思想&#xff0c;是面向服务架构的重要组件。 …
阅读更多...
1708_Simulink中取数组元素

1708_Simulink中取数组元素

全部学习汇总&#xff1a; GitHub - GreyZhang/g_matlab: MATLAB once used to be my daily tool. After many years when I go back and read my old learning notes I felt maybe I still need it in the future. So, start this repo to keep some of my old learning notes…
阅读更多...
【多线程】线程安全问题原因与解决方案

【多线程】线程安全问题原因与解决方案

目录 线程安全的概念 线程不安全示例 线程不安全的原因 多个线程修改了同一个变量 线程是抢占式执行的 原子性 内存可见性 有序性 线程不安全解决办法 synchronized 关键字-监视器锁monitor lock synchronized 的特性 互斥 刷新内存 可重入 synchronized 使用示例 Java 标…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023