Vue学习笔记（一）

已于 2022-07-31 12:04:42 修改
阅读量2.3k 收藏 1
点赞数 1
分类专栏： # Vue 文章标签： java vue.js 前端框架 javascript 前端
于 2021-11-27 19:32:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45075124/article/details/121581911
版权

点击跳转：Vue学习（二）

点击跳转：Vue学习（三）

点击跳转：Vue学习（四）

点击跳转：Vue学习（五）

点击跳转：Vue学习（六）

点击跳转：Vue学习（七）

点击跳转：Vue学习（八）

文章预览：

1、Vue简介

1.1、Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

在这里插入图片描述

1.2、谁开发的

在这里插入图片描述

1.3、Vue特点

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

  • 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4YKUoOBD-1638011956842)(Vue2%20+%20Vue3.assets/image-20211120211055577.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lP2ykddo-1638011956843)(Vue2%20+%20Vue3.assets/image-20211120211254529.png)]

在这里插入图片描述

1.4、搭建Vue开发环境

可以打开官网链接去查看安装步骤：Vue官网地址

直接用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>

2、Vue核心

2.1、初始Vue

  • 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
  • root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法
  • root容器里的代码被称为Vue模板
  • 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  • {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
  • 例如：{{name.toUpperCase()}} 大写，{{1+1}}输出值为二，{{Date.now()}}获取时间戳
  • 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'

2.js代码(语句)
(1). if(){}
(2). for(){}
  • Vue实例和模板是一一对应的关系，以下两段代码中，均无法正常解析渲染
<div class="root">
        <h1>hello,{{name}}</h1>
</div>

<div class="root">
    <h1>hello,{{name}}</h1>
</div>

<script>
    new Vue({
        el: '.root',
        data: { 
            name:'cez'
        },
        methods: {}
    });
</script>

<div id="root">
        <h1>hello,{{name}},{{address}}</h1>
</div>

<script>
    new Vue({
        el: '#root',
        data: { 
            name:'cez'
        },
        methods: {}
    })
    new Vue({
        el: '#root',
        data: { 
            address:'山东'
        },
        methods: {}
    });
</script>

完全版代码：

<!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="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>

2.2、模板语法

Vue模板语法有两大类：

  • 插值语法：
    • 功能：用于解析标签体内容
    • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
  • 指令语法：
    • 功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…)
    • 举例：v-bind:href="xxx" 或 简写为 :href="xxx" ，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>

2.3、数据绑定

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

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

备注：

  • 双向绑定一般都应用在表单类元素上（如：input、select等）
  • 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>

2.4、el与data的两种写法：

data与el的2种写法
	1.el有2种写法
		(1).new Vue时候配置el属性。
		(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
	2.data有2种写法
		(1).对象式
		(2).函数式
	   如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
	3.一个重要的原则：
	   由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
           Vue管理的函数举例：data（），method方法中定义的函数等，this会变成Window
1、el

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

1. 设置 el 属性
<div id="app"></div> 
new Vue({ 
  el: "#app", 
  render: h => h(App) 
}) 
2. 使用 $mount 接口
new Vue({
  render: h => h(App) 
}).$mount("#app");

const vm = new Vue({
  render: h => h(App) 
})
vm.$mount("#app");
2、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:{ n: 0 }

2. 使用函数
//data：function(){ return{ n: 0 } }简写
data(){ //声明data函数时this指向Vue实例，千万不要用箭头函数，其this指向window
  return{ n: 0 } 
}

2.5、MVVM

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

  • M：Model 对应data中的数据
  • V： 视图(View) 模板
  • VM：视图模式(ViewModel) Vue实例对象

data中所有的属性，最后都出现在了vm身上

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

在这里插入图片描述

  • Data Bindings ---数据绑定

  • DOM Listeners ---页面监听

在这里插入图片描述

2.6、Object.defineProperty()

1、对象的定义与赋值

经常使用的定义与赋值方法obj.prop =value或者obj['prop']=value

在这里插入图片描述

2、Object.defineProperty()语法说明

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)
  1. obj 需要定义属性的当前对象
  2. prop 当前需要定义的属性名
  3. desc 属性描述符

一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性。

3、属性的特性以及内部属性

