目录
vue%E7%AE%80%E4%BB%8B-toc" style="margin-left:40px;">1.vue简介
vue%E7%89%B9%E7%82%B9-toc" style="margin-left:40px;">2.vue特点
3.初识Vue
4.模板语法
5. MVVM模型
6. 数据代理
7. 事件处理
vue%E7%AE%80%E4%BB%8B">1.vue简介
vue%E7%89%B9%E7%82%B9">2.vue特点
1.采用组件化模式,提高代码复用率、且让代码更好维护
2.声明式编码,让编码人员无需直接操作DOM,提高开发效率
3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
.学习Vue之前要掌握的JavaScript基础知识
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
3.初识Vue
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
- root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
- root容器里的代码被称为【Vue模板】;
- Vue实例和容器是一一对应的;
- 真实开发中只有一个Vue实例,并且会配合着组件一起使用;
- {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
- 一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b (3). demo(1)
(4). x === y ? 'a’ : "b"
2.js代码(语句)
(1). if(){}
(2). for(){}
4.模板语法
Vue模板语法有2大类:
1.插值语法:
- 功能:用于解析标签体内容。
- 写法:{{xxx]},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法
- 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....) .
- 举例:v-bind:href="xxx”或简写为:href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。
- 备注:Vue中有很多的指令,且形式都是: v-????
数据绑定
Vue中有2种数据绑定的方式:
- 单向绑定(v-bind):数据只能从data流向页面。
- 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
备注:
- 双向绑定一般都应用在表单类元素上(如: input、select等)
- v-model :value可以简写为v-model,因为v-model默认收集的就是value值.
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount( ' #root ')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
5. MVVM模型
1.M:模型(Model) :data中的数据 2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性及 Vue原型上所有属性,在Vue模板中都可以直接使用。
6. 数据代理
1.Vue中的数据代理:
- 通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
- 更加方便的操作data中的数据
3.基本原理:
- 通过object.defineProperty()把data对象中所有属性添加到vm上.
- 为每一个添加到vm上的属性,都指定一个getter/setter。
- 在getter/setter内部去操作(读/写)data中对应的属性。
7. 事件处理
事件的基本使用:
- 使用v-on : xxx或@xxx绑定事件,其中xxx是事件名;
- 事件的回调需要配置在methods对象中,最终会在vm 上;
- methods中配置的函悉,不要用箭头函数!否则this就不是vm了;
- methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
- @click="demo”和@click="demo($event)”效果一致,但后者可以传参;
Vue中的事件修饰符:
- prevent:阻止默认事件(常用);
- stop:阻止事件冒泡(常用);
- once:事件只触发一次(常用);
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素时才触发事件;
- passive:事件的默认行为立即执行,无需等待事件回调执行完毕;