从零开始vue（上）_oncompouted vue-优快云博客

本文链接：https://blog.youkuaiyun.com/theaaaheartbeat/article/details/112507343

从零开始vue

vue是什么？vue的核心原理？

渐进式，声明式的渲染，组件化开发，可以局部引用
一个前端的框架库，MVVM

MVVM是什么？还有什么类似的吗？

MVC 是模型-视图-控制器的缩写 MVC中对DOM的操作都在C里边，MVC会大量操作DOM
MVVM 是用viewmodel取代了C的这一层，以vue为列，所有的操作都是对虚拟DOM的操作，然后生成虚拟DOM书，然后vue的算法会比较虚拟DOM和真实DOM，然后修改不同的地方，解决mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

01.vue的系统指令

指令	含义
v-html=“html内容”	绑定html内容谨慎使用可能造成XSS攻击
v-text=“text”	绑定文本内容相当于innerHTML
v-bind:class=""	动态绑定class等缩写 :class
v-on:click=“事件名”	动态绑定事件
v-once	规定此绑定只执行一次
v-clock	避免闪烁，在data绑定完成之后消失原理：display:none和display:block
v-show=“布尔值”	是否显示，display:none;和display:block;的切换
v-if=“布尔值”	是否显示销毁挂载
v-for	循环data属性

（01）v-show和v-if的区别

v-show	v-if
v-show不支持template元素	v-if支持template元素
v-show初始渲染消耗大，切换消耗少	v-if初始渲染开销小，切换开销大
无论条件是什么每次都渲染	只有在条件为真的时候才会渲染
XX	切换过程中，可以用钩子函数监听组件的切换

（02） vue的事件修饰符

修饰符	含义
.once	规定事件只执行一次
.stop	阻止事件冒泡
.prevent	阻止默认事件
.native	把事件绑定到组件的根标签上
.self	只有触发事件的元素是绑定事件的元素的时候才会触发

（03）v-model的详解以及v-model的修饰符

v-model 本质上就是在元素上绑定了一个input事件，然后绑定了一个值，在input的时候把值赋给这个变量
单个单选框，绑定到单个值
单个复选框，绑定到布尔值，多个复选框，绑定到数组
select 单选绑定单值，多选绑定数组

修饰符	含义
.lazy	把v-model触发的条件变为change触发
.trim	去除掉值字符串两端的空格
.number	转换值为数字

按键修饰符	含义
.enter	变为回车触发
.space	变为空格触发

02.vue的属性

（01）data的使用

data 所有的属性都保存在这里，在组件的复用中的data要改为回调函数的样子，data(){return {}date数据}

data:{
   return {
     数据
   }
}

（02）methods的使用

methods所有的事件都在这里边保存着，方法中的this被绑定到vue实例上，事件默认传入事件参数$event 第一个形参

methods:{
    sum($event){  //默认传入$event
        this指向当前vue实例
    }
}

（03）computed的使用

compouted计算属性，有缓存，只要依赖未改变，下次调用直接取缓存中读取，依赖改变的话，自动调用，然后返回最新的缓存值

compouted:{
    sum(){
        return num1+num2  只要num1和num2的值为被改变，下次直接从缓存读取
    }
}

（04）watch的使用

监听器，监控data中的某个属性，属性更改之后，就会自动调用，数组监控不到，要调用数组的方法，才能被监听到，监听对象的时候要深度监听

watch:{
    deep:true, 深度监听  不加deep：true的话，之监听对象的指向，加上之后监听对象的属性
    immediate:true, 是否立即执行
    handler(currentValue,prevValue){}
}

（05）compoents的使用

定义当前组件的子组件，可以外部引入，也可在组件内直接写

components:{
   组件名:{
       data(){
           return {
               
           }
       }
   }
}

（06）mixin的使用

如果混入的相同的属性和变量会被递归合并，合并有冲突的以组件为准

同名的钩子函数会被合并到一个数组中，也就是说都会被调用，先调用混合的，再调用组件的
对象的混合，比如methods，会被混合为对象，如果对象的键名有冲突，以组件的为准。
mixin是什么?
抽取公共的逻辑进行提取，以便复用。

定义：let mixin1={}

使用：mixins:[mixin1,mixin2,mixin3] 可以混入多个

（07）过滤器的使用

用在{{}} 插值表达式尾部和v-bind表达式的尾部
用 | 和表达式分开，可以多个串联，从左到右执行
常用作文本格式化

全局定义 filter("过滤器名字",function(val){ return 表达式的值会变为返回值 val是 | 前边的值 }) 局部定义 fliters:{ 名(val){} }

