学习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>