Vue学习笔记（一）——初识Vue（模板语法、数据绑定、事件处理）

Vue作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。Vue.js最突出的优势在于可以对数据进行双向绑定。
使用Vue.js 编写出来的界面效果本身就是响应式的，相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。Vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。

Vue.js专注于MVWM模型的ViewModel 层。它通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。jQuery是使用选择器() 选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。 Vue 则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。
 

1.模板语法

Vue模板语法有2大类：

1.1.插值语法：

功能：用于解析标签体内容。

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

1.2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。

举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，

且可以直接读取到data中的所有属性。

2. 数据绑定 

Vue中有2种数据绑定的方式：

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

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

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

v-bind:value可以简写为:value

3.事件处理 

3.1 事件的基本使用：

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

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

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

注意：是指methods中直接配置的函数，不能使用箭头

但methods中的函数的函数，需要写成箭头函数，使得this指向vm

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

5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；并且有多个参数时，可以在参数中添加$even，来添加事件参数，如：<button @click="showInfo2($event,66)">传参</button>

注：获取Dom元素的value，可以在元素的事件的回调函数参数中添加$event

然后在回调函数中获取：函数名(e){e.target.value}

3.2 事件修饰符 

1.prevent：阻止默认事件（常用）；

如链接跳转：<a href="url" @click.prevent="showInfo">提示信息</a>

2.stop：阻止事件冒泡（常用）；<button @click.stop="showInfo">

3.once：事件只触发一次（常用）；<button @click.once="showInfo">

4.capture：使用事件的捕获模式 ;

<div class="box1" @click.capture="showMsg(1)">
	div1
	<div class="box2" @click="showMsg(2)">
		div2
	</div>
</div>

5.self：只有event.target是当前操作的元素时才触发事件；

<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>//也可以阻止冒泡
</div>

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<ul @wheel.passive="demo" class="list"> //scroll监听滚动条滚动，wheel监听鼠标滚轮滚动
    <li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

并且有先后顺序，如@click.prevent.self会阻止所有的单击，@click.self.prevent只会阻止对元素自身的单击。

3.3 键盘事件 

1.Vue中常用的按键别名：

回车 => enter / Enter 如@keyup.ente="函数名"：按下回车键并松开时才触发

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用，因为tab键会自动切换焦点)

上 => up

下 => down

左 => left

右 => right

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

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他任意键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

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

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

注意：多个按键同时按下调用用链式：@keyup.ctrl.y="函数名"