一.什么是vue
概述:Vue是一款前端渐进式框架,可以提高前端开发效率。
特点:
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.
二.条件指令
指令语法,用来解析标签(标签属性,标签体内容)在内联样式表直接调用 ,都以v-开头
1.v-bind
v-bind是单向绑定,用于动态绑定属性。简写:
1.当元素的属性值要求为变量时,我们可以使用v-bind来修饰属性
2.v-bind修饰的属性值里,可以写js表达式
3.当 v-bind的属性值为对象时会将对象展开作为标签的属性,优先级要注意,v-bind赋予的属性优先级始终最低
2.v-model
v-model双向绑定,只能用于表单类元素。进行双向绑定后,即可与vue实例中的数据进行实时变换。
作用:双向数据绑定
原理:当表单元素内容被修改时,触发对应的表单事件,在事件中完成对数据的修改
这里引入一个新的变量 ref
ref如果绑定在DOM元素上,会将该元素记录在$refs上,通过this.$refs即可获得到DOM元素
3.v-text与v-html
v-text与v-html的区别:1.v-text显示文本内容,但是不能对标签进行转义
2.v-html显示文本内容,可以对标签进行转移
4.v-on绑定事件
v-on:click=" fn()" click可以换成任意的事件,从而使我们完成点击事件,键盘事件。简写为@click="fn()"
键盘事件中有事件修饰符通过 .enter回车 .delete 删除 .esc退出 .space空格 .tab切换 来触发事件
vue.config.keyCode.自定义名字=键名
在事件中$envent,函数传参e 通过e.target可以找到对应的元素
5.v-if·v-show 与v-for
1.v-if="判断条件" v-else-if=“ 判断条件” 对其进行条件判断进行渲染
2.v-show=“判断条件” 在内联样式中 判断是否显示 会明显看到display="none"
3.v-if与v-show的区别
v-if 是渲染或不渲染 如果不渲染 在html中找不到这个标签
v-show 是显示或不显示 在html中可以找到这个标签
4.v-for=“(item,index)in list ” 对list进行遍历,用于动态生成标签 这里index是唯一的,我们可以通过index找到对应的元素
三.数据代理
数据代理:通过一个对象代理对另一个对象中属性的操作
数据代理的好处:更加方便的操作data中的数据
数据代理的基本原理:通过Object.defineProperty()把data对象中所有属性添加到vue上,为每一个添加到vue实例对象上的属性,都指定一个getter/setter,在getter与setter中去操作data中对应的属性
在data中添加任意属性:this.$set(this.list,'sex','男')
四.事件修饰符
.prevent 阻止默认 .stop 阻止冒泡 .once 只触发一次 .capture 事件捕获 .enter回车 .delete 删除 .esc退出 .space空格 .tab切换
五.vue实例对象的属性
通过new Vue({
el:"#app"
})创建一个vue实例对象
其中还有data属性,methods,computed ,watch属性
1.methods属性
methods 方法表示一个具体的操作,主要书写业务逻辑;
2.computed属性
computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用;
3.watch属性
watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods 的结合体;
六.钩子函数
钩子函数指在一个vue实例从创建到销毁的过程自动执行的函数
beforeCreate() 实例创建前触发
created()实例创建完整
beforeMount()模板渲染前完成
mounted()模板渲染完成触发
beforeUpdate()数据修改前
updated()数据修改完成
activated()激活前
deactivated()激活后
beforeDestroy()销毁前
destoryed()销毁后
七.网络请求
网络请求 在之前我们都是使用ajx进行后台数据处理,vue使用的是fetch与axios,但是他们的本质还是promise
fetch().then().catch()
axios().then().catch()