VUE3的学习和使用 vue语句
1.v-model和:value的区别
:value绑定只是v-bind单向的数据绑定,组件内部修改了对应的值,需要添加change方法改变data;
v-model的绑定是双向的,组件内部的值变化了,也会同步到页面的data中。
<Input v-model:value="userName" /> <Input :value="userName" @change="(e) => {changeValue('userName',e.target.value)}" />
两种写法的效果是一样的
:value后可以接js表达式,v-model只能接数值,否则报错。
2.v-if和v-show,:is的区别
v-if dom元素不渲染
v-show 有dom节点,但是该元素不显示,css样式display:none
:is 多用于动态切换组件,如:
<div> // flag 为真显示组件一,否则显示组件二 <Component :is="flag ? ComponentOne : ComponentTwo" /> </div>
3.v-if和v-for不能同时使用
v-for比v-if优先级更高,所以先运行循环,在每条循环中都要进行一次判断。
解决办法,在v-for外面嵌套一层<template>,如
// 错误写法 <li v-for="item in list" :key="index" v-if="showFlag"> {{item}} </li> // 优化后 <template v-if="showFlag"> <li v-for="item in list" key="index"> {{item}} </li> </template>
4.:class动态命名类名
// 动态命名 连接符或者传入多个参数 <div :class="`btn${isPlay ? 'btn-play' : ''}`" /> <div :class="['btn', 'btn-bg', isPlay ? 'btn-play' : '']"/>
5.route和router的区别
router可以操作路由,如push方法,
route包含当前路由的各种参数信息,如path等。
import { useRoute, useRouter, } from 'vue-router'; const route = useRoute(); const router = useRouter(); // 获取当前路径 const currentPath = computed(() => route.path); // 跳转到当前路由 router.push(currentPath);
6.h()和createVNode()
h()函数和createVNode()函数都是创建dom节点
h(标签, {属性},内容)
h(标签, {属性},[可以继续嵌套h()])
createVNode(标签, {属性},内容)
createVNode(标签, {属性},[可以继续嵌套createVNode()])
......
(持续待更新)