Vue2框架 基础知识3

组件注册

  1. 局部组件

    1. 创建一个组件.vue
    2. 引入:import Mycomp from ‘./components/Mycomp.vue’
    3. 注册组件
      export default {
      name: ‘App’,
      components: {
      Mycomp
      }
      }
    4. 使用组件
  2. 组件组成

    1. template 视图
    2. script 逻辑
    3. style 样式
  3. 全局组件

    1. 注册全局组件 在Vue对象身上有个Vue.component() 注册全局组件 在所有的组件中 不需要引入 可以直接使用

    2. 语法:
      Vue.component(‘my-component-name’, {
      // … 选项 …
      })

    3. 代码演示

        // import Vue from 'vue'//运行时:vue.runtime.js 
        import Vue from 'vue/dist/vue'
    
        /注册全局组件
        // Vue.component('组件名称',{内容配置})
        Vue.component('my-comp',{
            //视图 template :template作为属性使用 必须vue.js (完整版的vue.js)  默认引入-运行时-vue.runtime.js 
            template:'<div> <h2>我是一个全局组件</h2> <p>{{ msg }}</p></div>',
            //数据
            data(){
                return {
                    msg:'hello vue全局组件'
                }
            },
            //方法
            methods:{
    
            }
        })
    
    1. 全局组件–可以挂载创建好的局部组件 注册全局
      import MyBanner from ‘./components/MyBanner.vue’
      // Vue.component(‘MyBanner’,MyBanner)
      Vue.component(MyBanner.name,MyBanner)

    2. vue 不同构建版本

      1. vue.js 完整版 --编译器+ 运行时
      2. vue.runtime.js 运行时
  4. 补充一个知识点

    1. 组件的视图模板组成

    2. 标签

    3. template 属性使用

    4. render() render函数渲染 – react

    5. 优先级问题

      标签 > render() > template (修改vue.js)

Prop传递数据

  1. 作用:实现组件之前数据传递- 父传子

  2. 语法

    1. 父组件:
      <子组件 msg=‘hello’ :info=‘’ ></子组件>

    2. 子组件:
      数组接受:
      props:[‘msg’,‘info’]

      对象接受方式:
      props:{
      msg:数据类型
      info:{
      type:String,
      default:‘默认值’
      },
      … 如下-prop验证
      }

    3. 子组件使用父组件数据 直接当data里面的数据 使用
      {{ msg }}

  3. 注意:

    1. prop传递数据时正向传递 父串子 数据时响应式的 父组件数据修改了 子组件同步更新
    2. 子组件不能直接修改prop传递的数据
  4. prop验证

    props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
            type: String,
            required: true
        },
        // 带有默认值的数字
        propD: {
            type: Number,
            default: 100
        },
        // 带有默认值的对象
        propE: {
            type: Object,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
             return { message: 'hello' }
            }
        },
    } 
    

自定义事件 – 子传父

  1. 作用:把子组件的数据传递给父组件 通过自定义事件

  2. 语法

    1. 子组件定义事件
      this.$emit(‘getData’,this.msg)

    2. 父组件-调用子组件上面接受自定义事件
      <子组件 @自定义事件名=‘函数名’/>

      methods:{
      函数名(val){
      this.xx = val;
      }
      }

  3. 特殊的prop传递函数

    1. prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
    2. 子组件接受props:[‘fun’]
    3. 子组件调用 父组件传递的函数名fun this.fun() fun()

插槽

  1. 说明:Vue 实现了一套内容分发的 API,定义时不知道具体要显示什么,只是留出来显示的位置,在组件调用时写具体内容,能展现在预留的位置上。

  2. 定义:
    使用  标签预留位置

  3. 调用组件时
    写具体的要呈现的内容,要显示在标签中
    <组件> xxx </组件>

  4. 匿名插槽 (常用的)
    定义时: 
     / 

  5. 具名插槽 (常用的)

    1. 定义插槽的时候 有名字name属性
       
    2. 使用

      底部区域
    3. 注意:使用的时候 有名字的 在具名插槽里面显示 没有名字找匿名插槽
  6. 作用域插槽

    1. 作用: 让插槽内容能够访问子组件中才有的数据 (插槽提供数据)

    2. 语法:

    3. 使用插槽

      底部区域

      注意:data一个对象 data={ msg:‘’,num:‘’,…}

  7. 具名插槽的缩写
    v-slot:header 可以被重写为 #header

  8. 后备内容
    有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。
    默认值

  9. 动态插槽名

    1. 作用:在调用插槽的时候 定义插槽的名字
    2. 语法:
      1. <template v-slot:[varName]>我是具名插槽-{{varName}}
      2. data(){
        return {
        varName:‘header’
        }
        }

总结所有vue指令

指令:v-指令=‘表达式’ / v-xx=‘js环境’

  1. v-text=‘表达式’
    插入字符串数据

  2. v-html=‘表达式’

    1. 插入HTML数据 解析html代码 识别标签
    2. 注意:不安全
  3. v-show=‘表达式’

    1. 是否显示 true显示 false隐藏
    2. 控制css属性:diplay:block/none
  4. v-if=‘’

    1. 是否显示 true显示 false隐藏
    2. 控制元素的创建和销毁
  5. v-else

  6. v-else-if=‘’

  7. v-for=‘’

    1. 遍历数组 和对象
    2. 语法:
      {{ item }}
      {{ item }}
  8. v-on:事件名=‘函数名’

    1. 绑定事件 简写: @事件名=‘函数名’
    2. 点击
    3. 事件-修饰符
      1. .stop
      2. .prvent
      3. 键盘: .enter
  9. v-bind:属性=‘’

    1. 动态绑定属性 简写: :属性=‘’
    2. 语法:
      点击
  10. v-model=‘’

    1. 表单操作 获取数据 — 双向数据绑定
    2. 语法:
    3. 实现原理:
      <input :value=‘val’ @input=‘val=$event.target.value’ />
  11. v-slot=‘’

    1. 显示插槽内容
    2. 语法:
      <template v-slot:插槽名字=‘数据’>
  12. v-pre

    1. 不需要表达式 跳过这个元素和它的子元素的编译过程 – 不编译vue语法 直接输出内容
    2. {{ msg }}
  13. v-cloak

    1. 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    2. [v-cloak] {
      display: none;
      }
      {{ message }}
  14. v-once

    1. 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
    2. 可以用于优化更新性能
    3. 语法:
      一定不修改:{{ msg }}