vue3 ​

<div v-bind="objectOfAttrs"></div>

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">...</a>

<div :class="{acitve: isActive}"> </div>
<!-- 由于v-bind后，""里面的语句，自动会当成变量或者表达式 -->
<!-- 如果传递了一个对象，则将对象属性的属性值当成变量，转换计算布尔值，
根据结果真假决定该属性是否存在 -->
<script setup>
import { ref } from 'vue'
const isActive = ref(false);
const isLink = ref(1);
</script>

<div class="h1" :class="{acitve: isActive, link: isLink}">aa</div>
<!-- <div class="h1 link"></div> -->

<script setup>
import { reactive } from 'vue'
const myClass = reactive({
	active: false,
	link: true
})
</script>

<div class="h1" :class="myClass">aa</div>
<!-- <div class="h1 link"></div> -->

<script setup>
import {ref, computed} from 'vue'
const error = ref(4)

const classCC = computed(() => {
	return {
		active: error > 4 ? true : false,
		link: error > 2 ? true : false
	}
});
</script>

<div class="h1" :class="classCC">aa</div>

<script setup>
import {ref, computed} from 'vue'
const isActive = ref(false)
const linkClass = ref('link')

</script>

<div class="h1" :class="[{active:isActive}, linkClass]">aa</div>

<script setup>
import {ref} from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>
<div :style="{fontSize: fontSize + 'px', color: activeColor}">123</div>

<div :style="styleObject"></div>

<div :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>

<!-- 使用前引入对应的生命周期函数 -->
<script setup>
	import { onMounted } from 'vue'
	onMounted(()=>{
		console.log('onMounted');
	});
</script>

<script setup>
import { ref, onMounted } from 'vue'
const input = ref(null)

onMounted(()=>{
	// 使用响应式对象.value，使用DOM元素
	input.value.focus();
})

</script>
<template>
	<input ref="input">
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 由于使用了v-for，所以需要默认为数组。
const li = ref([])
// 遍历的响应式对象。
const list = ref([1,2,3,4,5])

onMounted(()=>{
	// 使用响应式对象.value，使用DOM元素
	li.value.focus();
})
</script>
<template>
	<li v-for="item in list" ref="li">
		{{item}}
	</li>
</template>

<template>
	<li v-for="item in list" ref="(el)=>{ li = el; }">
		{{item}}
	</li>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value 是 <Child /> 组件的实例
})
</script>

<template>
  <Child ref="child" />
</template>

<script setup>
// 使用单文件组件
import ComponentA from "./components/ComponentA.vue"
import {ref,h} form 'vue'
const Hello = defineComponent({
		// <script setup> 中一样使用组合式 API
		(props) => {
			const count = ref(0);
			render: ()=>{
				return h('div',{},count.value)
			}
		},
		// 或者继续使用选项式
		props: {

		}
	});
</script>

<template>
	<div class="father">
		<ComponentA />
	</div>
</template>

//如果没有使用setup, 则使用components显式注册，和vue2一样
<script>
import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
</script>

<!-- vue2案例 -->
<!-- father.vue -->
<template>
	<div>
		<Son @events="handleFn"></Son>
	</div>
</template>
<script>
	new Vue({
		el: "#app",
		methods:{
			handleFn(val){
				console.log(val); //123
			}
		}
	});
</script>

<!-- son.vue -->
<template>
		<h1 @click="handleFn"></h1>
</template>
<script>
	new Vue({
		el: "#app",
		methods:{
			handleFn(){
				this.$emit('events','123'); //将123数据作为第二个参数，传递给父组件。
			}
		}
	});
</script>

<!-- 方式一： 行内直接触发 $emit() -->
<!-- Son.vue -->
<h1 @click="$emit('events','123')"></h1>

<!-- Father.vue -->
<son @events="handleFn">
<script setup>
const handleFn = function(val){
	console.log(val)
}
</script>

<!-- 方式二： 引入defineEmit([])，显式定义和触发事件 -->
<!-- Son.vue -->
<h1 @click = "sonHandleFn"></h1>
<script setup>
	import { defineEmit } from 'vue'
	defineEmit(['events']);
	const sonHandleFn = function(){
		emit('events','123')
	}
</script>

<!-- 旧式setup -->
<script>
	export default {
		emits: ['events'],
		setup({emit}){
			emit('events')
		}
	}
</script>

<!-- Father.vue -->
<son @events="handleFn"></son>
<script setup>
	const handleFn = function(val){
	console.log(val) //123
}
</script>

<!-- 父组件 -->
<el-input v-model="msg">{{msg}}</el-input>
<!-- Input.vue -->
<div class="">
<!--  
   需要注意的点就是：
   1.input使用的 :value, 
   2.下面的change名，要和下面的model中的event保持一致
   3.text1属性要对应起来
-->
  <input type="text" :value="text1" @input="$emit('change', $event.target.value)" />    
</div>
<script>
export default {
  data() {
    return {};
  },
  //用来告诉组件自己依赖的数据和调用的方法
  model: {
    prop: "text1",
    event: "change",
  },
  //用来接收父组件传递的值的，接收的名字自己可以随意取
  props: {
    text1: String,
    default: () => {
      return "";
    },
  },
  methods: {},
};
</script>

<!-- 原生写法 -->
<input v-model="searchText" />
<!-- 以上写法模板编译器会编译，等价于如下代码 -->
<input
  :value="searchText"
  @input="searchText = $event.target.value"
/>

<!-- 而在组件上使用时-->
<CustomInput v-model="searchText" />
<!-- 会被展开为  -->
<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

<!-- 因此,其实等价于经历了 父子传值和子父传值 -->
<!-- 因此,子组件内应该这样设计,才能让v-model在组件上生效. -->
<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- vue3 官网实例 -->
<!-- App.vue使用UserName组件 -->
<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

<!-- UserName.vue 组件 -->
<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<!-- 常见的用于class、style 和 id。 -->
<MyInput class="active"/>
<!-- MyInput内没有接收的话,自动透传 -->
<input class="active">

<!-- 如果input内部定义了class,则会合并 -->
<input class="ipt active">

<!-- v-on监听继承 -->
<MyButton @click="onClick" />

<!-- button内部,当button被点击时,除了自己的会触发,也会触发透传的onClick事件. -->
<button>点我</button>

<script setup>
defineOptions({
  inheritAttrs: false
  // 组件内部禁用透传
})
// ...setup 逻辑
</script>

<!-- 向具名插槽内,传入props数据 -->
<MyComponent>
  <template #header="headerProps"> 
  <!-- 给插槽名赋值props, ="headerProps"  -->
    {{ headerProps }}
    <!--  -->
  </template>
</MyComponent>

<!-- 组件内部 -->
<slot name="header" message="hello"></slot>
<!-- 此时headerProps表示{message: 'hello'} -->

<script setup>
import { provide } from 'vue'
// 使用provide
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
// 一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。
provide(/* 注入名 */ 'name', /* 值 */ 'wc')
</script>

<script setup>
import { inject } from 'vue'
// 使用inject
const msg = inject('message', '默认值');
// msg 则表示hello, 如果provide为设置,使用默认值.
</script>

<!-- 依赖 -->
<script setup>
import {ref, provide} from 'vue'
const address = ref('jaingxi')
function handleFn(){
	alert(123);
}
provide('all', {
	address,
	handleFn
})
</script>

<!-- 注入 -->
<script setup>
import {inject} from 'vue'
const { address,handleFn } = inject('all');
// 解构赋值
</script>