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>

总结