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>