vue 基础知识点

vue 基础知识点

vue 的实例化对象创建

const app = new Vue({})

挂载点

***vue 的挂载点使用id选择器 ***
vue 的挂载点必须是一个具体的元素， 不能是body或者是HTML标签

官网定义： 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。

1. 通过el属性设置挂载点

const app = new Vue({
    el:"#app"
})

2. 通过 $mount() 方法设置挂载点

const app = new Vue({

}).$mount('#app')

vue 的基础语法

vue的(插值)模板语法 “Mustache”语法 (双大括号)

1. 直接使用模板语法插值

// key 就是data属性值的键名
<标签>{{key}}</标签>

2. 使用指令形式插值
   • v-text : 插入文本内容（不能解析标签）

   <标签 v-text='key'></标签>
   

   • v-html ： 插入HTML结构(解析标签)

   <标签 v-html='key'></标签>
   

vue的指令

指令是作为html标签的属性存在的

1. v-if v-else v-else-if 条件渲染
   条件和js中的条件写法一样

<标签 v-if='条件1'></标签>
<标签 v-else-if='条件2'></标签>
<标签 v-else-if='条件3'></标签>
<标签 v-else-if='条件4'></标签>
<标签 v-else></标签>

2. v-on : 绑定事件
   ***js中的事件在这里都可以使用 click keyup keydown mouseover ***

<标签 v-on:事件名='函数名'></标签>
<标签 v-on:事件名='函数名(参数)'></标签>
<标签 v-on:事件名.修饰符='函数名(参数)'></标签>

<!-- v-on 可以简写为 @ -->
<标签 @事件名='函数名(参数)'></标签>

• 事件处理程序都需要放到 methods属性中

const app = new Vue({
    el:"#app",
    methods:{
        函数名(){},
        函数名(){},
        函数名(){},
        函数名(){}
    }
})

3. v-show : 通过css样式控制元素的出现和隐藏（display:none; display:block）

<!-- key 是一个布尔值 -->
<标签 v-show='key'></标签>

4. v-for : 列表渲染（循环）
   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<!--  item 是自定义的；代表数组的元素 ; index 是索引值，  array是循环的数组；  id 是绑定的key的唯一值    -->
<标签 v-for='item in array' v-bind:key='id'>{{item}}</标签>
<标签 v-for='(item, index) in array' v-bind:key='id'>{{item}}</标签>

<!--  遍历对象 value 代表对象中的属性值， key 代表对象中的属性（键）  -->
<标签 v-for='value in object' v-bind:key='id'>{{value}}</标签>
<标签 v-for='(value, key) in object' v-bind:key='id'>{{value}}</标签>
<!--  这种方式不常使用 -->
<标签 v-for='(value, key, index) in object' v-bind:key='id'>{{value}}</标签>

5. v-bind: 绑定属性

<标签 v-bind:属性名="绑定的数据（data中的key）"></标签>

6. v-text : 解析文本，相当于往标签中插入文本数据

<标签 v-text='绑定data中的key'></标签>
     <p v-text=" hello "></p>

<标签 v-text='绑定原始的字符串类型'></标签>
<!-- 案例  -->
     <p v-text=" 'hello' "></p>  

<标签 v-text='字符串拼接'></标签>
<!-- 案例  -->
    <p v-text=" 'hello' + msg "></p>

7. v-html ： 解析HTML结构， 相当于往标签中插入HTML结构

<标签 v-html='data中的key'>

8. v-model ： 双向数据绑定， 主要用于 input 等表单元素

<标签 v-model="data中的key">
<标签 v-model="data中的key"></标签>

9. v-pre ： 跳过编译不渲染， 直接显示原始的{{}}语法

<标签 v-pre></标签>

10. v-once ： 只在首次加载时渲染一次， 后边数据即使改变，也不会再次渲染

<标签 v-once></标签>

11. v-cloak : vue实例结束编译后渲染 ， 在编译没有结束之前，处于隐藏状态， 需要结合css样式一起使用
    通过该指令可以解决刷新页面时{{}}闪现问题

<!-- css -->
[v-cloak]{
    display:none;
}
<!--  html -->
<标签 v-cloak></标签>

vue绑定类名和行内样式

类名的绑定

<!--  绑定动态类名 使用对象  // key:就是绑定的类名  value:决定绑定的类名是否显示， 是一个布尔值-->
<标签 :class="{key:value}"></标签> 

<!--  绑定固定类名和动态类名 组合形式   // key:就是绑定的类名  value:决定绑定的类名是否显示， 是一个布尔值-->
<标签 :class="['固定类名1', ... ,  {key:value}]"></标签>

<!--  绑定多个类名 使用数组   // data中key的值直接是类名-->
<标签 :class="[data中的key1, data中的key2, ...]"></标签>  

行内样式的绑定

<!--  直接绑定data中的样式对象  // key 的值是一个样式对象-->
<标签 :style="data中的key"></标签>  

<!--  绑定对象形式 对象的key (property ) 就是样式名， 对象的value (data-key) 就是 data中的key, 就是具体的样式值 -->
<标签 :style="{property:data-key}"></标签>  

