Vue 学习整理 待完善

1. $refs.xxx   是获取  对应ref=‘xxx’ 的dom元素  进行操作

  $refs['xxx']  是获取到的是添加了ref="xxx"属性的这个组件

console.log(this.$refs.xxx.value) //打印出输入框中的value值
this.$refs['xxx'].init() //调用组件comp-detail中的init()方法

2. $emit  监听事件

父组件可以使用props 把数据传给子组件   

子组件可以用 $emit 来让父组件监听自定义事件

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

子组件：
<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

父组件：
<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

这里有点模糊 ---------原文链接 https://blog.csdn.net/sllailcp/article/details/78595077

 

3.nextTick()          定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

<template>
  <div class="hello">
    <div>
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>
 

使用nextTick()
  
methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

nextTick 原文链接https://blog.csdn.net/zhouzuoluo/article/details/84752280

 4.$el  和 $data

5.vue生命周期

 

6.v-if 和v-show 

v-if  创建了一个dom元素  
v-show  是用display：none  隐藏起来了  饿汉式
v-if 更快 因为 需要时候才创建   感觉有点像懒汉式

7.keep-alive

8.用$refs 来改变元素样式

this.$refs.menuRight.style.border='#9BFFF6 1px solid'

 9.vue 指定端口运行

在 vue.config.js

module.exports = defineConfig({

//关闭es语法检测
  lintOnSave : false,
  devServer: {
    // 指定项目启动时的默认端口号
    port: 1084
  }
})