vue.js学习(day 13)
.sync修饰符
App.vue
<template>
<div class="app">
<button
@click="isShow = true"
>退出按钮</button>
<!-- :visible.sync => :visible + @update:visible-->
<BaseDialog
:visible.sync="isShow"
></BaseDialog>
</div>
</template>
<script>
import BaseDialog from "./components/BaseDialog.vue"
export default {
data() {
return {
isShow :false
}
},
methods: {
},
components: {
BaseDialog,
},
}
</script>
<style>
</style>BaseDialog.vue
<template>
<div v-show="visible" class="base-dialog-wrap">
<div class="base-dialog">
<div class="title">
<h3>温馨提示：</h3>
<button class="close" @click="close">x</button>
</div>
<div class="content">
<p>你确认要退出本系统么？</p>
</div>
<div class="footer">
<button @click="yes" >确认</button>
<button @click="cancel" >取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
visible:Boolean
},
methods:{
close(){
this.$emit('update:visible',false)
},
yes(){
this.$emit('update:visible',false)
},
cancel(){
this.$emit('update:visible',false)
}
}
}
</script>
<style scoped>
.base-dialog-wrap {
width: 300px;
height: 200px;
box-shadow: 2px 2px 2px 2px #ccc;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 10px;
}
.base-dialog .title {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #000;
}
.base-dialog .content {
margin-top: 38px;
}
.base-dialog .title .close {
width: 20px;
height: 20px;
cursor: pointer;
line-height: 10px;
}
.footer {
display: flex;
justify-content: flex-end;
margin-top: 26px;
}
.footer button {
width: 80px;
height: 40px;
}
.footer button:nth-child(1) {
margin-right: 10px;
cursor: pointer;
}
</style>ref 和 $refs获取dom元素
App.vue
<template>
<div class="app">
<div style="width: 100px;height: 100px;" class="base-chart-box">
这是一个捣乱的盒子
</div>
<BaseChart></BaseChart>
</div>
</template>
<script>
import BaseChart from './components/BaseChart.vue'
export default {
components:{
BaseChart
}
}
</script>
<style>
.base-chart-box {
width: 300px;
height: 200px;
}
</style>BaseCharts.vue
<template>
<div class="base-chart-box" ref="baseChartBox">子组件</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
// 基于准备好的dom，初始化echarts实例
// document.querySelector 会查找项目中所有的元素(整个页面)
// $refs只会在当前组件查找盒子
// var myChart = echarts.init(document.querySelector('.base-chart-box'))
var myChart = echarts.init(this.$refs.baseChartBox)
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例',
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
})
},
}
</script>
<style scoped>
.base-chart-box {
width: 400px;
height: 300px;
border: 3px solid #000;
border-radius: 6px;
}
</style>ref 和 $refs 用于组件实例
App.vue
<template>
<div class="app">
<h4>父组件 -- <button>获取组件实例</button></h4>
<BaseForm ref="baseForm"></BaseForm>
<button @click="handleFormData">获取数据</button>
<button @click="handleresetform">重置数据</button>
</div>
</template>
<script>
import BaseForm from './components/BaseForm.vue'
export default {
components: {
BaseForm,
},
methods: {
handleFormData(){
console.log(this.$refs.baseForm.getFormData())
},
handleresetform(){
this.$refs.baseForm.resetFormData()
}
}
}
</script>
<style>
</style>BaseForm.vue
<template>
<div class="app">
<div>
账号: <input v-model="username" type="text">
</div>
<div>
密码: <input v-model="password" type="text">
</div>
<div>
<!-- <button @click="getFormData">获取数据</button>
<button @click="resetFormData">重置数据</button> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: 'admin',
password: '123456',
}
},
methods: {
//方法1：收集表单数据，返回一个对象
getFormData() {
return {
username:this.username,
password:this.password
}
},
//方法2：重置表单
resetFormData() {
this.username = ''
this.password = ''
},
}
}
</script>
<style scoped>
.app {
border: 2px solid #ccc;
padding: 10px;
}
.app div{
margin: 10px 0;
}
.app div button{
margin-right: 8px;
}
</style>vue异步更新、$nextTick
App.vue
<template>
<div class="app">
<div v-if="isShowEdit">
<input type="text" v-model="editValue" ref="inp" />
<button>确认</button>
</div>
<div v-else>
<span>{{ title }}</span>
<button @click="handlewrite">编辑</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: '大标题',
isShowEdit: false,
editValue: '',
}
},
methods: {
handlewrite(){
//1.获取输入框
this.isShowEdit=true
//2.输入框 聚焦
//$nextTick 等DOM更新后，才会触发执行方法里的函数体
this.$nextTick(()=>{
this.$refs.inp.focus()
})
//延时函数也可实现等待，但是时间不精准
// setTimeout(()=>{
// this.$refs.inp.focus()
// },1000)
}
},
}
</script>
<style>
</style>