一.脚手架的文件结构
需要注意的是:
- 执行完npm run serve 之后直接去运行main.js
- assets放静态资源,放大家共同享用的资源
- 所有组件都往components里面放唯独App.vue是王者不放里面
二.ref属性
- 被用来给元素或子组件注册引用信息(id的替代者)
- 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)
- 打标识:< h1 ref=“xxx”> 获取:this.$refs.xxx
1.想获取上方DOM元素
如何写ref属性:写在标签上
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="show">点我输出上方的DOM元素</button>
<School/>
</div>
</template>
如何使用:this.$refs.title
在vc身上的$refs身上获取
methods: {
show(){
console.log(this.$refs.title);
}
},
2.现在在button身上添加ref属性
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="show">点我输出上方的DOM元素</button>
输出this.$refs
给哪个标签属性加ref ,那么$ref就帮你收集哪个标签
3.如果给组件标签加ref
<School ref="sch"/>
this.$refs.sch
拿的是school组件实例对象,this.$refs.sch的sch就是school组件的实例对象
总结:
console.log(this.$refs.sch);//school组件实例对象(vc)
console.log(this.$refs.btn);//真实的DOM元素
console.log(this.$refs.title);//真实的DOM元素
三.props配置
1.用组件将数据动态的传入
在App.vue文件里修改Student组件标签
<template>
<div>
<Student name="李四" sex="女" age="age" />
</div>
</template>
但是上步操作只是将数据传入,但是还没告诉vue怎么用,我们需要在Student.vue文件里说一声传入的数据要用
props: ["name", "sex", "age"] 顺序可颠倒
<template>
<div>
<h1>{{ msg }}</h1>
<h2>姓名:{{ name }}</h2>
<h2>性别:{{ sex }}</h2>
<h2>年龄:{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
msg: "我是美女",
};
},
props: ["name", "sex", "age"],//简单声明接收
};
</script>
这样的话组件在复用数据可更改,在页面上显示的是两个相同的组件只是数据不一样
<template>
<div>
<Student name="李四" sex="女" age="18" />
<Student name="张三" sex="男" age="20" />
</div>
</template>
注意::age="18"
加了冒号引号里面的值就是一个js表达式
<Student name="李四" sex="女" :age="18" />
props是只读的,vue底层会检测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据
四.mixin混入
两个组件共享一个配置,并且这个配置是一样的
将引入一个mixin.js将共用的放在这里
//mixin.js
export const hunhe = {
methods:{
showName(){
alert(this.name)
}
}
}
在School.vue里引入import {hunhe} from '../mixin'
与name平级写mixin:[hunhe]
五.插件
功能:用于增强vue
本质:包含install方法的一个对象,install的第一个参数是vue,第二个参数是插件使用者传递的数据
在main,js引入插件
import Vue from 'vue'
import App from './App.vue'
// 引入插件
import plugins from './plugins'
Vue.config.productionTip = false;
// 使用插件
Vue.use(plugins)
new Vue({
el:'#app',
render: h => h(App)
})
可以在plugins.js里写很多过滤器和自定义指令
在不同的组件写的样式会汇总在一起这样会产生类名冲突
使用<style scoped>
意味着他只负责自己组件的样式
它给最外层的div加了一层特殊的标签属性,后面的值是随机生成的,通过demo和控制标签属性选择器
六.Todo-list案例
1.组件化编码流程(通用)
实现静态组件:抽取组件,使用组件实现静态页面效果
组件按照功能点划分