01.VUE详细整理（一）--初识VUE--尚硅谷最新课程

最新推荐文章于 2024-02-02 11:34:08 发布
最新推荐文章于 2024-02-02 11:34:08 发布
阅读量881 收藏 5
点赞数 3
分类专栏： 06.Vue相关 文章标签： 其他 vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a2274001782/article/details/121594219
版权

注：全文建议搭配目录观看 逻辑更清晰

01.对vue的 基本认识

01.框架整体评价

是一款渐进式 且自底向上增量开发的设计的JavaScript 框架，用来动态构建用户界面

渐进式：渐进式框架通俗点就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。正经一点就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情，在不同的阶段，使用vue中不同的功能。

对渐进式框架有趣的解释

作者：寇云
链接：https://www.zhihu.com/question/51907207/answer/136509019

以下是我结合实际使用场景和你分享下我的理解：

场景1：

如果你的技术团队技术选型比较保守，没有新技术的使用场景，比如让你去维护一个管理后台。管理后台，日常就是提交各种表单了，这部分现有的方案，比如form表单提交或者jquery收集信息ajax提交。这时候你可以把vue 当成一个js库来使用，就用来收集form表单，和表单验证。

场景2：

在场景1中，你尝到了甜头。心中暗爽，还可以这么玩嘞。独乐乐不如众乐乐和大家分享之后，团队开始接受使用vue，小规模推广起来。打怪升级该遇小boss啦，领导说，小伙后台做的越来越有效率了，来承担些常规业务开发，来正规军编制和其他小伙伴一起做新闻列表和新闻详情页吧。

在这个项目中，你跟大胆一点把 整个页面的dom 用Vue 来管理，你发现jquery 没什么用了，列表用v-for来循环，把评论抽成小组件了。 评论交互比较复杂，但是你的关注点把原来jquery dom操作变成了关注数据的变化，用数据驱动DOM的变化。

场景3:

经历了场景1 场景2，越来越受大家信赖，领导又找你了。你看新闻项目你做的不错，移动站也得重构了，你做个移动端m站吧，正好微信和App分享出去用到。这时候，你需要在做移动端webapp了。 于是你由去了解 webpack vue-router，你发现前端 可以控制路由了。webpack，可以用于前端开发的工程构建。

场景4:

场景3之后你在技术团队大放异彩，公司越来越器重你。年末领导又来找你了，小伙砸，想不想拿年终奖啊，想的话给我做个新闻直播间吧。需求特别简单：就是滚动播报新闻，用户实时参与评论。有了场景3和之前的经验，发现稍微有点力不从心了，你和后端的接口沟通上越来越频繁，新闻直播间需要大量的数据在组件中共享数据，后来你发现了，vuex 处理数据在组件之间的流动得心应手。

场景5:

年终奖，拿到手了，过年回来升职加薪。带了20人的前端团队，你的精力开始在配合公司其他部门做用户数据增长了。发现场景2中你犯了个错误，虽然整个页面用Vue 管理 开发起来很方便，但是页面白屏时间长，而且类似这样的底层页对seo都不好。开始考虑使用 vue2.0的SSR。为了保障团队高质量的输出，你开始研究如何给 vm写单测…

场景1-5 从最初的只因多看你一眼而用了前端js库，一直到最后的大型项目解决方案。能否给你说明白vue 是

The Progressive

JavaScript Framework

02.框架开发历史

年轻的框架，但已经是前端的新时代领军产品

03.框架特点

  1. 遵循 MVVM 模式

  2. 编码简洁，体积小，运行效率高，适合 移动/PC 端开发

  3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目

  4. 采用 组件化模式，提高代码复用率、且让代码更好维护

  5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率

    理解声明式编程和传统命令式编程的区别

    命令式编程

    ​ 原生js做法（命令式编程）

    1. 创建div元素，设置id属性
    2. 定义一个变量叫message
    3. 将message变量放在div元素中显示
    4. 修改message数据
    5. 将修改的元素替换到div

    声明式编程

    vue写法（声明式）

    1. 创建一个div元素，设置id属性
    2. 定义一个vue对象，将div挂载在vue对象上
    3. 在vue对象内定义变量message，并绑定数据
    4. 将message变量放在div元素上显示
    5. 修改vue对象中的变量message，div元素数据自动改变

    image-20211125105302519

  6. 使用 虚拟DOM和 Diff算法，尽量复用DOM节点

    理解虚拟dom，

    首先需要了解原生dom的工作方式

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyaAejTP-1638090443769)(C:/Users/Ustinian/AppData/Roaming/Typora/typora-user-images/image-20211125110442533.png)]

    对比vue虚拟dom所做的工作

    image-20211125111507174

