Vue笔记一

目录

一 Vue简介

二 基础语法

js表达式和js代码(语句)区分:

三 模板语法

四 数据绑定

五 el与data的两种写法

六 MVVM

七 数据代理

 Vue中的数据代理:

八 事件处理

  事件的基本使用

事件修饰符

---

一 Vue简介

Vue是一套用于构建用户界面的渐进式（Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库，复杂应用:可以引入各式各样的Vue插件）JavaScript框架。

特点：1采用组件化模式，提高代码复用率、且让代码更好维护。（一个vue文件就是一个组件）

            2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。
            3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

二 基础语法

 以图片代码为例分析；

Vue工作前必须创建个Vue实例， 且要传入一个配置对象;
 root容器里的代码（Vue模板）依然符合html规范， 只不过混入了一些特殊的Vue语法;

注意：一个容器对应一个Vue实例，它们一 一对应。

真实开发中只有一个Vue实例， 并且会配合着组件一起使用;
{{xx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;
如果data中的数据发生改变， 那么页面中用到该数据的地方也会自动更新;
 

js表达式和js代码(语句)区分:

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方:
例：(1).a(2). a+b(3). demo(1)(4).x===y?'a’:'b'
2.js代码（语句）
例：(1). if(){}  (2). for(){}（不产生值，控制代码走向 ）

三 模板语法

Vue模板语法有2大类: 
1 插值语法:
功能:用于解析标签体内容。
写法: {{xxx}}, xxx是js表达式， 且可以直按读取到data中的所有属性。
2. 指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
举例: v-bind:href="xxx" 或简写为 :href="xx", xxx同样要写js表达式，
1且可以 直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-????, 此处我们只是拿v-bind举个例子。

四 数据绑定

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

五 el与data的两种写法

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

六 MVVM

1. M:模型(Model) :对应data中的数据
2. V:视图(View) :模板
3. VM:视图模型(ViewModel) : Vue 实例对象
注意：data中所有的属性，最后都出现在了vm身上。
          vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

七 数据代理

先通过下面例子理解 Object.defineProperty（）

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

 Vue中的数据代理:

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

 如果没有数据代理，vm对象没有vm.name、vm.address，但有vm._data。模板也只能如图中所示这样写：

 有了数据代理，Vue向vm对象添加name、address属性，它们的值通过getter、setter读与改。模板就可以简短的写：

八 事件处理

  事件的基本使用

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

事件修饰符

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

 事件修饰符可以连续写，两个之间用.连接，如@click.prevent.stop,@click.stop.prevent,这两个效果一致，但前者先执行阻止默认事件，后者先阻止事件冒泡

按键编码：event.keyCode,按键名：event.key

1. Vue中常用的按键别名:
回车=> enter
删除=> delete ( 捕获“删除”和“退格”键)
退出=> esc
空格=> space
换行=>tab（按下tab键焦点会消失，不能同keyup连用，应该同keydown配合使用,@keydown.tab="事件名"）
上=>up
下=> down
左=>left
右=>right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊) : ctrl、 alt、 shift、meta（Windows徽标键）
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

例：如果要指定ctrl键只能同y键则可以用@keyup.ctrl.y。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名