Vue2框架基础知识3

yandajiangjun

已于 2023-01-14 20:49:16 修改

阅读量342

点赞数 1

文章标签： vue.js javascript 前端

于 2023-01-14 20:47:56 首次发布

本文链接：https://blog.csdn.net/yandajiangjun/article/details/128689101

版权

组件注册

局部组件
1. 创建一个组件.vue
2. 引入：import Mycomp from ‘./components/Mycomp.vue’
3. 注册组件
  export default {
  name: ‘App’,
  components: {
  Mycomp
  }
  }
4. 使用组件
组件组成
1. template 视图
2. script 逻辑
3. style 样式

全局组件

注册全局组件在Vue对象身上有个Vue.component() 注册全局组件在所有的组件中不需要引入可以直接使用
语法：
Vue.component(‘my-component-name’, {
// … 选项 …
})
代码演示

    // 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:{

        }
    })

全局组件–可以挂载创建好的局部组件注册全局
import MyBanner from ‘./components/MyBanner.vue’
// Vue.component(‘MyBanner’,MyBanner)
Vue.component(MyBanner.name,MyBanner)
vue 不同构建版本
1. vue.js 完整版 --编译器+ 运行时
2. vue.runtime.js 运行时

补充一个知识点
1. 组件的视图模板组成
2. 标签
3. template 属性使用
4. render() render函数渲染 – react
5. 优先级问题
  
  标签 > render() > template (修改vue.js)

Prop传递数据

作用：实现组件之前数据传递- 父传子
语法
1. 父组件：
  <子组件 msg=‘hello’ :info=‘’ ></子组件>
2. 子组件：
  数组接受:
  props:[‘msg’,‘info’]
  
  对象接受方式:
  props:{
  msg:数据类型
  info:{
  type:String,
  default:‘默认值’
  },
  … 如下-prop验证
  }
3. 子组件使用父组件数据直接当data里面的数据使用
  {{ msg }}
注意:
1. prop传递数据时正向传递父串子数据时响应式的父组件数据修改了子组件同步更新
2. 子组件不能直接修改prop传递的数据

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. 子组件定义事件
  this.$emit(‘getData’,this.msg)
2. 父组件-调用子组件上面接受自定义事件
  <子组件 @自定义事件名=‘函数名’/>
  
  methods:{
  函数名(val){
  this.xx = val;
  }
  }
特殊的prop传递函数
1. prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
2. 子组件接受props:[‘fun’]
3. 子组件调用父组件传递的函数名fun this.fun() fun()

插槽

说明：Vue 实现了一套内容分发的 API,定义时不知道具体要显示什么，只是留出来显示的位置，在组件调用时写具体内容，能展现在预留的位置上。
定义：
使用标签预留位置
调用组件时
写具体的要呈现的内容，要显示在标签中
<组件> xxx </组件>
匿名插槽 (常用的)
定义时：
/
具名插槽 (常用的)
1. 定义插槽的时候有名字name属性
2. 使用
  
  底部区域
3. 注意:使用的时候有名字的在具名插槽里面显示没有名字找匿名插槽
作用域插槽
1. 作用: 让插槽内容能够访问子组件中才有的数据 (插槽提供数据)
2. 语法:
3. 使用插槽
  
  底部区域
  
  注意:data一个对象 data={ msg:‘’,num:‘’,…}
具名插槽的缩写
v-slot:header 可以被重写为 #header
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
默认值
动态插槽名
1. 作用:在调用插槽的时候定义插槽的名字
2. 语法:
  1. <template v-slot:[varName]>我是具名插槽-{{varName}}
  2. data(){
    return {
    varName:‘header’
    }
    }

总结所有vue指令

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

v-text=‘表达式’
插入字符串数据
v-html=‘表达式’
1. 插入HTML数据解析html代码识别标签
2. 注意:不安全
v-show=‘表达式’
1. 是否显示 true显示 false隐藏
2. 控制css属性:diplay:block/none
v-if=‘’
1. 是否显示 true显示 false隐藏
2. 控制元素的创建和销毁
v-else
v-else-if=‘’
v-for=‘’
1. 遍历数组和对象
2. 语法:
  {{ item }}
  
  {{ item }}
v-on:事件名=‘函数名’
1. 绑定事件简写: @事件名=‘函数名’
2. 点击
3. 事件-修饰符
  1. .stop
  2. .prvent
  3. 键盘: .enter
v-bind:属性=‘’
1. 动态绑定属性简写: :属性=‘’
2. 语法:
  点击
v-model=‘’
1. 表单操作获取数据 — 双向数据绑定
2. 语法:
3. 实现原理:
  <input :value=‘val’ @input=‘val=$event.target.value’ />
v-slot=‘’
1. 显示插槽内容
2. 语法:
  <template v-slot:插槽名字=‘数据’>
v-pre
1. 不需要表达式跳过这个元素和它的子元素的编译过程 – 不编译vue语法直接输出内容
2. {{ msg }}
v-cloak
1. 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
2. [v-cloak] {
  display: none;
  }
  {{ message }}
v-once
1. 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
2. 可以用于优化更新性能
3. 语法:
  一定不修改:{{ msg }}