04.与其他前端 JS 框架的关联

  • 借鉴 angular 的 模板 和 数据绑定 技术
  • 借鉴 react 的 组件化 和 虚拟DOM 技术

05.Vue 的扩展插件

  1. vue-cli：vue 脚手架
  2. vue-resource(axios)：ajax 请求
  3. vue-router：路由
  4. vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）
  5. vue-lazyload：图片懒加载
  6. vue-scroller：页面滑动相关
  7. mint-ui：基于 vue 的 UI 组件库（移动端）
  8. element-ui：基于 vue 的 UI 组件库（PC 端）

06.学习Vue建议提前掌握的知识

建议带着问题去学习，印象更深，效率更高

image-20211125111843612

07.学习VUE合理使用官网

介绍官网常用功能

image-20211125141900590

image-20211125142346848

image-20211125142539171

image-20211125142635891

image-20211125142929501

02.Vue快速上手

01.搭建Vue开发环境

参考官网**Vue官网地址**

直接在html中用script引入

  • CDN
完整版(包含完整的警告和调试模式)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>

压缩版(删除了警告)：
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
复制代码
  • 最好使用下载Vue Devtools
  • 也可以下载下来本地引入

02.创建Vue对象

实例

  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>初识Vue</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    
    <!-- 01.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

		02.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法

		03.root容器里的代码被称为Vue模板(模板代表有解析重新渲染为页面的过程) 
	-->
	<!-- 准备好一个容器 -->
	<div id="demo">
		<h1>Hello，{{name.toUpperCase()}}，{{address}}，{{1+1}},{{Date.now()}}</h1>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//创建Vue实例
		new Vue({
			el: '#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。\
			// el:document.getElementById('root'),也可以这么写，但不推荐
			data: { //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
				name: 'zgc',
				address: '北京'
			}
		})
	</script>
</body>
</html>

注意区分：js表达式 和 js代码(语句)

  1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
    (1). a
    (2). a+b
    (3). demo(1)//函数 这里呈现的是返回值
    (4). x === y ? 'a' : 'b'
  2. js代码(语句)
    (1). if(){}
    (2). `for(){}

### 附：关于el和data的两种写法

#### 01.el 两种写法

> el 属性又称挂载点，可认为是 element 的简写，创建一个 vue实例 得知道是在哪一块元素上创建 Vue实例 ，对哪一块视图进行操作。

(1) new Vue时候配置el属性。

```js
const v = new Vue({
  el:'#root',
  data:{
  	name:'YK菌'
  }
})

(2) 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

const v = new Vue({
	data:{
		name:'YK菌'
	}
})
v.$mount('#root')
02.data 两种写法

data 属性又称内部数据，该属性值可以是对象，也可以是函数，但优先推荐使用函数，对象里的函数又称方法。并且若是组件中的 data 则必须使用函数。

优先推荐使用函数的原因是在使用同一个 options 对象作为参数创建多个 Vue实例 时，若 data 属性值为对象，在使用 new Vue(options) 创建 Vue实例 时会将 options.data 属性值直接赋值给 Vue实例.data的属性 ，由于对象的赋值是复制的地址，因此多个实例的 data 属性值都是指向同一个对象的地址，则多个实例会共用一个 data对象，当一个实例改变 data对象 时，另一个实例的 data对象 也会被改变。

而当 data 属性值为函数时，Vue 创建实例时是会执行该 data() 函数，并将函数执行的结果返回的对象赋值给 Vue实例.data 属性，每次函数执行返回的对象都是不同的对象，因此多个实例的 data 属性值对应的是不同的对象，一个改变不会影响另外一个，各自独立不影响。

(1) 对象式

data:{
	name:'YK菌'
}

(2) 函数式

data(){
	console.log('@@@',this)
	return{
		name:'YK菌'
	}
}

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

  1. 一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