javacript 有三种类型的属性

  1. 命名数据属性：拥有一个确定的值的属性。这也是最常见的属性

  2. 命名访问器属性：通过getter和setter进行读取和赋值的属性

  3. 内部属性：由JavaScript引擎内部使用的属性，不能通过JavaScript代码直接访问到，不过可以通过一些方法间接的读取和设置。比如，每个对象

    都有一个内部属性[[Prototype]]，你不能直接访问这个属性，但可以通过Object.getPrototypeOf()方法间接的读取到它的值。虽然内部

    属性通常用一个双中括号包围的名称来表示，但实际上这并不是它们的名字，它们是一种抽象操作，是不可见的，根本没有上面两种属性有的那种字符串类型的属性

4、属性描述符

通过Object.defineProperty()为对象定义属性，有两种形式，且不能混合使用，分别为数据描述符，存取描述符，下面分别描述下两者的区别：

5、数据描述符

特有的两个属性（value,writable）

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'jack',
   writable: true // 是否可以改变
})

在这里插入图片描述

在这里插入图片描述

注意，如果描述符中的某些属性被省略，会使用以下默认规则：

在这里插入图片描述

6、存取描述符

是由一对 getter、setter 函数功能来描述的属性

get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。

set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为

undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})

在这里插入图片描述

7、存取器描述

使用存取器描述属性的特性的时候，允许设置以下特性属性：

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

getter / setter

当设置或获取对象的某个属性的值的时候，可以提供getter/setter方法。

  • getter 是一种获得属性值的方法
  • setter是一种设置属性值的方法。

在特性中使用get/set属性来定义对应的方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log(obj.newKey);  //hello

//设置值
obj.newKey = 'change value';

console.log(obj.newKey); //change value

注意：get或set不是必须成对出现，任写其一就可以。如果不设置方法，则get和set的默认值为undefined

8、数据描述符和存取描述均具有以下描述符
  1. configrable 描述属性是否配置，以及可否删除
  2. enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中

configrable 代码片段分析

configurable:false不能删除属性

在这里插入图片描述

configurable:false不能重新定义属性

在这里插入图片描述

在这里插入图片描述

等价上一张图的代码

在这里插入图片描述

与上一张图的代码进行对比

configurable:true 能删除属性

在这里插入图片描述

configurable:true 能够定义属性

在这里插入图片描述

configurable:false 与上图做对照

在这里插入图片描述

从以上代码运行结果分析总结可知：

  1. configurable: false 时，不能删除当前属性，且不能重新配置当前属性的描述符(有一个小小的意外：可以把writable的状态由true改为false,但是无法由false改为true),但是在writable: true的情况下，可以改变value的值

  2. configurable: true 时，可以删除当前属性，可以配置当前属性所有描述符。

9、enumerable 代码片段分析

在这里插入图片描述

注意：以下二种区别

在这里插入图片描述

在这里插入图片描述

10、不变性
1、 对象常量
结合 `writable: false` 和 `configurable: false` 就可以创建一个真正的常量属性（不可修改，不可重新定义或者删除）

在这里插入图片描述

2、禁止扩展
如果你想禁止一个对象添加新属性并且保留已有属性，就可以使用 `Object.preventExtensions(...)`

禁止扩展片段1

在这里插入图片描述

禁止扩展片段2

在非严格模式下，创建属性gender会静默失败，在严格模式下，将会抛出异常。

在这里插入图片描述

3、密封
`Object.seal()` 会创建一个密封的对象，这个方法实际上会在一个现有对象上调用 `object.preventExtensions(...)`并把所有现有属性标记为configurable:false。

在这里插入图片描述

所以， 密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性（虽然可以改属性的值）

4、冻结
`Object.freeze()`会创建一个冻结对象，这个方法实际上会在一个现有对象上调用 `Object.seal()`,并把所有现有属性标记为 `writable: false`,这样就无法修改它们的值。

在这里插入图片描述

这个方法是你可以应用在对象上级别最高的不可变性，它会禁止对于对象本身及其任意直接属性的修改（但是这个对象引用的其他对象是不受影响的）

你可以深度冻结一个对象，具体方法为，首先这个对象上调用Object.freeze()然后遍历它引用的所有对象，并在这些对象上调用Object.freeze()。但是一定要小心，因为这么做有可能会无意中冻结其他共享对象。

11、Vue相关

Vue数据劫持与数据代理，计算属性等都用到了这个方法，必须理解它

