Vue学习笔记 第 1 章:Vue 核心(上)

学习资料来自尚硅谷VUE教学视频

csdn:课程代码vue3笔记课件

gitee:课件、代码、资料

其他:vscode插件推荐第三方库网站npmjs库

工具库推荐:
moment.js 时间处理工具,很强很大。还有个轻量的叫dayjs
生成全球唯一id工具:uuid,但是很大,有个精简版:nanoid

章节导航:

第 1 章:Vue 核心(上)

第 1 章:Vue 核心(下)

第 2 章:Vue 组件化编程

第 3 章:使用 Vue 脚手架

第 4 章:Vue 中的 ajax

第 5 章:vuex

第 6 章:vue-router(Vue路由)

第 7 章:Vue UI 组件库

1.1. Vue 简介

1.1.1. 官网

  1. 英文官网: https://vuejs.org/
  2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

  1. 动态构建用户界面的渐进式 JavaScript 框架
  2. 作者: 尤雨溪

1.1.3. Vue 的特点

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

  1. 借鉴 Angular 的模板数据绑定技术
  2. 借鉴 React 的组件化虚拟 DOM 技术

1.1.5. Vue 周边库

  1. vue-cli: vue 脚手架
  2. vue-resource
  3. axios
  4. vue-router: 路由
  5. vuex: 状态管理
  6. element-ui: 基于 vue 的 UI 组件库(PC 端)
    ……

1.2. 初识 Vue

核心要点:

			1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
			2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
			3.root容器里的代码被称为【Vue模板】;
			4.Vue实例和容器是一一对应的;
			5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
			6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
			7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;

			注意区分:js表达式 和 js代码(语句)
					1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
								(1). a
								(2). a+b
								(3). demo(1)
								(4). x === y ? 'a' : 'b'

					2.js代码(语句)
								(1). if(){}
								(2). for(){}
<!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}}</h1>
		</div>
		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
				data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
					name:'atguigu',
					address:'北京'
				}
			})
		</script>
	</body>
</html>

1.3. 模板语法

1.3.2. 模板的理解

html 中包含了一些 JS 语法代码,语法分为两种,分别为:

  1. 插值语法(双大括号表达式)
  2. 指令(以 v-开头)

1.3.3 插值语法

  1. 功能: 用于解析标签体内容
  2. 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

1.3.4 指令语法

  1. 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
  2. 举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
  3. 备注: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" x="hello">点我去{{school.name}}学习2</a>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'jack',
				school:{
					name:'尚硅谷',
					url:'http://www.atguigu.com',
				}
			}
		})
	</script>
</html>

1.4. 数据绑定

1.4.2. 单向数据绑定

  1. 语法:v-bind:href ="xxx" 或简写为:href="xxx"
  2. 特点:数据只能从data流向页面。

1.4.3. 双向数据绑定

  1. 语法:v-model:value="xxx"可以简写为v-model ="xxx",因为v-model默认收集的就是value值。
  2. 特点:数据不仅能从data流向页面,还可以从页面流向data。
  3. 备注:双向绑定一般都应用在表单类元素上(如:input、select等)
  4. v-model常用的三个修饰符:
    lazy:失去焦点再收集数据
    number:输入字符串转为有效的数字
    trim:输入首尾空格过滤
<!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只能应用在表单类元素(输入类元素)上 -->
			<!-- <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>

额外知识:el与data的两种写法

		data与el的2种写法
				1.el有2种写法
								(1).new Vue时候配置el属性。
								(2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。
								mount是Vue原型对象上的方法,在_proto_或[[Prototype]]中。
				2.data有2种写法
								(1).对象式
								(2).函数式
								如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
				3.一个重要的原则:
								由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>你好,{{name}}</h1>
		</div>
	</body>

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

		//el的两种写法
		/* const v = new Vue({
			//el:'#root', //第一种写法
			data:{
				name:'尚硅谷'
			}
		})
		console.log(v)
		v.$mount('#root') //第二种写法 */

		//data的两种写法
		new Vue({
			el:'#root',
			//data的第一种写法:对象式
			/* data:{
				name:'尚硅谷'
			} */

			//data的第二种写法:函数式
			data(){
				console.log('@@@',this) //此处的this是Vue实例对象
				return{
					name:'尚硅谷'
				}
			}
		})
	</script>
</html>

1.5. MVVM 模型

  1. M:模型(Model) :对应 data 中的数据
  2. V:视图(View) :模板
  3. VM:视图模型(ViewModel) : Vue 实例对象

data中所有的属性,最后都出现在了vm身上。在这里插入图片描述

vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
5. 在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>理解MVVM</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
        <h1>测试一下1{{1+1}}</h1>
        <h1>测试一下2{{$options}}</h1>
        <h1>测试一下3{{$emit}}</h1>
        <h1>测试一下4{{_c}}</h1>
    </div>
</body>

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

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            address: '北京',
        }
    })
    console.log(vm)
