vue基础

条件渲染

v-if 与 v-show 的区别

• 1、他们都能实现元素的显示和隐藏

• 2、v-show只是简单的控制元素的display属性（不管条件为真还是为假，这个元素都会被渲染出来）；而v-if才是条件渲染（条件为真，元素会被渲染，条件为假，元素会被销毁）。

• 3、v-show有更高的首次渲染开销；v-if的首次渲染开销要小很多。

• 4、v-if有更高的切换开销，v-show切换开销比较小。

• 5、v-if有配套的 v-else-if 和 v-else，而v-show没有。

• 6、v-if可以搭配template使用，而v-show不行。

mixins混入

定义里一个对象，这个对象包含有vue组件实例相关的选项的一个对象，可以混入到实例vue中，就变成了一个公有属性。data如果是一个混入对象的选项，那么data需要设置为工厂模式，否则实例vm1修改data里的内容，也会影响到vm2里的内容。除了 el 与 propsData 这两个选项之外，其他的选项都可以写在定义的对象中混入。

var vm1 = new Vue({

    el:"#app1",

    mixins:[common],

    data:{

      mes:"world",//自身有就用自身的

      title:"toutou"

    },

    //生命周期函数  两个都会执行  自身和公用都有的话，先执行公有的，再执行自身的

    mounted(){

        console.log("自身的")

      }

})

组件

• 组件的三大原则：==灵活性、复用性、高度可扩展性==。

组件中的使用情况

• 1、 组件的使用，先注册，然后用组件名字做为标签来使用。

• 2、 组件必须要有一个 template 选项，来指定这个组件的模板内容。

• 3、 组件的data选项，必须是一个函数返回对象的形式。

• 4、 组件的命名不能跟html标签冲突。

• 5、 组件的template选项只能有一个根元素（就是只能有一个大盒子）。

• 6、 全局注册的组件 Vue.componet 必须写在 new Vue之前。

• 7、 组件的命名可以尽量使用短横线方式，也可以用驼峰式命名；但是使用的时候需要换成短横线方式，否则会报错找不到。

• • 7.1 使用 x-template 的script标签的方式的时候可以不用考虑短横线命名的规则；使用单文件组件，也不需要考虑这条规则。

组件注册分为全局注册和局部注册

1、全局注册 Vue.component（组件的名字，组件的选项对象）

2、局部注册 components 写在Vue实例的内部

全局注册与局部注册的区别

局部注册的组件，在谁身上注册的就只能用在那个身上。
全局组成的组件可以在任意地方使用，但是必须要在 new Vue之前注册。

组件的写法

1. 直接使用 模板字符串的方式 template标签

2. 使用单文件组件 （推荐）

3. 使用 script 标签的方式 type="text/x-template"

组件的通信

• 父与子的通信

1、需要在子组件中定义props选项，来确定我需要哪些prop。

2、父组件在调用子组件的时候，需要传递prop下来，使用prop作为自定义属性来写在子组件的标签身上。

父组件给子组件传递一个属性prop，子组件用props接收后，就可以使用父组件的prop。

• 子与父的通信

1、父调用子组件的时候，在子组件标签上绑定一个自定义事件。

2、子组件在某个时刻，触发父亲给绑定事件。

父组件给子组件绑定一个自定义事件，子组件需要修改的时候，触发父组件绑定的事件并且传递参数过去，父组件接收后就可以修改了。

组件之间的通信除了用props父传子，$emit子传父，还有一些特殊操作（不推荐）

1、ref 用在组件标签上，通过$ref获取到DOM元素直接修改上面的内容

2、$root 实例属性可以拿到跟组件对象，也就是new Vue 出来的实例

3、$parent 实例属性，可以拿到当前组件的父组件的实例对象

4、$children 实例属性，去获取子组件的实例，得到的是一个子组件实例的集合

ref属性

• ref这个属性，可以写在标签上，也可以写在组件标签上。
• 写在标签上使用$refs获取到的是 DOM对象
• 写在组件标签上获取到的是 组件对象

v-model 其实是一种语法糖形式

注：$event

1、 $event用在普通的标签上，代表着事件对象。

2、 $event用在组件的标签上，代表着触发这个事件是传递过来的参数。

插槽

默认在组件开始标签与结束标签中写的内容是无效的，如果需要将内容渲染出去，就需要使用插槽 slot 。

• slot 是不限制次数的。

• slot 是可以命名的；slot 组件上使用 name 属性给他命名，那个插槽模板内容要放到那个 slot 坑里面，就需要带着 name 的名字 slot=“name”。

• slot 还可以有个默认不加锁的坑，没写name的就默认放在这个坑里。

作用域插槽

把组件内数据能够在插槽模板内容中使用。

使用步骤：

1、在 slot 标签上写自定义的属性，但是不能是 name。

2、在相应的 slot 的插槽模板内容上面使用 slot-scope 接收第一部中传递过来的 porp集合。

插槽新语法，具名插槽（v-slot可以简写成 # ）

1、先在组件中的template中的slot标签上定义一个名字，但是不能是name。

2、在页面上用标签，里面写v-slot:msg,也可以接收参数v-slot:msg=“obj"，obj是一个对象，可以传入多个属性。

    Vue.component('hello',{

        template:`

            


              

            

        `

    })



    //页面上使用

    

注：其实空标签有一个默认default属性。

非props特性

在使用组件的时候，在组件标签上写的特性，如果组件内部没有通过props选项去接收，那么这个特性就叫做非props特性，非props特性会自动写入到组件的根元素上。

• 非props的合并和替换已有的特性

除了class和style不会被替换，其他属性都会被替换，除了class和style会被合并，其他属性都不会被合并，只会替换。

禁用特性继承 inheritAttrs: false

inheritAttr：false 不会影响style和class的绑定。

获取非props特性

$attrs 能够拿到非props特性，但是class和style拿不到。

生命周期钩子

生命周期分为八个步骤：

1、beforeCreate　（创建之前）

2、created　　　　（创建之后）

3、beforeMount　（挂载之前）

4、mounted　　　（挂载之后）

5、beforeUpdate　（更新之前）

6、updated　　　　（更新之后）

7、beforeDestroy　（销毁之前）

8、destroyed　　　（销毁之后）

一般在beforeDestroy这个生命周期做一下清除的事情（比如清除定时器，监听滚动条）

想要拿到组件中的dom元素，需要在mounted这个生命周期函数之后才能获取到。

通过axios发ajax请求

使用axios需要先引入axios的js

和jquery一样，axios有三种写法：

axios(

    {url:"url地址"，

    methods:'get',

    params:{

        data:'请求带过去的东西'

    }).then();



axios.get(url,options);

axios.post(url,options);

还可以对 axios 做一个请求或响应拦截，实现登陆校验的验证，验证token

fetch发ajax请求

// fetch 的get请求方式

fetch(url).then(res=>{

    return res.json();  //通过fetch获取到的需要通过json转换拿到想要的数据 

    }).then()

                        //转换之后还需要return回去下面继续链式调用

// fetch post请求方式

fetch('url',{

  method:'post',

  body:JSON.stringify({  可以带参数去请求，但是要转换成json字符串格式

    username:'zhangsan',

    password:'123'

  })

})

注意： fetch有个问题，获取失败，但是第二个.then会执行， 

    请求404没找到catch抓取不到，不会走到catch回调中去。