前端三大框架
1.Vue
2.React
3.Angular
特点
尤雨溪创造,v2与v3两个版本
结合angular的指令与react的组件,虚拟dom
渐进式JavaScript框架
Vue安装
直接引用<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
创建应用实例
new Vue 函数创建一个新的应用实例
var vm = new Vue({
el:"#app",//指定vue的模板css选择器
data:{msg:"hello Vue!"}// 指定data数据
})
模板
<div id="app">
hello Vue!
</div>
文本渲染指令
1.{{}}
2.v-text
3.v-html
条件渲染器指令
1.v-if
2.v-else
3.v-else-if
4.v-show
隐藏元素以css的方式
频繁切换用v-show
少量切换用v-if
面试题
v-if和v-show的区别
1.都是用来控制显示和隐藏
2.v-if通过dom操作来实现,v-show通过css来操作
3.频繁切换用v-show,反之用v-if.
-
遍历指令
-
v-for
- 字符串 数字对象 列表进行遍历
- <p v-for="(item,index) in list" v-key="item">{{item}}-{{index}}</p>
- item 遍历的元素
- index 遍历的下表
- list被遍历的数组
-
v-bind:key
- 值必须是唯一的
- 为了让vue更好的优化渲染列表
-
属性绑定
v-bind:title=“msg”
:title=“msg” 属性绑定简写形式
事件
v-on:click=“num++”
事件指令
@click=“num++”
事件绑定简写
@click="sayNum"
默认传入事件对象
@click="sayNum(3)"
传入实参3
@click=“sayNum($event,3)”
传入事件对象和实参3
事件修饰符
.stop
阻止事件冒泡
.prevent
阻止默认事件
.once
只响应一次
.enter回车
.up上
.down下
.esc取消
.del删除
按键修饰符
keydown,keyup
系统修饰符
.ctrl
.shift
鼠标修饰符
.left
.middle
.right
表单
v-model=“num”
把num的数据和表单的值绑定到一起
单行,多行
多选
一个默认值
选中为true
未选中为false
多个值,绑定的数组动态添加/移除当前元素的value值
表单修饰
.lazy .change事件触发更新数据
.number强制转换为数字
v-model=“mum”简写
:value=“mum”
@input=“num=$event.target.value”
Vue操作
让指令链接数据和dom
业务操作数据 实现自动更新dom
computed计算
从现有数据计算出新的数据(只读)
conputed:{
name:function(){
return xxxxx
}}
watch监听
监听数据变化执行回调函数
watch:{
obj:{
handler(){
//执行回调函数
},
deep:true
}
class
文本
:class="active"
没有加单引号的active是一个变量不是字符串
对象
:class="{'active':flase}"
数组
:class="list"
style
:style="{color:'red','fontSize':24px}"
css属性驼峰式写法
自定义指令 directtives
作用:操作dom;实例化第三方基于dom的插件
directives:{
“focus”:
update(el,binding){
//el指令所在节点
//binding.value指令的值
}
}
<input v-foucs=“true”>
update 更新就执行
bind绑定一次
inserted插入
filters 过滤,管道
{{3.1415926|fix}}
{{3.1415926|fix(4)}}
filters:{
fix(val,len=2){
renturn Number(val).toFixed(len)
}}
val是过滤前的值
return过滤后的值
len fix过滤器的参数
作用:格式化数据
Vue选项
el 模板
data 数据
methods方法
directives指令
filters过滤
watch监听
computed计算
props属性
created创建完毕
template模板
componets组件
动画
两个状态形成过渡
进入和离开 v-show v-if
transition 单个动画元素
属性
name 名称
enter-active-class=“fadein animated” 指定进去class
leava-active-class=”“ 指定离开class
产生状态与类
v-enter-active
v-enter 进去开始状态
v-enter-to进入结束状态
v-leava-active
v-leava
v-leava-to
traansition-group 动画组
属性
tag 用什么标签包裹所有的动画组元素
产生状态与类
通 transition
v-move正在移动中的元素
组件
作用
1.组件是vue的重要的特点
2.实现多人协作开发
3.通过组件划分降低开发的难度
4.实现复用,降低重复劳动
组件解释
组件就是定义好的的功能模块
建议:多用props,少在组件中使用data(降低组件的耦合性,提高复用性)
定义与使用
1.定义
注意:template有且只有一个根节点
const steper={
template:·<span></span>·
}
2.在父组件中注册
componts:{steper:steper}
3.在组件的模板使用
<steper></steper>
传参
父传子
父:
<modal:visible="visible">
子:
props[
visible:{type:Boolean,default:false}
}
子使用:
注意:vue是单向数据,父组件传递给子组件的props是只读(不能修改)
this.vasible
子传父
子:
this.$emit("update:visible",false);
父:
监听事件,修改值
<modal @update:visible="visible=$event">
插槽
插槽:
组件的嵌套内容
父
<modal>
<input/>
<button></button>
</modal>
子组件 模板中使用
template:·<div><solt></solt></div>·
回顾
数组
indexOf() 查找对应下标
删除
shift 前删除
pop后删
splice 中间删
添加
unshift 前加
push 后加
splice也可以添加
翻转 reverse
转字符串 join()
连接数组 concat()
高阶
fifter 过滤
forEach遍历
map映射
reduce累计
some有一个
every每一个
find查找符合条件元素
findindex查找符合条件的元素的下标
sort排序
字符串
indeOf lastindexOf
查询字符串下标 找不到返回-1
split(‘’)分割为数组
slice(start ,end)切割字符串
substring (start,end)截取字符串按下标end
substr(start,len)截取字符串按长度len
json
eval()字符串当js执行
JSON.parse(str) json字符串转换为js对象
JSON.stringify(obj)把js对象转换为json字符串
本地存储
getItem(key)获取值
setItem(key,value)储存值
removeItem(key)删除存储
clear()清空