学习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>
相关推荐
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed2 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中2 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h2 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa