学习vue基础知识（一）
前端框架的3马车 angular 谷歌公司 m(数据)v（视图）c（控制器） 双向数据绑定react facebook （非死不可） 视图层的框架view 虚拟domvue 尤玉溪 双向数据绑定+虚拟dom是一套用于构建用户界面的渐进式框架 入门难度最低
为什么要学习vue
高效 1.运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高2.开发效率高 采用了组件化开发 将开发者的精力从dom操作解放出来，转移到数据操作上
爱上vue 3 5
什么叫做热爱 无时无刻的思念 写页面使用vue 抛弃原来二阶段的写法（直接操作dom）
vue的实例化
1.下载引入
2.找一个dom元素 这个dom要被vue控制
3.在js中实例化vue
数据绑定
指令 directive
指令后面跟的都是表达式或者变量
内置指令 vue内部提供的直接使用自定义指令 实现自定义某些功能的指令
条件渲染 都可以控制一个元素的显示或者隐藏 v-show 通过样式 display：none v-if 直接控制div元素有还是没有 （v-else v-elseif）事件绑定 使用vue中的事件 v-on：事件名（和原生js的事件名一致）:事件的处理函数 @事件名:事件处理函数 事件的处理函数写在实例的配置项 motheds 处理函数的默认参数是事件对象 如果需要传递其他参数 事件对象需要通过`$event 手动传递属性绑定 v-bind 元素的属性都是跟的固定的值 属性绑定可以实现 属性的后方跟变量或者表达式 v-bind：要绑定的属性名 <img v-bind:src=''> :要绑定的属性名 <img :src=''>列表渲染v-for 数组 表格 数字 字符串<td v-for ="(item,index) in/of 数据源"> </td> <td v-for ="(value,key,index) in/of 数据源"> </td>
双向数据绑定 v-model v-model 相当于 事件绑定v-on 和属性 v-bind 集合体将表单元素和data里的数据进行绑定 任何一方发生改变另一方都会跟着变
-
表单元素可以使用
-
组件也可用
v-html 相当于innerhtmlv-text 相当于innerText
自定义指令
全局自定义指令
Vue.directive('指令的名字',{
insterted(el){
el 自定义指令绑定的元素
}
})
v-自定义指令的名字
局部自定义指定 在哪注册在哪用 组件和实例都可以注册局部自定义指令
new Vue({
directives:{
自定义指令的名字:{
inserted(el){
}
}
}
})
组件
1.创建组件 2.注册组件 3.使用组件局部组件 全局组件 的区分就是注册位置不同全局的Vue.component('组件名',{ 组件的配置项})局部的new Vue({ ... components:{ 组件名：{ 配置项 }, hehe:{ template:'#hehe', components:{ xixi:{ template:'#xixi', components:{ .... } } } } }vue})
组件的配置项和实例配置的区别
绑定元素 el template 数据 data 对象 data 函数自定义指令 directive directive方法 methods methods组件 计算属性监听....
组件通信
在组件和实例中自己的数据只有自己可以控制
-
父子通信 props父组件控制子组件 父组件控制自己的数据变化，将变化后的数据通过props自定属性传子组件
-
子父通信 $emit 子组件控制父组件的数据 父组件控制自己的数据变化，将控制函数通过emit自定义事件传递子组件 供子组件调用
-
兄弟通信亲兄弟a.状态提升 父子和子父结合远亲状态b.事件总线 eventbus c.全局状态管理
vue的脚手架工具
将npm镜像换成淘宝镜像npm install -g @vue/clivue -V 出现版本号新建一个文件 进入文件目录 执行 vue create name (名字随便起)进入项目目录 执行npm run serve
过滤器
数据库时间储存格式 时间戳时间 2007.10.11 2007/01/11 2007年10月11日 对数据的处理
-
全局过滤器 Vue.filter(过滤器名,处理函数)
-
局部过滤器 组件或者实例里的配置项filters:{过滤器名,处理函数}
监听watch
watch 是配置项的一种 主要功能是监听数据的改变
人生
人生如戏 大悲咒0-1-0猥琐发育别浪入世打怪升级更新自己在世离世回顾一生 寻找遗憾解决遗憾
生命周期
4（4个阶段） 8（每个阶段2个钩子函数） 2（缓存的钩子） 1（捕获错误的钩子函数）vue（实例）组件的一生和人生及其想似
beforeCreate创建 创建虚拟dom createcreatedbeforeMount挂载 虚拟dom 变成真实dom 出现在页面上 在世mounted beforeUpdate更新 更新数据->更新dom元素updatedbeforeDestory销毁 组件离世的时候destroyed
常用 created 网络请求mounted 网络请求 初始化dombeforeDestory/destroyed 组件销毁前擦屁股解决遗憾
eslint
帮助我们代码更加规范 错误非常多流派 tab 2空格 4空格{} 换行流 function test(){
}
function test(){
}
脚手架项目的基本目录
src 源码目录 main.js 入口文件 xx.vue 单文件组件public 公有资源node_module 依赖包package.json 项目依赖readme 项目提示
项目分类
-
spa single page web application 单页面应用 只有一个htmla.seo优化不好 b.首屏加载过慢 首屏白屏c.页面切换的用户体验好
-
mpa 多页面应用 多个html
组件切换1 动态组件
<div is = 'hehe'></div> is 可以指定渲染的组件名div 渲染成一个叫呵呵的组件推荐与component 标签一起使用
组件切换2 路由
监听地址栏的改变 根据改变渲染不同的组件
基本使用
-
下载安装路由 npm install vue-router
-
创建路由表 a. 引入vue 和vue-router b. 在vue中使用vue-router c. 创建路由实例 确定路径和组件的对应关系d. 抛出路由实例
-
在main.js 注册路由
-
就可以使用2个组件<router-link to tag active-class > 控制地址栏改变 <router-view> 开启一片空间渲染指定的组件
路由的模式 mode 哈希 和历史 通过路由表里 mode 设置 hash 路由 地址栏中有# history 路由 没有# 和正常使用的类似 命名路由 命名视图 重定向 声明式导航 和编程式导航 <a href='www.baidu.com'/> window.location.href='www.baidu.com'
<router-link > 进行组件切换叫做 声明式导航 通过路由对象下的api 进行切换叫做编程式导航 vm.$router push replace go back forward push 会将组件加入到缓存栈 可以一级一级返回 replace 没有加入缓存栈 回到最初的起点
路由传参 切换组件的时候给目标组件传一个参数
-
切换的时候传递参数
-
切换完毕 在目标组件接受参数
动态路由 路由的路径中的有1项或者几项是变量可以变化在目标组件 通过 $route.params 来接受数据routes:[ { path:'/login/:hehe/:xixi' }]query传参 相当于get 传递参数 数据会出现在地址栏上 缺少安全性 有数据长度限制 this.$router.push('/name?us=123$ps=123') this.$router.push({path:'/name',query:{us:123,ps:123}}) 在目标组件里通过this.$route.query()进行接受params传参 不会出现在地址栏上 没有长度限制问题 不能和path一起使用 this.$router.push({name:"hehe",params:{us:123,ps:123}}) 在目标组件里通过 this.$route.param()接受
嵌套路由 (子路由)
-
路由表形成嵌套 子路由路径不加/routes:[ { path:"/my", component:My, children:[ {path:'userInfo',component:UserInfo} ] }]
-
在目标组件里 在嵌套一个router-view
路由守卫 （拦截器）
-
某些页面登录之后才能访问 没有登录不等访问