</script>

</html>

额外知识:数据代理(数据绑定的原理)

1.回顾Object.defineproperty方法

Object.defineproperty方法可以给对象的属性设置get、set函数,从而通过对象外部变量控制对象内部属性。

<!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(person,'age',{
				// 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.何为数据代理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

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

3.Vue中的数据代理

  1. Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
  2. Vue中数据代理的好处:更加方便的操作data中的数据
  3. 基本原理:
    通过Object.defineProperty()把data对象中所有属性添加到vm(vue实例)上。
    为每一个添加到vm上的属性,都指定一个getter/setter。
    在getter/setter内部去操作(读/写)data中对应的属性。

1.6. 事件处理

1.6.1.事件的基本使用

事件的基本使用:
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
2. 事件的回调需要配置在methods对象中,最终会在vm(vue实例)上;
3. methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5. @click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;
6. $event 是一个占位符,方法中可以接收到event(事件对象),的event.target则为事件对象的目标元素,可以执行event.target.innerText等操作,事件绑定的方法不传参进行调用则默认第一个参数为event,传参则需要用占位符表示

<!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 @click="showInfo1">点我提示信息1(不传参)</button>
			<button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
		</div>
	</body>

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

    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
        },
        methods: {
            showInfo1(event) {
                console.log(event);
                console.log(event.target);
                console.log(event.target.innerText);
                console.log(this) //此处的this是vm
                alert('同学你好!')
            },
            showInfo2(event, number) {
                event.target.innerText = 'dsfsfsdfs';
                console.log(event, number)
                console.log(event.target.innerText)
                console.log(this) //此处的this是vm
                alert('同学你好!!')
            }
        }
    })
</script>
</html>

1.6.2.事件修饰符

  1. prevent:阻止默认事件(常用);
    例如a标签跳转
  2. stop:阻止事件冒泡(常用);
    一个大盒子包着一个小盒子,点击小盒子会先执行小盒子方法,再执行大盒子方法。给小盒子加stop可只生效小盒子方法
  3. once:事件只触发一次(常用);
    例如按钮点第一次的时候弹窗,第2次3次不再弹窗
  4. capture:使用事件的捕获模式;
    一个大盒子包着一个小盒子,点击小盒子时,点击操作是 大盒子→小盒子 传递(这个过程叫捕获),然后执行事件,从 小盒子→大盒子的顺序执行(这个过程叫冒泡),capture加在大盒子上,可以改变大盒子的事件执行时机,也就是此时事件执行的顺序为 大盒子→小盒子
  5. self:只有event.target是当前操作的元素时才触发事件;
    补充知识:冒泡虽然会执行2遍事件,但并不是冒泡到大盒子事件对象就是大盒子,而是2次事件对象都是小盒子。
    加了self的元素身上的事件触发必须是这个元素本身才会触发。
    例:如果加在大盒子上,就不会执行小盒子冒泡上来的事件。
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
    例:鼠标滚轮事件,触发的方法里如果写了需要执行很久的代码,会等执行完再滚动页面。加了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>

		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods:{
				showInfo(e){
					alert('同学你好!')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

1.6.3.键盘事件

键盘事件有2个,keydown(按下触发,按住可以一直触发),keyup(弹起触发)

1.Vue中常用的按键别名:
						回车 => enter
						删除 => delete (捕获“删除”和“退格”键)
						退出 => esc
						空格 => space
						换行 => tab (特殊,必须配合keydown去使用,因为tab在按下未弹起时就已经把焦点切走了,keyup的时候焦点已经不在当前元素)
						上 => up
						下 => down
						左 => left
						右 => right

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

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

			4.也可以使用keyCode去指定具体的按键(不推荐,该特性已从web标准中删除,因为每个键盘可能code不统一)

			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">
		</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)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

1.6.补充

需要执行多事件:修饰可以连着写,比如@click.prevent.stop 则为先阻止默认事件,再阻止冒泡
键盘按键多个同时按:@keyup.ctrl.y

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值