03.vue 模板语法的概念

  • Vue模板语法有两大类：
    • 插值语法：
      • 功能：用于解析标签体内容
      • 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
    • 指令语法：
      • 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…)
      • 举例：v-bind:href="xxx"或省略v-bind，xxx同样要写js表达式，且可以直接读取data中的所有属性，Vue中有很多的指令，且形式都是：v-???，此处只是拿v-bind举例子
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>模板语法</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	
	<!-- 准备好一个容器-->
	<div id="root">
		<h1>插值语法</h1>
		<h3>你好，{{name}}</h3>
		<hr />
		<h1>指令语法</h1>
		<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
		<a :href="school.url" v-bind:x="hello">点我去{{school.name}}学习2</a>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: 'zgc',
			school: {
				name: '清华',
				url: 'http://www.atguigu.com',
			},
			hello: '你好'
		}
	})
</script>
</html>
复制代码

image.png

04. 双向数据绑定

Vue有两种数据绑定的方式：

  • 单向绑定(v-bind)：数据只能从data流向页面。
  • 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

注意事项：

  • 双向绑定一般都应用在表单类元素上（如：input、select等），类似h1等元素，由于没有数据输入，自然不需要双向绑定
  • v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>数据绑定</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 普通写法 -->
		<!-- 
			单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/>
		     -->

		<!-- 简写 -->
		单向数据绑定：<input type="text" :value="name"><br />
		双向数据绑定：<input type="text" v-model="name"><br />

		<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上，即有value值的元素，因为其默认与value绑定 -->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		}
	})
</script>
</html>

05.Vue的MVVM实现

MVVM:Model-View-ViewModel 是一种软件架构模式

  • M：Model 对应data中的数据
  • V： 视图(View) 模板，即模板代码（不是静态页面） （两个语法：指令，大括号表达式）
  • VM：视图模式(ViewModel) Vue实例对象

vue实例中data所有的属性，最后都出现在了vm（vue实例本身，vm只是一个代称）身上

vm身上所有的属性，及Vue原型上所有属性，在Vue模板中都可以直接使用 如{{$options}} {{$emit}}均有结果出现。

image-20211126160045296

Data Bindings ---数据绑定
DOM Listeners ---页面监听

image-20210717001930625

image-20211126160510845

06.VUE中的数据代理

01.知识补充

了解数据代理需要先了解一个方法

Object.defineProperty

Object.definePropert一个常规应用场景 通过set和get监听数据的获取和赋值，实现一些细节性的功能 比如解决基本类型数据的动态赋值（赋值给对象中的一个属性）

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>回顾Object.defineproperty方法</title>
</head>

<body>

	<script type="text/javascript">
		let number = 18
		let person = {
			name: '张三',
			sex: '男',
		}
		//Object.defineProperty给对象添加属性
        //里面三个参数（对象，属性名，options配置对象{}）
		Object.defineProperty(person, 'age', {
			//基础可配置项
			// value: 18,
			// enumerable: true, //控制属性是否可以枚举（遍历），默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false
			
             //高级配置项 set和get
			//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get() {
				console.log('有人读取age属性了')
				return number
			},

			//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value) {
				console.log('有人修改了age属性，且值是', value)
				number = value
			}

		})

		// console.log(Object.keys(person))

		console.log(person)
	</script>
</body>

</html>

02.数据代理

01.数据代理的概念

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
如：通过obj2访问obj1内部的x

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
			 如：通过obj2访问obj1内部的x
		-->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>
复制代码

可以通过obj2对象操作obj对象中的属性

image.png

02.Vue数据代理

image-20211128153800620

  1. Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写)
  2. Vue中数据代理的好处： 更加方便的操作data中的数据，如果没有数据代理，data中所有属性就不能直接调用，前面应该加上 _data.调用
  3. 基本原理：
    通过Object.defineProperty()把data对象中所有属性代理到vm上。
    为每一个添加到vm上的属性，都指定一个getter/setter。
    在getter/setter内部去操作（读/写）data中对应的属性。
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Vue中的数据代理</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

	<!-- 准备好一个容器-->
	<div id="root">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<!-- 如果没有数据代理，代码要这么写，寻找_data中的name属性与address属性，太过繁琐,
                因为vm上没有这两个属性，通过数据代理将这两个属性放在vm身上一份
		<h2>学校名称：{{_data.name}}</h2>
		<h2>学校地址：{{_data.address}}</h2> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			address: '宏福科技园'
		}
	})
