Vue基础
Vue简介
Vue是什么？
一套用于构建用户界面的渐进式JavaScript框架
Vue可以自底向上逐层的应用
Vue的特点
采用组件化模式，提高代码复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例， 且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为[Vue模板] ；
4.vue的实例和容器只能一一对应；
5.真实开发中只有一个Vue实例，并且会配合着组件起使用；
6.{{xxx}}中 的xxx要写js表达式， 且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变， 那么模板中用到该数据的地方也会自动更新；
hello,{{name.toUpperCase()}},{{address}}
Vue基础
模板语法
Vue模板语法有2大类:
- 插值语法:
功能:用于解析标签体内容。
写法: ({xx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 - 指令语法:
功能:用于解析标签(包括：标签属性、标签体内容、绑定事件.....)。
举例: v-bind:href="xx" 或 简写为:href="xxx", xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
el与data的两种写法
data与el的2种写法
-
el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm. $mount('#root' )指定e1的值。 -
data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。 -
一个重要的原则:
由Vue管理的函数，一定不要写简头函数，一旦写了箭头函数,this就不再是Vue实例了
MVVM模型
-
M:模型(Model) :对应data中的数据
-
V:视图(View) :模板
-
VM:视图模型(ViewModel) : Vue实例对象
-
观察发现:
-
data中所有的属性，最后都出现在了vm身上。
-
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
-
学会：{{name}}
学会：{{address}}
数据代理
-
Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写) -
Vue中数据代理的好处:
更加方便的操作data中的数据 -
基本原理:
通过Object.defineProperty( )把data对象中所有属性添加到vm上。
为每个添加到vm上的属性，都指定个getter/setter。
在getter/setter内部去操作(读/写) data中对应的属性。
数据代理Object.defineProperty
vue中的数据代理
名称：{{name}}
事件处理
事件的基本使用:
- 使用v-on:xxx或@xxx绑定事件，其中xxx是 事件名;
- 事件的回调需要配置在methods对象中，最终会在vm.上;
- methods中配置的函数，不要用箭头函数!否则this就不是vm了;
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象;
- @click="demo"和@click=" demo($event)"效果一致， 但后者可以传参;
键盘事件
-
Vue中常用的按键别名:
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right -
Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
-
系统修饰键(用法特殊) :ctrl、alt、shift、meta（win）
- 配合keyup使用:按修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用:正常触发事件。
-
也可以使用keyCode去指定具体的按键(不推荐)
-
Vue. config . keyCodes.自定义键名=键码，可以去定制按键别名
名称：{{name}}
事件修饰符
Vue中的事件修饰符:（可以连续使用）
- prevent:阻止默认事件(常用)
- stop:阻止事件冒泡(常用) ;
- once: 事件只触发一次(常用);
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素是才触发事件;
- passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
Document
名称：{{name}}
- 1
- 2
- 3
- 4
- 5
计算属性
-
定义:要用的属性不存在，要通过已有属性计算得来。
-
原理:底层借助了Objcet.defineproperty方法提供的getter和Isetter.
-
get函数什么时候执行?
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
-
优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。
-
备注:
- 计算属性最终会出现在vm上，直接读取使用即可。
- 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
插值语法案例
姓：
名：
全名：{{fullName()}}
计算属性实现
姓：
名：
全名：{{fullName}}
计算属性简写
姓：
名：
全名：{{fullName}}