一、 Vue简介
1.1 概念
一套用于构建用户界面的渐近式JavaScript框架。
官方学习网址:https://cn.vuejs.org/
渐进式:Vue可以自底向上逐层的应用。
- 简单应用:只需要一个轻量小巧的核心库
- 复杂应用:可以引入各式各样的Vue插件
1.2 特点
- 采用组件化模式,提高代码复用率、且让代码更好维护。
- 声明式编码,让编码人员无需直接操作DOM,提高开发效率。
- 使用虚拟DOM+Diff算法,尽量复用DOM节点。
1.3 与其它 JS 框架的关联
- 借鉴 Angular 的模板和数据绑定技术。
- 借鉴 React 的组件化和虚拟 DOM 技术。
1.4 Vue使用总结
- 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象:
- 准备的容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
- 容器里的代码被称为【Vue模板】
- Vue实例和容器时一一对应的;
- 真实开发中只有一个Vue实例,配合组件一起使用;
- {{xxx}}中写的时js表达式,且xxx可以自动读取data里面的数据;
- 一旦data中数据发送改变,那么模板中用到该数据的地方也会自动更新。
示例代码:
<!-- 准备好一个容器 -->
<div class="root">
<!-- 插值语法{{}} -->
<p>hello,{{name.toUpperCase()}},年龄:{{age}}</p>
</div>
<script type="text/javascript">
//阻止Vue在启动时产生生产提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '.root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串
data: { //data中用于存储数据,数据供el所指定的容器去使用,值暂时写成一个对象
name: 'shangguigu',
age: 18
}
});
</script>
二、 模板语法
**html 中包含了一些 JS 语法代码,语法分为两种,分别为: **
- 插值语法(双大括号表达式)
- 指令(以 v-开头)
2.1 插值语法
作用:用于解析标签体内容。
语法:{{xxx}} xxx时js表达式,直接读取data里面的所有属性。
2.2 指令语法
作用:用于解析标签(标签属性,标签体内容,绑定事件)。
语法:v-bind: 简写===》 : 且直接读取data中的所有属性。
三、 数据绑定和代理
3.1 数据绑定
单向数据绑定
- 语法:v-bind: 或简写为 :
- 特点:数据只能从 data 流向页面
双向数据绑定
- 语法:v-mode:value="xxx" 或简写为 v-model="xxx"
- 特点:data数据不仅能从 data 流向页面,还能从页面流向
3.2 数据代理
概念
- 通过一个对象代理对另一个对象中属性的操作(读/写)
好处
- 更加方便的操作data中的数据
基本原理
- 通过Object.defineProperty()把data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性,都指定一个getter/setter。
- 在getter/setter内部去操作(读/写)data中对应的属性。
四、 事件处理
效果:
4.1 事件的基本使用
- 使用v-on:xxx 或者 @xxx 绑定事件,其中xxx是事件名;
- 事件的回调需要配置在methods对象中,最终会在vm了;
- methods中配置的函数,不要用箭头函数!否者this就不是执向vm;
- methods中配置的函数,都是被Vue管理,this指向 vm 或者 组件实例对象
- @click="demo" 和 @click="($event)" 效果一样,但后者可以传参
4.2 事件修饰符(可以连续写)
- prevent:阻止默认事件(常用);
- stop:阻止事件冒泡(常用);
- once:事件只触发一次(常用);
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素时才触发事件;
- passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
4.3 键盘事件
(1)常用按键别名
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊,必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
(2)Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
(3)系统修饰键(用法特殊)
- ctrl、alt、shift、meta。
- 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。
- 配合keydown使用:正常触发事件。
(4)按键修饰符
- keyCode : 操作的时某个keycode值的键。
- Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
- keyName :操作的某个按键名的键(少部分)。
五、 计算属性与监视属性
5.1 计算属性
定义
- 要用的属性不存在,要通过已有属性计算得来。在computed对象中定义计算属性。
原理
- 底层借助了Objcet.defineproperty方法提供的getter和setter。
get函数什么时候执行
- 初次读取时会执行一次。
- 当依赖的数据发生改变时会被再次调用。
优势
- 与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.2 监视属性
当被监视的属性变化时, 回调函数自动调用, 进行相关操作。
监视的属性必须存在,才能进行监视!!
监视的两种写法
- new Vue时传入watch配置
- 通过vm.$watch监视
深度监视
- Vue中的watch默认不监测对象内部值的改变(一层)。
- 配置deep:true可以监测对象内部值改变(多层)。
六、指令
6.1 内置指令
v-model: 双向数据绑定
v-for: 遍历数组/对象/字符串
v-on: 绑定事件监听, 可简写为@
v-if: 条件渲染(动态控制节点是否存存在)
v-else: 条件渲染(动态控制节点是否存存在)
v-show: 条件渲染 (动态控制节点是否展示)
v-bind: 单向绑定解析表达式, 可简写为 :xxx
v-text指令:向其所在的节点中渲染文本内容。
v-cloak指令(没有值):可以解决网速慢时页面展示出{{xxx}}的问题
v-html指令:向指定节点中渲染包含html结构的内容。
v-once指令:所在节点在初次动态渲染后,就视为静态内容了。
v-pre指令:跳过其所在节点的编译过程。
6.2 自定义指令
定义语法
- 局部指令
new Vue({new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} })
- 全局指令
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
- bind:指令与元素成功绑定时调用。
- inserted:指令所在元素被插入页面时调用。
- update:指令所在模板结构被重新解析时调用。
注意
- 指令定义时不加v-,但使用时要加v-;
- 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
版权归原作者 四季奶青全糖去冰@ 所有, 如有侵权,请联系我们删除。