学习day52

1.关于

error Component name "School" should always be multi-word vue/multi-word-component-names

这里是因为脚手架的规范原因,

解决办法:

我是在vue.comfig.js文件中加入了一条配置,即

复制代码
  lintOnSave:false 

整个文件的完整代码是

复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false 
})

初次使用

School.vue

复制代码
<template>
<!-- 组件的结构 -->
<div class="demo">
    <h2>学校名称:{{schoolName}}</h2>
    <h2>学校地址:{{adress}}</h2>
    <button @click="showName"> 点我提示学校名</button>
</div>
</template>


<script>
//组件交互相关的代码
export default{
    name:'School',
     data(){
        return{
            schoolName:'尚硅谷',
            adress:'北京昌平'
        }
    },
    methods: {
        showName(){
            alert(this.schoolName)
        }
    },
}

</script>

<style>
/** 组件的样式 */
.demo{
    background-color: orange;
}
</style>

Student.vue

复制代码
<template>
<div >
    <h2>学生姓名:{{name}}</h2>
    <h2>学生年龄:{{age}}</h2>
</div>  
</template>

<script>

export default{
    name:'Student',
    data(){
        return{
            name:'tom',
            age:19
        }
    }
}
</script>

App.vue

复制代码
<template>
<div>
    <img src="./assets/logo.png" alt="logo">
    <School></School>
    <Student></Student>
</div>
    
</template>

<script>
  //引入组件
  import School from './components/School.vue'
  import Student from './components/Student.vue'

  export default{
    name:'App',
    components:{
    School,
    Student
}
  }

</script>

main.js

复制代码
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  el:"#app",
  render: h => h(App),
})

render函数

使用它的原因是因为它的功能是比较齐全的

原生写法

简约

其实就是帮我们创建模板,加载组件。

为什么要用render?因为vue-cli默认加载的是运行版本的Vue,它不认识 template和components这两个标签,所以只能用render。

ref属性

复制代码
<template>
<div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
    <school ref="sch"></school>
</div>
  
</template>

<script>
//引入School组件
import School from './components/School.vue'

export default {
    name:'App',
    components:{
        School
    },
    data(){
        return{
            msg:'欢迎学习Vue'
        }
    },
    methods:{
        showDOM(){
            console.log(this.$refs.title)
            console.log(this.$refs.btn)
            console.log(this.$refs.dch)
        }
    }

}
</script>

<style>

</style>

props配置

Student.vue

复制代码
<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生年龄:{{myAge+1}}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
    name:'Student',
    data(){
        return{
            msg:'我是一个尚硅谷的学生',
            myAge:this.age        
        }
    },
    methods:{
      updateAge(){
        this.myAge++
      }
    },

    //简单声明接收
      props:['name','sex','age']

    //接收的同时对数据进行类型限制
    // props:{
    //   name:String,
    //   age:Number,
    //   sex:String
    // }


    //接收的同时对数据:进行类型限制+默认值的指定+必要性的限制
    // props:{
    //   name:{
    //     type:String,  //声明类型是字符串
    //     required:true  //name是必要的
    //   },
    //   age:{
    //     type:Number,
    //     default:99  //默认值
    //   },
    //   sex:{
    //     type:String,
    //     required:true
    //   }
    // }


}
</script>

App.vue

复制代码
<template>
<div>
<Student name="李四" sex="女" :age="18"></Student>
</div>
  
</template>

<script>
import Student from './components/Student.vue'

export default {
    name:'App',
    components:{
        Student
    },

}
</script>

<style>

</style>

mixin混入

mixin.js

复制代码
export const mixin={
    methods:{
        showName(){
          alert(this.name)
        }
      }
}

1.局部混入

Student.vue

复制代码
<template>
  <div>
    <h2 @click="showName">学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>
import {mixin} from '../mixin'

export default {
    name:'Student',
    data(){
        return{
            name:'张三',
            sex:'男', 
        }
    },
    mixins:[mixin]

}
</script>

通过这样的引入方式,函数就引入进去了

2.全局引入

直接在main.js中进行一个引入

复制代码
//引入Vue
import Vue from 'vue';
//引入Vue
import App from './App.vue'

import {mixin} from './mixin'

//关闭Vue的生产提示
Vue.config.productionTip=false

Vue.mixin(mixin)

//创建vm
new Vue({
    el:"#app",
    render:h =>h(App)
})

插件

可以将之前学的全局指令,混入什么的都放入插件,然后使用

plugins.js

复制代码
export default{
    install(){
        console.log('@@install')
    }
}

main.js

复制代码
//引入Vue
import Vue from 'vue';
//引入Vue
import App from './App.vue'

//引入插件
import plugins from './plugins';

//关闭Vue的生产提示
Vue.config.productionTip=false

//应用插件
Vue.use(plugins)

//创建vm
new Vue({
    el:"#app",
    render:h =>h(App)
})

scoped

scoped解决的痛点:

两个不同的组件,class属性重名

类选择器也都一样,但是颜色不同。

如果此时在app处同时引入这两个组件,就会引发样式冲突!

Student.vue

复制代码
<template>
  <div class="demo">
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
  </div>
</template>

<script>

export default {
    name:'Student',
    data(){
        return{
            name:'张三',
            sex:'男', 
        }
    },

}
</script>

<style scoped>
  .demo{
    background-color: orange;
  }
</style>

School.vue

复制代码
<template>
  <div class="demo">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{adress}}</h2>
  </div>
</template>

<script>
export default {
    name:'School',
    data(){
        return{
            name:'尚硅谷',
            adress:'北京昌平'  
        }
    },

}
</script>

<style scoped>
 .demo{
  background-color:skyblue;
 }
</style>
相关推荐
breakloop6 分钟前
量化交易从0到1(理论篇)
笔记·学习·量化交易
大白的编程日记.32 分钟前
【Linux学习笔记】初识进程概念和进程PCB
linux·笔记·学习
每次的天空1 小时前
Flutter学习总结之Android渲染对比
android·学习·flutter
跳跳的向阳花2 小时前
08、Docker学习,常用安装:ClickHouse
学习·clickhouse·docker
2301_813506132 小时前
STP学习
网络·学习
Rinai_R2 小时前
学习汇编随手记
汇编·学习
promising-w3 小时前
【TI MSPM0】UART学习
嵌入式硬件·学习·ti 单片机
梁下轻语的秋缘3 小时前
每日c/c++题 备战蓝桥杯(小球反弹)[运动分解求解,最大公约数gcd]
c语言·c++·学习·算法·数学建模·蓝桥杯
前往深圳3 小时前
数据结构:LinkedList与链表
java·开发语言·学习
哒宰的自我修养4 小时前
0.DJI-PSDK开发准备及资料说明(基于DJI经纬M300RTK和M350RTK无人机上使用)
c++·学习·无人机