第一章 Vue基础知识（1）

Vue学习系列

第一章 Vue基础知识一
第二章 Vue基础知识二

前言

	此处只是记录一下Vue学习过程中的基础知识，学习资料来源于尚硅谷网络视频。

一、vue模板语法

1.插值语法

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

<h1>插值语法</h1>
<h3>你好，{{name}}</h3>

2.指令语法

功能：用于解析标签（包括：标签属性v-bind:href、标签体内容v-text、绑定事件v-on:click）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
注意：指令语法同时支持动态参数

<h1>指令语法</h1>
<a v-bind:href="schoolurl">跳转学习网站</a>
<a :href="schoolurl">跳转学习网站</a>

二、数据绑定

1.单项绑定

单向绑定(v-bind)：数据只能从data流向页面。

<input type="text" :value="name">

2.双向绑定

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素上（如：input、select、textarea等）。
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
3.v-model只能应用在表单类元素（输入类元素）。

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

二、事件的使用

1.基础使用

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，例如click；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！不要用箭头函数！不要用箭头函数！
4.@click=“demo” 和 @click=“demo($event)” 调用方法是一样的，但后者可以传递参数；

<div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<button v-on:click="showInfo">提示信息</button>
	<button @click="showInfo">提示信息（不传参）</button>
	<button @click="showInfo($event,'username')">提示信息（传参）</button>
</div>

2.修饰符

事件修饰符有以下几种：
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
后三种很少使用；在开发手机端的时候第六种会很有用处

<div id="root">
	<!-- 阻止默认事件（常用） -->
	<a href="http://www.atguigu.com" @click.prevent="showInfo">提示信息</a>
	<!-- 阻止事件冒泡（常用） -->
	<div class="demo1" @click="showInfo">
		<!--点击里面的“提示信息”按钮，调用此按钮上的点击事件；禁止调用外层的click事件-->
		<button @click.stop="showInfo">提示信息</button>
		<!-- 修饰符可以连续写；说明：点击a标签时，调用showInfo；屏蔽a标签自带的href跳转，并禁止调用外层的click事件 -->
		<a href="http://www.atguigu.com" @click.prevent.stop="showInfo">提示信息</a>
	</div>
	<!-- 事件只触发一次（常用） -->
	<button @click.once="showInfo">提示信息</button>
	<!-- 使用事件的捕获模式 -->
	<div class="box1" @click.capture="showMsg(1)">
		外层div
		<div class="box2" @click="showMsg(2)">
			内部div
		</div>
	</div>
	<!-- 只有event.target是当前操作的元素时才触发事件； -->
	<div class="demo1" @click.self="showInfo">
		<button @click="showInfo">提示信息</button>
	</div>
	<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
	<ul @wheel.passive="demo" class="list">	
	</ul>
</div>

3.键盘绑定事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
<div id="root">
	<!--获取键盘摁键的key-->
	<input type="text" placeholder="按下回车提示信息" @keyup.enter="getKey">	
	<!--常用修饰符-->
	<input type="text" placeholder="按下回车提示信息" @keyup.enter="showInfo">
	<input type="text" placeholder="按下退出提示信息" @keyup.esc="showInfo">
	<!--tab 必须配合keydown去使用-->
	<input type="text" placeholder="按下tab换行提示信息" @keydown.tab="showInfo">
	<!--使用按键原始的key值去绑定-->
	<input type="text" placeholder="按下end提示信息" @keyup.end="showInfo">
	<input type="text" placeholder="按下end提示信息" @keyup.caps-lock="showInfo">
	<!--特殊处理：使用keyup时，会触发ctrl，shift 原有的事件，例如ctrl+s；使用keydown时，按下ctrl立刻触发showInfo-->
	<input type="text" placeholder="按下‘ctrl+其他按键’提示信息" @keyup.ctrl="showInfo">
	<input type="text" placeholder="按下ctrl提示信息" @keydown.ctrl="showInfo">
	<!--自定义键名-->
	<input type="text" placeholder="按下回车提示信息" @keyup.huiche="showInfo">
</div>

<script type="text/javascript">
	Vue.config.keyCodes.huiche = 13 //定义了回车按键别名
	new Vue({
		el:'#root',
		data:{},
		methods: {
			getKey(e){
				console.log("按键名称"e.key)
				console.log("按键编码",e.keyCode)
			},
			showInfo(e){
				console.log(e.target.value)
			}
		}
	})
</script>

总结

上面只是总结了在学习过程中部分知识点，根据后期的工作应用会进一步完善修改。