<!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给对象添加属性
		Object.defineProperty(person, 'age', {
			//里面三个参数（对象，属性名，options配置对象{}）
			// value: 18,
			// enumerable: true, //控制属性是否可以枚举（遍历），默认值是false
			// writable:true, //控制属性是否可以被修改，默认值是false
			// configurable:true //控制属性是否可以被删除，默认值是false

			//当有人读取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>

2.7、 数据代理

何为数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>何为数据代理</title>
	</head>
	<body>
		<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
		<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对象中的属性

在这里插入图片描述

2.8、Vue数据代理

在这里插入图片描述

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>

2.9、事件处理

1、事件的基本使用

事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm，而是Window；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

2、事件修饰符

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>
		<!-- 阻止默认事件（常用） -->
		<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

		<!-- 阻止事件冒泡（常用） -->
		<div class="demo1" @click="showInfo">
			<button @click.stop="showInfo">点我提示信息</button>
			<!-- 在哪一层加了阻止事件冒泡，哪一层外面的所有祖先冒泡都会被阻止 -->
			<!-- 修饰符可以连续写 -->
			<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
		</div>

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

		<!-- 使用事件的捕获模式 -->
		<div class="box1" @click.capture="showMsg(1)">
			div1
			<div class="box2" @click="showMsg(2)">
				div2
			</div>
		</div>

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

		<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
		<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>
3、键盘事件

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>
4、exact 修饰符

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

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

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

.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>
Zzz小白飞
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2294
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记一
weixin_59263248的博客
04-08 891
1 导包使用 在HTML的<script></script>标签导入js包。在vue.js的官网上可下载。尽量使用下载包到本地，使用cdn版本容易程序运行不出来，卡顿。 2 实例化vue对象 另写一个script标签 var vm = new Vue({ // 选项 }) 3 vue对象与HTML的标签绑定 <div id="app"> //html标签内容 </div> <script> var vm = new Vue
Vue 3 学习笔记
qq_46735055的博客
05-23 3221
禹神最新Vue3教程学习笔记
Vue学习笔记(一)
Blue_Pepsi_Cola的博客
01-06 746
官网Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue3学习笔记
qq_43276836的博客
07-02 933
自定义事件发射this.$emit("todo-added",参数);v-on监听事件触发函数读取事件参数。
vue学习笔记
2201_75771132的博客
09-09 1742
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。函数名必须与监听的对象名称保持一致，也就是函数名必须为msg，第一个参数是新的数值，第二个是旧的数值，这两个参数名可以随意。再进行组件的切换时，旧组件会被卸载，如果在进行频繁的组件切换时，那这样会造成很大的切换开销。当多对标签进行重叠的时候, 你点击最上面的一层标签的时候, 会自动的冒泡到他下面的所有标签上面。还是上面那个例子，如果使得div块在点击按钮时不触发效果，只当点击div块时触发，怎么做到呢，，不填的位置默认删除。
Vue3学习笔记第一天
Word_seeker的博客
08-07 1994
Vue是一种用于构建用户界面的JavaScript框架。MVVM 是Vue采用的一种软件架构模式，用于构建交互式的用户界面。）：模型代表应用程序的数据和业务逻辑。在MVVM模式中，模型通常不直接与视图交互，而是由ViewModel层进行中介。视图是用户直接与之交互的界面。它通常是用户界面的可视化部分，如网页中的HTML页面或移动应用中的屏幕。视图模型是视图的抽象层，它负责处理视图的展示逻辑和用户交互。视图模型通常包含了视图所需的数据和命令，并且负责向视图暴露方法和属性。
VUE学习笔记
weixin_51660483的博客
05-30 1852
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1265
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
[自用，更新自day5]瑞吉外卖代码及笔记
最新发布
lapiii的博客
11-01 427
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1276
项目功能：商品分类,商品信息,用户。
（1）Java 编程基础概览：数据类型、常量、变量、标识符与运算符
码界领航的Cherry Yang的博客
10-28 1050
8 位，占1个字节，有符号的，范围 -128（-2^7）至 127（2^7-1）。32 位，占4个字节，范围 -2,147,483,648（-2^31）至 2,147,483,647（2^31 - 1）。Java 提供了六种数字类型，其中四个为整数类型，两个为浮点类型，还有字符类型，以及布尔型。16 位，占2个字节，范围 -32768（-2^15）至 32767（2^15 - 1）64 位，占8个字节，范围 -2^63 至 2^63 - 1。16 位 Unicode 字符，占 2 个字节。
SpringSession源码分析
lkr_lkr的博客
11-01 139
默认对常规Session的理解和使用，如何使用Set-Cookie。
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1238
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值