（08）自定义指令的使用

vue里边可以自定义指令

全局定义
Vue.directive("名字",{
    参数 el 指绑定元素，操作DOM
    update(){} 所在DOM节点更新时候调用
    insetted(){} 被绑定元素插入到父节点调用
    componentUpdate(){} 所在自减的虚拟节点以及子节点更新完毕之后调用
})
局部定义
directives:{
    名字:{
        
    }
}

（09）生命周期

vue 里边有四个生命周期八个状态

生命周期	代表含义	什么时候是使用
beforeCreate	组件创建
created	组件创建完毕	可以请求数据
beforeMount	组件将要挂载
mounted	组件挂载完毕	这是可以操作DOM
beforeUpdate	组件将要更新
updated	组件更新完毕
beforeDistroy	组件将要销毁	解绑事件
distroyed	组件销毁完毕

（11）组件缓存

<keep-alive>
    组件名  被缓存的组件不会被销毁，里边数据的状态也会被保存
</keep-alive>
三个属性：
include：白名单，规定那个组件应该被缓存 写的组件名字 [可为数组，缓存多个]
exclude：黑名单，规定不会被缓存的组件
max:缓存的最大组件的数量
keep-alive 特有的两个生命周期
activated  组件被挂载时候候触发
deactivated  组件被卸载的时候触发
需要在组件里边定义name
export default {name:"名字"}  这个名字才会被缓存


<!--缓存想要缓存的页面，实现后退不刷新--> 需要在路由中加上meta中的keepAlive
<!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

第一次进入执行：  
            beforeCreate
            created
            beforeMount
            mounted
            activated
离开执行：
            deactiveted
第二次进入：
            activated

（07）路由

路由用在组件之间的切换。
vue-router
vue官方的路由管理器和vue深度集成
基于组件，可嵌套路由，路由传参
支持hash默认histor模式
链接导航，编程式导航
addRoutes() 添加一个符合路由规则的新路由，参数为数组

跳转路由的方法
    {
        <router-link to=""></router-link> 跳转
        <router-view /> 渲染到router-view所在的位置
    }
    {
        this.$router.push({})
    }

（08）路由的动态传参

路由中定义
{
    path:"/路径名/:数据名"
}
跳转： this.$router.push("/路径名/"+数据)
获取：this.$route.query.数据名

（09）params和query的区别

query传递的参数会出现地址栏？号后边，然后在子页面可以用this.$route.query获取到
params传递的参数会出现在当前路由的/后边，然后在子页面可以用this.$route.params获取到
<router-link :to="{
    query:,
    path:""
}"></router-link> 跳转 query和path是一组
 <router-link :to="{
    params:,
    name:""
}"></router-link> 跳转 params和name是一组

因为params是路径path的一部分，所以说用path的话就不可以用params，用params的话只能用name

（10）通过编程控制路由和路由不会产生历史记录的方式

（15）路由守卫的使用

全局前置路由守卫 beforeEach((to,from,next)=>{只有调用next() 才会跳转})
全局后置路由守卫 afterEach((to,from)=>{无法阻止跳转 所以没有next()方法 可传给新页面信息,只可传递给新页面信息})
路由独享守卫 beforeEnter((to,from,next)=>{ 在beforeEach之后执行 })
组件路由守卫 
    beforeRouteEnter((to,from,next)=>{进入此页面之后触发})
    beforeRouteUpdate((to,from,next)=>{用于监听参数的变化，而页面无变化的时候，也可用watch})
    beforeRouteLeave((to,from,next)=>{从此页面离开调用})

（12）vue的路由守卫和钩子函数的执行顺序

beforeEach  全局路由守卫 
Home的独享守卫 beforeEnter
Home的beforeRouteEnter
afterEach  全局路由守卫
App的生命周期beforeCreate
App的生命周期created
App的生命周期beforeMount
Home的生命周期beforeCreate
Home的生命周期created
Home的生命周期beforeMount
Home的生命周期mounted
App的生命周期mounted

（13）axios的使用

安装axios  cnpm install axios --save
引入：
绑定到全局Vue上  Vue.prototype.$http=axios
默认：axios.defaults.baseURL=

（14）axios的拦截器

axios.intercaptors.require.use()  //请求之前
axios.intercaptors.response.use() //请求之后

（16）参数变化而页面检测不到怎么办？

watch监控$route
beforeRouteUpdate

（20）vue中的跨域？怎么配置代理

module.exports={
    devServer:{
        proxy:{
            target:"",
            changeOrgin:true,
            PathRewrite:{
                "/api":""
            }
        }
        
    }
}