一、 vue的基础用法
v-if :是否插入元素 （用的相对较少）
v-show :是否隐藏元素
二、父子组件传值（父传子）
- 1.父传子的时候通过属性传递
- 2.子要声明props:["属性名"]来接收
- 3.收到就是自己的了,随便你用
。在template中 直接用
。在js中 this.属性名 用
总结:父传子 --父传子（属性），子声明（收），子直接用
三、注册全局组件
- 全局API Vue.component("组件名",组件对象);
四、附加功能：过滤器&监视改动
1.filter || filters
。filter为全局过滤器（给数据添油加醋显示）vue.filter("过滤器名,过滤方式fn")
。组件内的过滤器 filters:{"过滤器名",过滤方式fn}
示例一：filters的使用 ---- 示例二：filters对象的方法里面可以传很多参数的使用
2.监视的使用
- watch监视单个
- computed监视多个
。computed:{监视的业务名：function(){ return 显示一些内容 }}
。使用：{{ 计算属性的名称 }}
[watch简单例子1:] (https://upload-images.jianshu.io/upload_images/8496278-e961ee2d18f30d86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
watch监视复杂类型的例子2:图1-----图2深度监视
computed使用的例子：图.png
总结：
- 当组件/过滤器为全局：大家直接用 全局不带s
- 过滤器：
function（原始数据，参数1，参数2）{ return 结果;}
。调用{{ '数据' | 过滤器名(参数1，参数2) }}
-监视
。watch 单个监视
。computed 群体监视
五、slot的使用
- 内置的组件
- slot就是子组件里给DOM留下的坑 外部填入html内容
- <子组件>DOM</子组件>
- slot动态的DOM、props是动态的数据
例子1图片
总结
- slot其实就是父组件传递的DOM结构
- vue提供的内置组件<slot></slot>
六、组件的生命周期
- beforeCreate
组件创建之前，这里不能操作数据，只是初始化了事件等
- created
组件创建之后，可以操作数据、并且实现vue->页面的影响。应用：发起ajax请求。
- beforeMount
vue起作用，装载数据到DOM之前 只执行一次 即new Vue 发生装载 替换
<div id="app">之前
- mounted
vue起作用，装载数据到DOM之后（就是vue作用以后的DOM ）只执行一次 注：此处才能使用this.refs.'xxxx'的dom元素。
- beforeUpdate
基于数据改变 影响页面 数据更新前
- updated
基于数据改变 影响页面 数据更新后
- activated
结合kepp-alive使用 组件被激活了
- deactivated
结合kepp-alive使用 组件被停用了
- beforeDestroy
销毁之前 对应父组件v-if false （在父组件利用变量使子组件消失和出现 只能和v-if配套使用） 就销毁当前组件
//销毁，最终都是做一些其他功能的释放，比如：保存到localStorage、重置数据等功能
- destroyed
销毁之后
//销毁，最终都是做一些其他功能的释放，比如：保存到localStorage、重置数据等功能
-
总结
1.created 和 actived 都是v-if=“true” 子组件的状态
2.created没有被keep-alive内置组件包裹，actived被包裹了。
销毁和停用同上
七、获取DOM元素
- 救命稻草，document.querySelector
- 1:在template中标识元素 ref="xxxx"
- 2:在要获取的时候，this.$refs.xxxx获取元素
。创建组件，装载DOM，用户点击按钮 - ref在DOM上获取的是原生DOM对象
- ref在组件上获取的是组件对象
。$el是拿其DOM
。这个对象就相当于我们平时玩的this，也可以直接调用函数
-
总结
// $属性：$refs 获取组件内的元素,
// $parent: 获取当前组件对象的父组件
// $root : 获取new Vue的实例
// $el: 组件对象的DOM元素
一个小例子：
[01$ref获取不到dom的情况.jpg] (https://upload-images.jianshu.io/upload_images/8496278-6fe2debdfefcd87f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[02vue操作dom的细节点.jpg](https://upload-images.jianshu.io/upload_images/8496278-5f8870157287a452.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
[03解决$ref获取不到dom的情况.jpg](https://upload-images.jianshu.io/upload_images/8496278-82acb8d4cc9153bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
八、路由
1.路由原理
- 传统开发方式 url改变后立刻发起请求，响应整个页面，渲染整个页面
- SPA锚点值改变后不会发起请求，发起ajax请求，局部改变页面数据
。页面不跳转，用户体验更好。
注：SPA是什么？
- single page application(单页面应用程序)
- 前端路由
。锚点值监视
。ajax获取动态数据
。核心点是锚点值
- 前端框架Vue/angular/react都很适合开发单页应用
#demo1
<script>
// hashchange事件.. url上的部分锚点数据(#xxx)改变. 可以获取到这个事件
window.addEventListener('hashchange',function(){
console.log(location.hash)
});
</script>
[01路由的核心.jpg](https://upload-images.jianshu.io/upload_images/8496278-d71e97ed36b01c51.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.命名路由
- 1.给路由对象一个名称 { name:'home',path:'/home',component:Home }
- 2.在router-link的to属性中描述这个规则
。<router-link :to="{'name':'home'}"></router-link>
。通过名称找路由对象，获取其path。生成自己的href
- 大大降低维护成本，锚点值改变只用在main.js中改变path属性即可
#demo2 router-link的使用
[01.router-link的使用.jpg](https://upload-images.jianshu.io/upload_images/8496278-67ca385c57ce3147.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
-
总结
3.query与params
- $route 路由信息对象，只读对象
- $router 路由操作对象，只写对象
query与params.jpg
query与params使用总结.jpg
4.嵌套路由
- 知识点介绍
>1.路由meta元数据->meta是对于路由规则是否需要验证权限的配置
。路由对象中和name属性同级{ meta:{ isChecked:true } }
>2.路由钩子 ->权限控制的函数执行时
。每次路由匹配后，渲染组件到router-view之前
。router.beforeEach( function(to,from,next) { } )
4.编程式导航
-1:跳到指定的锚点，并显示页面
this.$router.push({ name:'xxx',query:{id:1} }) 或者this.$router.push({ name:'xxx',params:{name:'abc'} })
-2:配置规则{name:'xxx' ,path:'/xxx/:name'}
-3:根据历史记录，前进或后退this.$router.go(-1)或this.$router.go(1) 1：代表进一步，-1代表退一步
九、axios
1.拦截器
- 请求拦截器：在发起请求之前，做的事 （比如开启loading）
- 响应拦截器：在响应回来以后，做的事 （关闭loading）
- 单请求配置options：
axios.post(url,data,options); - 全局配置defaults：
this.$axios.defaults - config:请求拦截器中的参数
- response.config响应拦截器中的参数
- options
。baseURL基础URL路径
。params查询字符串(对象)
。transformRequest：function(post请求传递的数据)
{ }转换请求体数据
。transformResponse：function(res){ 自己转换相应回来的数据 }转换响应体数据
。headers请求头信息
。data请求体数据
。timeout请求超时，请求多久以后没有响应算是超时(毫秒)
1.请求拦截器和响应拦截器的写法.png
2.isShow代表loading，这种写法可以放在公共的组件中，请求数据出现loading效果，有反应则loading消失.png
十、webpack
1.webpack打包模块的源码
- 1：把所有模块的代码放入到函数中，用一个数组保存起来。
- 2：根据require时传入的数组索引，能知道需要哪一段代码。
- 3：从数组中，根据索引取出包含我们代码的函数。
- 4：执行该函数，传入一个对象module.exports
- 5：我们的代码，按照约定，正好是用module.exports='xxxx'进行赋值。
- 6：调用函数结束后，module.exports从原来的空对象，就有值了。
- 7：最终return module.exports作为require函数的返回值
十一、vue项目目录
- 1、router文件夹下的index.js文件
。1.路由下的index文件里面一些代码的含义.png
。2.不启用eslint的语法检查的配置.png
。3.vue中for循环为什么要写key，引深vue操作虚拟dom.png
十二、vue的实际项目运用的知识点
this.$nextTick( () => { //在vue完成渲染任务以后的行为 } )图片缩略图的插件 vue-preview
时间格式插件，比如：评论中显示几秒前、几分钟前... momentjs.com
十三、vuex的知识点
- State 描述状态即保存数据
- Getter 获取数据，定义变量的存取
- Mutation 修改数据，发生变化 只能是同步代码
- Action 在行为中可以存着异步操作（或向后台发送请求），但是最终还是通知mutations
- Module
1.1vuex使用步骤-没有使用actions.png
1.2vuex的取值和改变值-没有使用actions.png
2.1vuex使用actions解决需要在更改数据前的异步.png
2.2使用actionsvuex的取值和改变值.png
3.Module的使用.png
- ...mapGetters的使用例子
1.storejs.png
2phoneCallvue.png
3storeindexjs.png
十四、hash模式与history模式
- vue默认为hash模式，相关配置如图hash模式与history模式配置.png。后端需要相关的配置，才能实现history模式。vue的相关知识点位置
- 滚动行为：这个功能只在支持history.pushState 的浏览器中可用。知识点链接
- 预渲染1.预渲染解决vue的seo优化.png2.阶段的总结.png
十五、骨架屏
- 操作步骤参考链接
1、npm i -g lavas
2、lavas init
3、选择包含app_shell 也包含了骨架屏的功能
