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()])

......

(持续待更新）