在Vue中，主要的基础语法可以概括为以下几点：
- 数据绑定：使用双大括号
{{ }}进行文本插值，或使用v-bind指令绑定属性。
<template>
<div>{{ message }}</div>
<div v-bind:id="dynamicId">...</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!',
dynamicId: 'unique-id'
};
}
};
</script>- 指令：以
v-开头的特殊属性，提供声明式的方法来将数据绑定到DOM。
<template>
<div v-if="condition">...</div>
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
<button v-on:click="doSomething">Click me</button>
</template>- 计算属性和侦听器：使用
computed创建依赖于其他数据的复杂表达式，使用watch侦听数据变化。
<template>
<div>{{ reversedMessage }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
};
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
};
</script>- 组件化：通过
Vue.component或单文件组件（.vue文件）创建可复用的组件。
// 注册组件
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 或者在单文件组件中
<template>
<div>A custom component!</div>
</template>- 样式绑定：使用
v-bind:style或:style绑定内联样式。
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">...</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30
};
}
};
</script>- 条件渲染：使用
v-if,v-else-if,v-else和v-show控制元素的显示和隐藏。
<template>
<div v-if="condition">...</div>
<div v-else>...</div>
<div v-show="isVisible">...</div>
</template>- 事件处理：使用
v-on:event或@event监听DOM事件。
<template>
<button @click="doSomething">Click me</button>
</template>
<script>
export default {
methods: {
doSomething() {
// Event handling logic
}
}
};
</script>- 双向数据绑定：使用
v-model实现表单输入和数据之间的双向绑定。
<template>
<input v-model="message" />
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
</script>- 插槽和作用域插槽：使用
slot和scoped slot创建可复用的组件接口。
<!-- 父组件 -->
<template>
<my-component>
<template scope="props">
{{ props.text }}