学习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>
相关推荐
blackA_2 小时前
数据库MySQL学习——day4(更多查询操作与更新数据)
数据库·学习·mysql
梁下轻语的秋缘4 小时前
每日c/c++题 备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)
c语言·c++·学习·蓝桥杯
球求了5 小时前
C++:继承机制详解
开发语言·c++·学习
时光追逐者5 小时前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽6 小时前
SpringBoot 学习
java·spring boot·后端·学习
genggeng不会代码7 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
搞机小能手7 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
The_cute_cat10 小时前
25.4.22学习总结
学习
冰茶_10 小时前
.NET MAUI 发展历程:从 Xamarin 到现代跨平台应用开发框架
学习·microsoft·微软·c#·.net·xamarin
帅云毅11 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链