<!--  绑定数组 将多个样式对象应用到同一个元素上  data中的key 直接是样式对象 --> 
<标签 :style="[data中的key1, data中的key2, ... ]"></标签>  

vue的计算属性

computed计算属性的用法和data的用法类似； 怎么使用data,就怎么使用计算属性

计算属性的语法

计算属性 是一个函数， 必须要有返回值， 返回值就是计算处理后得到的数据， 函数名就是计算属性绑定的key

<标签>{{计算属性中的函数名}}</标签>

<!--  案例 -->
<p>{{text}}</p>

// 函数名就是绑定的key 
 computed:{
    函数名(){
        // 经过响应的处理
        // value 就是处理后的数据
        return value
    },
    ...    
}
// 案例
 computed:{
    text(){
        return 'hello'
    },
    ...    
}

计算属性的应用场景

1. 针对于复杂的运算 可以使用计算属性
2. 对 data中已有的数据进行处理得到新的数据
   ————————
3. 计算属性可以接受参数： 通过闭包的形式接受参数（了解即可）

计算属性和方法的区别

1. 计算属性存在缓存的， 只要数据不发生变化，计算属性不会重新计算渲染
2. 方法是每次调用都会执行

vue的过滤器

过滤器对数据进行过滤处理（格式化的操作）

过滤器的语法

1. 过滤器可以有多个， 按照从左到右的顺序依次执行
2. 过滤器默认接受的参数就是 | 前边的数据
3. 过滤器也可以接受多个参数

<!-- 多个过滤器  -->
<标签>{{key | filterName1 | filterName2 ...}}</标签>

<!--  接受多个参数 -->
<标签>{{key | filterName1(arg1, arg2, ...)}}</标签>

filters:{
    //  默认参数
    filterName1(value){
        return value;
    },
    // 第一个参数value是默认要处理的数据， 后边就是接受的多个参数：arg1, arg2, ....
    filterName2(value, arg1, arg2, ....){
        return value;
    }
}

vue组件

vue组件注册

1. 注册组件

//  第二个参数是组件的配置项
Vue.component(自定义组件名,{
    //  template 组件模板 组件的HTML结构
    template:`
       html 结构
    `
})
const app = new Vue({
    el:'#app'
})

2. 使用组件： 组件其实就是一段独立的HTML结构，像使用标签一样使用组件名

<div id="app">
    <组件名></组件名>
</div>

组件的命名方式

1. 使用短横线分割命名法(kebab-case) ， 直接进使用组件名引用

Vue.component("slide-bar",{
    //  template 组件模板 组件的HTML结构
    template:`
       html 结构
    `
})
//  使用 <slide-bar></slide-bar>

2. 使用大驼峰命名， 转换为 短横线分割形式 引用

Vue.component("SlideBar",{
    //  template 组件模板 组件的HTML结构
    template:`
       html 结构
    `
})
//  使用 <slide-bar></slide-bar>

组件的通信

父子通信（传递数据）

1. 需要在父组件中传入数据（父组件给子组件传递数据）
   找到父组件标签， 通过给父组件标签添加属性的形式传递数据， 属性名就是自定义的数据名（为了子组件接受），属性值就是传递的数据
   <child 自定义属性名=‘传递的数据’>

2. 需要在子组件的注册中接受数据，通过Props 属性接受
   在子组件的注册中， 使用Props 属性接受 数据， 接受的数据名就是父组件中的自定义属性名
   props:[父组件自定义属性名]

3. 在子组件的模板中使用数据
   在子组件的模板中 template 中使用接受的数据， 使用的是props中接受的名字

<div id="app">
    <!-- 传递静态数据  -->
    <child a='hello'></child>
</div>

 Vue.component('child',{
    //  组件模板 组件的HTML结构
    template:`
        <p>hello {{a}}</p>
    `,
    props:['a']
})

子父通信

子父通信需要借助于 事件 进行传递:$emit()和$on

子组件中通过$emit()触发自定义事件事件，传递子组件的数据
在父组件中 通过 $on() 监听子组件的自定义事件，接受数据
子父通信的步骤：

1. 在子组件的模板template中 某个元素上绑定一个原生事件，触发事件处理程序，在该事件处理程序中 通过 $emit()触发自定义事件，并且传入第二个参数（就是传递的数据）

Vue.component('SlideBar', {
    template:'<div><em @click="sendMsg">world</em></div>',
    data(){
        return {
            childMsg:'子组件的信息'
        }
    },
    methods:{
        // 事件处理程序
        sendMsg(){
            // 触发自定义事件
            this.$emit('child:send', this.childMsg)
        }
    }
})

2. 在父组件中进行监听: 通过v-on监听子组件的自定义事件， 然后触发父组件的methods中的方法

<div id="app">
    <slide-bar v-on:child:send='getMsg'></slide-bar>
</div>

const app = new Vue({
    el:'#app',
    data:{
        msg:'父组件传递数据'
    },
    methods:{
        // 父组件的methods中的方法
        getMsg(data){
            // data 就是子组件传递的数据
            console.log(data);
        }
    }
})

非父子通信

需要借助于一个公共的事件总线Bus进行通信

1. 创建一个公共的事件总线Bus

const Bus = new Vue();

2. 需要通过 Bus.$emit() 触发自定义事件

 Vue.component('ComChild', {
    template:`
        <div>
            <button @click="sendMsg">COm2 </button>
        </div>
    `,
    data(){
        return {
            comMsg:'这是com2的数据'
        }
    },
    methods:{
        sendMsg(){
            //  触发自定义事件
            Bus.$emit('send:com1', this.comMsg)
        }
    }
})

3. 在另一个接受数据的组件中 通过Bus.$on()监听自定义事件;一般$on()用于 created() 生命周期中

Vue.component('Com1', {
    template:`
        <div>
            <button>COm1</button>                   
        </div>
    `,
    created(){
        Bus.$on('send:com1', (data) => {
            console.log(data);
        })
    }
})

组件标签和普通标签的区别

区别1： 添加属性

1. 给普通标签（html标签）添加属性，就是给标签添加属性
2. 给组件标签添加属性， 那就意味需要通过 props 进行接收， 实际就是传递数据 （实现父子通信）

区别2： 绑定事件

1. 给普通标签绑定事件, 就是绑定的是原生事件，可以直接在methods中触发
2. 给组件标签绑定事件，不管是什么事件名， 就是绑定的是 自定义事件 ， 需要在组件内通过 $emit() 触发，需要在父组件中监听执行
   <组件标签 @自定义事件名="父组件的methods中的方法名"> </组件标签>
   绑定的事件要想被触发，必须在组内内部借助于原生事件 触发事件，在该事件中 通过 $emit() 进行触发;
   如果要在组件标签上绑定原生事件，需要在事件后添加修饰符 .native实现

props的传入数据类型

props接受的数据类型：String Number Boolean Object Array Symbol Function Date

1. 传入静态数据 默认传入的是字符串类型

<组件标签 title='hello'></组件标签>

2. 传入数值或者布尔值 数组 等 通过 v-bind 进行绑定，
   即便对象 数组 数值 布尔 等是静态的，我们仍然需要 v-bind 来告诉 Vue 这是一个 JavaScript 表达式而不是一个字符串。

<组件标签 :title='[1,2,43,5]'></组件标签>
<组件标签 :title='{name:"tom", age:19}'></组件标签>
<!--  直接绑定对象名 -->
<组件标签 :title='ObjName'></组件标签>
<!--  传入一个对象所有的属性 -->
<组件标签 v-bind='ObjName'></组件标签>

插槽

插槽的作用是分发内容， 用于组件标签内插入内容， 通过slot标签分发内容， 用于组件模板内部

插槽的分类

1. 默认插槽（匿名插槽）
2. 具名插槽
3. 作用域插槽

可以给插槽添加默认内容（在slot标签内添加默认内容）： 如果用户传入内容，则使用用户传入，如果没有传入，使用默认内容渲染

默认插槽（匿名插槽）

1. 定义插槽

Vue.component('Com1', {
    template:`
        <div>
            <button>COm1</button>   
            <slot>默认内容</slot>              
        </div>
    `,
})

2. 使用插槽

 <com1>
     <!-- 使用默认插槽 -->
    <template >
        hello world
    </template>
    <!--  使用具名插槽 -->
    <template v-slot:header>
        <p> 段落</p>
    </template>
</com1>   

具名插槽（有名字的插槽）

1. 给 slot 标签 添加name属性

Vue.component('Com1', {
    template:`
        <div>
            <button>COm1</button>   
            <slot>默认内容</slot>
            <slot name='header'>具名插槽</slot>
                          
        </div>
    `,
})

作用域插槽（传递数据的）

1. 传入数据 在 slot标签上自定义属性传递数据，

<!--  传递静态数据 需要区分数据类型，如果是数值，布尔，数组，或对象 使用 v-bind 进行绑定 -->
 <slot 自定义属性名1='value1' 自定义属性名2='value2' 自定义属性名3='value3' 自定义属性名4='value4'></slot>

 <!--  传递组件data中的数据 动态数据 -->
 <slot :自定义属性名='data中的key'></slot>
 <!--       
     案例
  -->
 <slot :comMsg='comMsg'></slot>

 Vue.component('ComChild', {
    template:`
        <div>
            <button @click="sendMsg">COm2 </button>
            <slot a='hello msg' b='100' :c='[1,3,4,56]' :comMsg='comMsg'></slot>
        </div>
    `,
    data(){
        return {
            comMsg:'这是com2的数据'
        }
    }
})

2. 接受数据 在 组件标签上 通过 v-slot:name=‘自定义对象名’ 接受数据; 接受到的是一个对象集合。 通过 obj.key 进行取值

 <com-child v-slot:default='obj'>{{obj.a}} {{obj.b}} {{obj.c[3]}} {{obj.comMsg}}</com-child>