</script>

</html>

页面中学校名称原本为尚硅谷，data数据改变后页面内容也就跟着变了

image.png

反之亦然 修改data总的数据 vm实力中的数据也会改变

03.事件处理

01.事件的基本使用

注意事项：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上 (无需做数据代理)；
3.methods中配置的函数，不要用箭头函数！ 否则this就不是vm，而是Window（箭头函数会向外找this的指向）；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

02.事件修饰符

Vue中的事件修饰符：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>事件修饰符</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		* {
			margin-top: 20px;
		}

		.demo1 {
			height: 50px;
			background-color: skyblue;
		}

		.box1 {
			padding: 5px;
			background-color: skyblue;
		}

		.box2 {
			padding: 5px;
			background-color: orange;
		}

		.list {
			width: 200px;
			height: 200px;
			background-color: peru;
			overflow: auto;
		}

		li {
			height: 100px;
		}
	</style>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 01.阻止默认事件（常用） -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

		<!-- 02.阻止事件冒泡（常用）
			:如果这里不用冒泡阻止，这里点击按钮，按钮会出发，按钮外部的div也会触发
			 阻止了以后，只会触发内部的按钮-->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 在哪一层加了阻止事件冒泡，哪一层外面的所有祖先冒泡都会被阻止 -->
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

		<!-- 03.事件只触发一次（常用） -->
		<button @click.once="showInfo">点我提示信息</button>

		<!-- 04.使用事件的捕获模式
			让事件在捕获阶段就执行（传统方式是先捕获再冒泡，在冒泡阶段执行函数）-->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

		<!-- 05.只有event.target是当前操作的元素时才触发事件； -->
		<div class="demo1" @click.self="showInfo">
			<button @click="showInfo">点我提示信息</button>
		</div>

		<!-- 06.事件的默认行为立即执行，无需等待事件回调执行完毕；
			如给滚轮绑定一个事件，让事件触发一个函数，函数的执行需要时间，这里会阻塞滚轮的滑动，加了passive后函数的执行就不会阻塞滚轮的滑动了
			一般做移动端会用到-->
		<ul @wheel.passive="demo" class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<!-- @wheel滚轮滚动事件 @scroll滚动条滚动事件 -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		},
		methods: {
			showInfo(e) {
				// e.stopPropagation()//阻止冒泡
				// e.preventDefault()//阻止默认事件
				//可以不用上面两种方法而改用事件修饰符
				alert('同学你好！')
				console.log(e.target)
			},
			showMsg(msg) {
				console.log(msg)
			},
			demo() {
				for (let i = 0; i < 100000; i++) {
					console.log('#')
				}
				console.log('累坏了')
			}
		}
	})
</script>

</html>
复制代码
03.键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：tab、ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>键盘事件</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		<!-- <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> -->
		<!--当有需求要同时按下两个键才能生效时 
			<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> -->
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		},
		methods: {
			showInfo(e) {
				// console.log(e.key,e.keyCode)
				// if (e.keyCode !== 13) return 如果不是回车键，则弹出函数
				console.log(e.target.value)
			}
		},
	})
</script>
</html>

exact 修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
 
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
 
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
复制代码

鼠标按钮修饰符
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

.left
.right
.middle
复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- <button v-on:click="showInfo">点我提示信息</button> -->
        <button v-on:click="showInfo1">点我提示信息1（不传参）</button>
        <button @click.right="showInfo1">右键点我提示信息1（不传参）</button>
        <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

        <!-- 有且只有 ctrl 被按下的时候才触发 -->
        <button v-on:click.ctrl.exact="showInfo1">A</button>

        <!-- shift 即使 与（Alt 或 ctrl）  被一同按下时也会触发，即只要有shift就会触发 -->
        <button v-on:click.shift="showInfo1">A</button>

        <!-- 没有任何系统修饰符被按下的时候才触发 -->
        <button v-on:click.exact="showInfo1">A</button>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        },
        methods: {
            showInfo1(event) {
                //不传参默认收到event事件对象
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm，可以用this拿到 _data(data)中的数据
                alert('同学你好！')
            },
            showInfo2(event, number) {
                console.log(event, number)
                // console.log(event.target.innerText)
                // console.log(this) //此处的this是vm
                alert('同学你好！！')
            }
        }
    })
</script>

