vue的学习与使用
vue是什么---基于js渐进式框架
脚手架 vue提供的全局包----创建脚手架项目
安装包
yarn global add @vue/cli
优点:开箱即用,0配置webpack
创建项目
vue create 项目名 //不能为中文,特殊字符,大写字母
template里只能有一个根标签
js独立作用域互不影响
style配合scoped属性,保证样式只对当前template生效
vue设计模式MVVM 数据 视图
不需要操作dom ,提高开发效率,数据驱动视图
指令 //给dom标签设置vue的值 v-bind:属性名="vue值", 简写:属性名="vue值" //给按钮绑定事件 v-on v-on:事件名 = "要执行的代码" v-on:事件名 = "methods函数" 简写@事件名="执行代码" //阻止默认行为 vue事件修饰符 @事件名.修饰符 = "methods里函数" .stop 阻止事件冒泡 .prevent 阻止事件默认行为 .once 程序运行过程中,只执行一次 监听回车事件 keyup.enter keyup.esc 检测返回按键 //双向绑定---s只能用在表单上 遇到复选框,v-model的变量值 非数组 - 关联的是复选框的checked属性 数组 - 关联的是复选框的vaule属性 把value属性和vue数据变量,双向绑到一起 //语法 v-model="vue数据变量" 数据变化影响视图变化 数据变化影响视图变化 //修饰符 .number 转换为数字类型 .trim 去除首尾空白字符串 .lazy 鼠标离开再显示页面 v-text和v-html的区别 //语法v-text="vue变量名" v-html何时识别html标签 相同点事,会覆盖标签里面的内容 v-show和v-if的区别 //语法:v-show="vue变量" v-show用的是display:none隐藏的 v-if 直接从DOM树上移出(可以结合v-else使用) v-for = "(值,索引) in 目标结构" v-for = "值 in 目标结构" 可以遍历数组/对象/数字/字符串(可遍历结构) 数组变更方法,导致v-for变更,页面更新 push() pop() unShift() shift() splice(索引,数量,添加的值(可为数组))--两个值是删除,三个值是添加数组 sort() reverse() 数组变更方法,返回新数组,就不会导致v-for更新,页面也不会更新filter() concat() slice() //如果想变更页面,可适用this.$set()--固定语法,新数组覆盖原数组
findindex 数组找下标---没有返回-1;找出第一个符合条件的值
indexOf 数组找下标
splice() //删除数组
过滤器
-----------用于插值表达式和动态属性v-bind中适用
全局过滤器---定义在入口文件中
//语法 ---实则是一个对象
Vue.filter("过滤器名",(值)=>{return "返回处理的值"}) //全局
Vue.filers(过滤器名字:值=>{return"返回处理后的值"}) //局部
1.同时使用多个过滤器
vue变量|过滤器1|过滤器二
2.给过滤器添加额外值
vue变量|过滤器(值)
//语法
filers:{
//值里面的值实则是一个函数
Fd(val){
return dayjs(val).format('YYYY-MM-DD')
}
}计算属性:
一个变量的值,需要用另外变量计算得来
computed:{
计算属性名(){
return "值"
}
}
//注意:计算属性名是变量,所以和data里面的值不要重复
计算属性的优势:
1.带缓存
2.计算属性对应的函数执行后,会把return值缓存起来
3.依赖项不变,多次调用都是从缓存取值
4.依赖性值-变化,函数会"自动"重新执行-并缓存新的值
计算属性完整写法------双向绑定,取值获取值
computed:{
sum:{
//赋值进来---给full赋值触发set()
set(val){
console.log(val)
},
//把值返回出去---使用full的值触发get方法
get(){
return "值"
}
}
}
数组方法:
every() 查找数组里面的每一个元素,如果有一个没有返回false----没有值,直接返回true
some()查找数组,如果找到一个就不找
侦听器
watch:{
"被侦听的属性名" (newVal,oldVal){
}
}
wacth:{
变量名:{
immediate:true //立即侦听(网页打开handler执行一次)
deep:true, //深度侦听(对象里面层的值改变)
headler(newVal,oldVal){
console.log(newVal,oldVal)
}
}
}组件
组件封装:重复调用,相互之间没有影响----各自独立,便于复用
定义全局组件: ----定义在入口文件中
import Vue from "vue"
//1.创建组件,---文件夹.vue
//2.引入组件
import 组件对象 from "vue组件文件路径"
//注册全局组件
Vue.component("组件名",组件对象) //组件名就是标签,可以当标签使用
注意:一般我们会把组件名和组件对象命名一样
定义局部组件: 定义在当前的文件
//1.创建组件-文件名.vue
//2.引入组件
import 组件对象(自定义) from "vue组件文件路径"
components:{
组件名:组件对象
}vue组件内样式,设置scoped只对当前组件内部的标签生效
原理:
会自动给标签添加data-v-hash值属性
组件传值:
父组件-->子组件 //属性绑定 通过props来接收-----props如果是对象或者数组,是可以被更改的
被引入的是子组件-----父引子
子---->父 事件绑定 //为了修改父组件身上的数据
this.$emit 子组件获取父组件
在子元素中绑定一个点击事件,在methods里面写一个函数,函数里面写this.$emit() 向父元素传数据;然后父元素对应的自定义事件="函数"即可
//子文件
//父文件
组件总结:
父传子(是父元素里面的东西传给子元素)--父引子
子传父(通过this.$emit()自定义属性的方式,把子元素传递给父元素)
//子元素
this.$emit("自定义函数名","传给父元素的值")
//父元素
接收自定义属性
自定义属性=函数名
methods:{
函数名(接收传进来的参数){
//
}
}生命周期---钩子函数
ajax发送get请求写在-----params中
发起post请求,写在-----data中
data改变更新的dom是异步
通过updated 和this.$nextTick可以获取更新的dom
this.$nextTick() //异步方法 //里面是一个paroms对象
mounted--经常用于获取dom
updated---更改值
destroyed---销毁
ajax实则是一种前端异步请求后端的技术
原理是浏览器window接口的XMLHttpRequest
axios是基于原生ajax+Promise技术封装通用前后端的请求库
axios的基本使用
axios({
method:'请求方法',
url:"请求地址",
data:{ //拼接到请求体的参数,post请求
xx:xx,
},
params:{ //拼接请求体的参数,get请求
xx:xx
}
}).then(res=>{
console.log(res.data) //后台返回的结果
}).catch(err=>{
console.log(err) //后台报错返回
})
ancys await
//1.下载axios包
//2.引用
//3.判断是get/post,里面添加url地址
//4如果是get则添加在params-----post添加在data里面
//5.通过ancys await使用,方便
配置地址的相同部分
axios.defaults.baseURL ="地址的相同部分"
获取原生DOM的方法
1.ref
2.document.qu....
ref=hh
console.log(this.$refs.hh)
id=h
console.log(document....("#h"))
vue组件
获取动态组件的方法:
全角空格
&emsp
缓存组件:
钩子函数 activated //激活状态 deactivated() //失去激活
组件插槽
1.父元素引入子元素,通过注册组件,把组件名当标签使用,然后可以在标签里面填写内容;子元素里面用占位符 2.具名插槽: 给父组件定义名v-slot:"名"/#名 子元素的
作用域插槽---父组件决定子组件如何显示
1.在子组件slot上绑定属性和子组件内的值
2.使用组件,传入自定义标签,用template和v-slot="自定义变量名"
3.自定义变量名自动绑定slot上所有属性和值
//{{scop.row.defaultObj}}
自定义指令
全局注册--- vue.directive("指令名",{
"inserted" (el){ //insertend方法,指令所在标签,被插入到网页上触发(一次)
//el
}
})
//updated() 指令对应数据/标签更新时
//bind() 只调用一次,指令第一次绑定到元素时调用.进行一次性的初始化
//使用 v-指令名
路由
1.单页面的概念和优缺点
概念:单页面应用(SPA),所有功能在一个html页面上实现
router-link---组件,相当于a标签(声明式导航)
当标签使用,必须传入to属性,指定路由路径值
router-link提供了声明式导航高亮的功能(自带类名)
动态传值
/path?参数名=值 查询字符串 /path/值 需要路由对象提前匹配 path/:参数名 动态id 接收 $route.query.参数名 $route.params.参数名
初始页面设置
{
path:"/", //默认hash值属性
redirect:"/find" //重定向到/find
}
用户访问未知页面,强制用户切换到onfound
在配置路由最后面添加一个path:"*" //匹配所有
component:"跳转的页面"
代码实例
{
path:"*"
component:"Nofund"
}
编程式导航
//实现跳转的功能,保有历史记录
this.$router.push({
path:"路由路径"
name:"路由名"
})
路由嵌套
一级嵌套二级,首先我们得明确是一级那个路由嵌套二级,然后在该文件里面挂载,在index.js里路由创建规则里面的该路由配置规则下写一个children[{路由不需要根路径/}]
目标:声明式导航-激活类名区别
1.url上hash值路径,与href属性完全相同,设置此类名 router-link-exact-active(精确匹配)
2.url上hash值,包含href属性这个路径 设置此类名 router-link-active(模糊匹配)
全局前置守卫
router.beforeEach((to,from,next)=>{
1.要跳转的路由
2.从哪里跳转的路由
3.函数体-next()才会让路由正常的跳转 next(false)会停留在原地,不会跳转
})
编程式导航-js方式跳转路由 this.$router.push() 页面跳转,保有历史记录 this.$router.replace() 页面跳转,没有历史记录
口诀:只要路由值发生改变,找路由匹配规则[router/index.js]===匹配成功找到组件===组件找到后,找坑位
首页入口
如果二级路由写了/ 就不需要通过一级路由来查找
如果二级路由没有写/ 需要根据一级路由来进行拼接查找