一、获取元素

1、this.$refs

2、document.querySelector()  document.getElementById() document.getElementByTagName()等等

确保获取到的元素不是undefined或null

vue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。

二、获取元素的宽高

1、如果是内嵌样式 style="width:100px,height:100px;"

可以通过以下两种方法获取宽高：

this.$refs.ele.style.width / this.$refs.ele.style.height   获取的是字符串且带单位，如："100px"

this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,，如：'100'

2、如果非内嵌样式，即样式写在样式表里面：

只能通过以下方式获取宽高：

this.$refs.ele.offsetWidth  /this.$refs.ele.offsetHeight 获取的是字符串且无单位,，如：'100'

三、给元素宽 高赋值：

1、offsetWidth / offsetHeight 是只读属性，不能赋值；

2、可以通过以下方式赋值：

this.$refs.ele.style.width = "100px";  //记得带单位

this.$refs.ele.style.height= "100px"; //记得带单位

四、getComputedStyle API

window.getComputedStyle(this.$refs.ele).width;

window.getComputedStyle(this.$refs.ele).height;

五、通过setAttribute来设置属性

this.$refs.ele.setAttribute('style','height:1000px');

this.$refs.ele.setAttribute('style','height:1000px');

vue3动态路由添加，列表获取，跳转，传参，router里获取store里的值以及使用方法，页面获取vuex里的state值，ref获取元素宽高，监听vuex里的值
vue3动态路由添加和路由列表获取

import {useRouter} from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter(); 
    const dui = [
      {
        path: '/aaa',
        name: 'Aaa',
        component:  () => import('@/views/aaa.vue')
      },
      {
        path: '/firs',
        name: 'Firs',
        component:  () => import('@/views/firs.vue')
      },
      {
        path: '/thre',
        name: 'Thre',
        component:  () => import('@/views/thre.vue')
      },
    ];
    //添加路由
    dui.forEach(res =>{
      router.addRoute(res);
    })
    //获取路由列表
    let lis = router.getRoutes();
  },
})

vue3路由跳转传参

方法一

import router from './router'

  setup() {
  	//点击跳转
    const gorouter = () =>{
      const obj = {
        name:'nihao',
        age:100
      }
      router.push({
        path:'/about',
        query:obj
      });
    }
    return {
      gorouter
    }
  },

方法二

import { useRoute, useRouter} from 'vue-router'

setup() {
    const router = useRouter();
    const route = useRoute();

    const gorouter = () =>{
      const obj = {
        name:'nihao',
        age:100
      }
      router.push({
        path:'/about',
        query:obj
      });
    }
    return {
      gorouter
    }
  },

router里获取store里的值以及使用里面的方法
在router里引入store里的文件就可以拿到
例如：获取store下的modules下的文件里的值

//router文件里
import use from '../store'
import store from '../store/modules/setUserInfo'
let name = store.state.name;
use.commit('方法',值)

页面获取vuex里state的某个值(用computed才能实时同步更新)

import { computed, defineComponent,toRaw } from 'vue'
import {useStore} from 'vuex'

setUp(){
	 const store = useStore();
    //获取vuex中setUserInfo模块里state的routerList值
    //如果不是模块化就把setUserInfo去掉就行
    //用computed才能实时同步更新
    let storeData = computed(() =>{
      return store.state.setUserInfo.routerList
    }).value
    
    //得到的是一个proxy值，需要toRaw才能拿到你想要的
    console.log(toRaw(storeData ))//方法一
    console.log(toRaw(store.state.setUserInfo.routerList))//方法二
}

ref获取元素及宽高

<div ref="bigscroll"></div>
setup() {
	const bigscroll = ref(null);
	onMounted(() =>{
		console.log(bigscroll.value)
		console.log(bigscroll.value.offsetWidth)
		console.log(bigscroll.value.clientWidth)
		console.log(bigscroll.value.clientHeight)
	})
	return{
		bigscroll
	}
}

监听vuex里的值

import {useStore} from 'vuex'
setup() {
        const store = useStore();
		watch(()=>store.state.defaultActive,()=>{
		    console.log('??????????')
		})
}

动态获取浏览器宽高

created(){
	window.addEventListener('resize', this.GetWindowInfo); //注册监听器
	this.GetWindowInfo() //页面创建时先调用一次
},
methods:{
  GetWindowInfo(){
	var width = window.innerWidth // 宽
	var height = window.innerHeight // 高
  }
},
destroyed(){
  window.removeEventListener('resize', this.GetWindowInfo)
}

动态获取元素宽高

在标签中定义ref属性，用this.$refs.自定义名称.clientHeight / clientWidth去获取。
但是this.$refs可能会出现undefined的问题，解决方法：

 - 写在method中，使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了
并且此方法获取的宽高不包括border的值

代码：

// html
<div ref="container"></div>
// js
GetDomInfo() {
  this.$nextTick(() => {
    var domWidth = this.$refs.container.clientWidth // 宽
	var domHeight = this.$refs.container.clientHeight // 高
  })
}

动态设置元素的宽高或样式

<div :style="{width: width}"></div>
data() {
  return {
    width: ''
  }
},
setInfo() {
  this.width = width - domWidth + 'px'
}