</html>

持续更新~

xjt_0901
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-print-nb 兼容低版本浏览器
11-28
`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-print-nb 兼容低版本浏览器”，这意味着该插件已经考虑到了对旧版浏览器的支持，确保在...
vue-split-pane:使用Vue.js的可调拆分窗格
05-02
Vue分割窗格使用Vue.js的可调拆分窗格安装# yarn (recommend)$ yarn add vue-split-pane# npm$ npm install vue-split-pane --save用法CDN < script src =" https://unpkg.com/vue-split-pane " > </ ...
01_初识Vue-尚硅谷Vue笔记
小白的成长之路
03-15 104
尚硅谷笔记-初识Vue 创建一个Vue实例
【Vue2-尚硅谷一】Vue核心
xbd_zc的博客
04-23 1667
文章目录一,Vue核心1,初识Vue2,模板语法3,数据绑定4,data与el的2种写法5,MVVM模型6,数据代理6.1,回顾Object.defineproperty方法6.2,数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）6.3,Vue中的数据代理7,事件处理7.1,事件的基本使用：7.2,事件修饰符7.3,键盘事件8,计算属性8.1,插值语法实现8.2,methods实现8.3,计算属性实现8.4,计算属性简写9,监视属性9.1,天气案例9.2,天气案例+监视属性(watch)9.3,
尚硅谷Vue2.0+Vue3.0全套代码【01_初识Vue】
最新发布
qq_53929040的博客
02-02 675
本文章的代码源于尚硅谷Vue2.0+Vue3.0的学习课程，已编译通过，可直接运行
Vue学习笔记（vue_basci） --- 尚硅谷
wykkk1的博客
02-10 442
一、初识Vue 1.1 Hello案例 结论 ： 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； root容器里的代码被称为【Vue模板】； Vue实例和容器是一一对应的； 真实开发中只有一个Vue实例，并且会配合着组件一起使用； {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性； 一旦data中的数据发生改变，那么页面中用到该数据的
（尚硅谷）Vue笔记--------28
weixin_52618349的博客
01-29 863
初识setup 跟着笔记第一步，我们先去创建一下setup函数: 在vue2中我们是把数据写在data里，把函数写在methods里，现在我们都不用了，我们就把这些都写在setup里。 所以我们现在在这个里面给它加上数据和方法： 接下来我们来说我们setup的返回值： 先说返回一个对象： 因为数据和方法都是在setup中写，我们就不需要调用数据时写this了。 然后现在看着笔记我们来学第二种返回值情况： 我们这种返回函数的形式，有两个return，一个是返...
Vue2学习笔记（尚硅谷张天禹老师）day-01
运气只是当机会来临时，你已为它准备好。
04-01 4652
Vue 一、vue核心 1、vue简介 1.1、vue是什么 一套用于构建用户界面的渐进式JavaScript框架。 渐进式：vue可以自底向上逐层应用；简单应用：只需一个轻量小巧的核心库；复杂应用：可以引入各式各样的的vue插件。 1.2、谁开发的 华人 尤雨溪； vue2（攻壳机动队） vue3（海贼王） 1.3、vue的特点 采用组件化模式，提高代码复用率、且让代码更好的维护 声明式编码（原生js为命令式编码），使无需直接操作DOM，提高开发效率 使用虚拟DOM+优秀的Diff算法，尽量复用DOM
01. Vue核心 Vue简介 初识
weixin_45816407的博客
03-21 811
Vue是一套用来动态构建用户界面的渐进式JavaScript框架○构建用户界面：把数据通过某种办法变成用户界面○渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件Vue监视数据的原理：vue会监视data中所有层次的数据如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。对象中后追加的属性，Vue默认不做响应式处理或如何监测数组中的数据？- 调用原生对应的方法对数组进行更新。
02_模板语法-尚硅谷Vue笔记
小白的成长之路
03-15 69
Vue 模板语法 插值语法 和 指令语法
尚硅谷vue笔记 详细讲解版（尚硅谷 天禹老师）
abjtxf的博客
03-01 6588
详细版的意思就是把老师课上讲的内容都结合自己的思考记录了下来，很适合只会应用而不知原理的同学参考
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
Vue Pivottable-基于jQuery的PivotTable.js的Vue端口-Vue.js开发
05-27
cd vue-pivottable / demo / example-vue-cli3 / $ npm install $ npm run serve安装npm i vue-pivottable全局组件用法main.js从“ vue”导入Vue从“ vue-pivottable”导入VuePivottable导入“ vue-pivottable / ...
vue-qr：Awesome-qr.js的Vue 2.x组件
02-06
vue-qr 的Vue 2.x组件 您只需要Vue.js的一个qr代码组件！ 注意 不支持IE不支持IE浏览器 样例 尝试使用智能手机扫描以下这些QR码。 例子1 例子2 例子3 例子4 演示版 运行npm run dev或yarn dev npm run dev或...
QT属性动画--设置样式属性(其他属性)
lizequan的博客
03-02 5330
这里写自定义目录标题故事背景遇到的问题解决过程最终方法感悟 故事背景   最近在制作一个按钮切换的动画特效中接触了属性动画这部分内容，并由此产生了一些思考。 遇到的问题 解决过程 最终方法 感悟 ...
Volatile的其他特性
我想月薪过万的博客
03-03 3868
2.1 volatile总体概览 在上一节中，我们已经研究完了volatile可以实现并发下共享变量的可见性，volatile除了保证可见性外，volatile还具备如下一些突出的特性： volatile的原子性问题：volatile不能保证原子性操作 禁止指令重排序：volatile可以防止指令重排序操作 2.2 volatile不保证原子性 2.3 代码测试 package Ls; /** * 目标：研究Volatile的原子性操作 * <p> * 基本观点：V.
【安卓基础】Android直接通过路径来操作其他应用的私有目录，可以吗？
m0_48179608的博客
03-02 7596
在上篇文章[【安卓基础】一文搞懂Android历代版本文件访问权限变化](https://blog.csdn.net/m0_48179608/article/details/122838494)我们对同一个应用的的文件访问权限做了比较。 那么不同应用之间文件访问又有什么限制呢？我们准备分二到三篇文件来阐述。 这篇文章，主要来看下不同系统版本下，我们直接通过路径来访问其它应用的**内部存储、外部存储私有目录**，看看能不能访问以及不同系统版本的区别。
Silane-PEG-NHS，SIL-PEG-NHS，可以用来修饰蛋白质、多肽以及其他活性基团，NHS-PEG-Silane
qq_39152602的博客
03-03 3518
英文名称：Silane-PEG-NHS 中文名称：硅烷-聚乙二醇-活性酯 分子量：1k，2k，3.4k，5k，10k，20k（可按需定制） 质量控制：95%+ 存储条件：-20°C，避光，避湿 用 途：仅供科研实验使用，不用于诊治 外观: 固体或粘性液体，取决于分子量 注意事项：取用一定要干燥，避免频繁的溶解和冻干 溶解性：溶于大部分有机溶剂，如：DCM、DMF、DMSO、THF等等。在水中有很好的溶解性 取用：现配现用，将包装从冰箱中取出，置于干燥器中缓慢升至室温，打开瓶盖，取用。取用.
vue-2.4.0.js vue-router-3.0.1.js
09-06
vue-2.4.0.js和vue-router-3.0.1.js是Vue.js框架的两个重要组成部分。 首先，vue-2.4.0.js是Vue.js的核心库，它是一个用于构建用户界面的渐进式框架。它采用了MVVM模式，主要用于简化用户界面的开发，提高开发效率。Vue.js具有响应式的数据绑定和组件化的特性，使得开发人员可以更加轻松地构建复杂的用户界面。它还提供了丰富的API和插件生态系统，可以帮助开发人员解决各种开发需求。 而vue-router-3.0.1.js是Vue.js的路由管理器。它构建于Vue.js之上，提供了一种机制，用于管理应用程序的路由和导航。它允许开发人员定义不同的路由规则，以及在不同路由之间进行切换的方法。通过vue-router，开发人员可以实现单页应用（SPA）的导航功能，使得用户在应用程序中浏览不同的界面成为可能。同时，vue-router还提供了各种导航守卫和路由参数的处理方法，使得开发人员可以更加灵活地控制应用程序的路由功能。 综上所述，vue-2.4.0.js和vue-router-3.0.1.js为Vue.js开发提供了重要的支持和功能扩展。通过使用这两个库，开发人员可以更加方便地构建复杂的用户界面，并实现灵活的应用程序路由和导航功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值