vue3语法糖复习复习复习

1.vue2和vue3的区别

1.1vue3的vue是个对象，可按需引入

import {creatApp} from 'vue'

1.2导入区别

vue2使用的vue-router3.0导入的是构造函数new VueRouter()

vue3使用的vue-router4.0导入的对象createRouter()

1.3语法

vue2中的语法在vue3中都可以使用，除了过滤器不行

2.setup语法糖是什么

起初 Vue3.0 暴露变量必须 return 出来，template中才能使用

现在只需在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，甚至是自定义指令也可以在我们的template中自动获得

<template>
    <MyComponent :num= "num" @click="addNum">
</template>

<script setup >
import {ref} from 'vue';
import MyComponent from './MyComponent.vue'

const num = ref(0)
const addNum = ()=>{
    num.value++
}
</script> 

3.使用setup自动注册子组件

<template>
    <Child></Child>
</template>

<script setup>
import Child from '/Child.vue'
</script>

4.使用setup后新增API

4.1 defineProps

//子组件代码/Child.vue
<template>
    <span>
        {{prop.name}}
    </span>
</template>
<script setup>
import defineprops from 'vue'
const props = defineprops({
    name:{
        type:String,
        default:'Emma'
}
})
</script>

//父组件代码
<template>
   <Child :name='name'></Child>
</template>
<script setup>
import ref from 'vue';
import Child from './Child.vue'
let name = ref('Emma18') 

4.2 defineEmits子父传值的使用

//父组件
<template>
  <section class="parent">
    //@increase为监听事件 increase ，handleIncrease为监听后执行的函数将nums++
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
  const handleIncrease = () => {
    nums.value++;
  };
</script>

//子组件
<template>
    //元素添加了点击事件，去触发父级的increase监听
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
//emits为defineEmits显示声明后的对象
//如果存在多个监听事件则为defineEmits(['increase','emit2','emit3'])
  const emits = defineEmits(['increase']);
  const handelClick = () => {
    emits('increase');
//如果需要触发其他监听时间则为emits('emit2')
//emits 对象触发的事件都应该为 defineEmits 声明后的事件
  };
</script>

传参

在 emits() 的第一个参数，是监听事件的字面量。第二个参数为事件传递的参数。如果该事件有多个参数，第二个参数建议用对象的形式传递。

//子组件发送
 emits('increase', {params1:'1',params2:'2'});
//父组件监听
 const handleIncrease = (params) => {
    console.log(' params1);//{params1:'1',params2:'2'}
    nums.value += datas;
};

4.3 获取子组件ref变量和defineExpose暴露

//即vue2中获取子组件的ref,直接在父组件中控制子组件方法和变量的方法
//子组件 
<template>
    <p>{{data }}</p>
</template>

<script setup>
import { reactive , toRefs } from 'vue'
 //数据部分
const data = reactive({
  modelVisible: false,
  historyVisible: false, 
  reportVisible: false, 
})
defineExpose({
  ...toRefs(data),
})
</script>


//父组件
<template>
    <button @click="onClickSetUp">点击</button>
    <Content ref="content" />
</template>

<script setup>
import {ref} from 'vue'

// content组件ref
const content = ref('content')
// 点击设置
const onClickSetUp = ({ key }) => {
   content.value.modelVisible = true
}

</script>
<style scoped lang="less">
</style>

5.常见语法糖

5.1 v-model

• v-model可以实现数据双向绑定

• v-model既绑定了数据，又添加了事件监听，这个事件就是input事件

//setup 语法糖写法
<input type="text" v-model="name">

//还原为一下实例
//输入的时候会出发input事件，input事件会把当前的值赋给value,这就是v-model为什么可以实现双向绑定的原因
<input 
type = "text"
v-bind:value="name" 
v-on:input="name=$event.target.value>

5.2 v-bind

• v-bind用来添加动态属性，常见的src、herf、class、style、title等属性可以通过v-bind添加动态属性

• v-bind的语法糖就是去掉v-bind简写成‘：’

5.3 v-on

• v-on绑定事件监听---简写成@

5.4修饰符

//prevent修饰符是阻止默认事件
<form @submit.prevent='onSubmit'></form>

//以下修饰符与 .prevent使用相同
.stop用来阻止事件冒泡
.once事件只触发一次
.self事件只在自身触发，不能从内部触发
.enter | .tab | .delete | .esc ...键盘修饰符
.ctr | .alt | .shift | .meta系统修饰符

5.5动态css

• 目的：在封装组件的时候，通过外部传递props的值来体现不同的css样式

• 实现思路：用到了vue3的props和computed以及数据绑定

• 通过获取到的props的值，在computer里面计算出相对应的样式，然后体现到页面上