vue3

创建VUE项目

npm init vue@latest

基本语法

插值语法

<script>
export default {
    data() {
        return {
            msg: 'Hello World'
        }
    }
}
</script>

<template>
    <h3>插入数据 {{ msg }}</h3>
</template>

<style scoped></style>

三木运算

<script>
export default {
    data() {
        return {
            bool: true
        }
    }
}
</script>

<template>
    <h3>{{ bool ? 'yes' : 'no'}}</h3>
</template>

<style scoped></style>

属性绑定

<script>
export default {
    data() {
        return {
            active: 'dynamicId',
            aaa: {
                bbb: 'b',
                ccc: 'c'
            }
        }
    }
}
</script>

<template>
    <h3 :class="active">插入数据</h3>
	<h3 :class="aaa">动态绑定多个属性</h3>
</template>

<style scoped></style>

条件渲染

同vue2

v-if	// 更高的切换开销
v-else-if
v-else
v-show	// 更高的初始渲染开销

列表渲染

同vue2

事件传参

<script>
export default {
    methods:{
        clickButton('普通参数', e){
            console.log()
        }
    }
}
</script>

<template>
	<button @click="clickButton('普通参数',$event)"></button>
</template>

<style scoped></style>