1. 数据驱动视图
Vue.js 是一个数据驱动的框架，意味着你的视图（UI）是根据数据的变化而变化的。通过使用 Vue 的指令，你可以将数据绑定到 DOM 元素，使其动态地响应数据的变化。
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>
在上述代码中，{{ message }} 是一个插值表达式，它会动态地显示 message 数据的值。
2. Vue 组件
Vue 组件是 Vue.js 应用程序的基本构建块，可以将一个页面拆分成多个可复用的组件。组件可以有自己的状态（数据）、方法、生命周期钩子等。
<template>
<div>
<my-component :text="message"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
message: 'Hello, Vue!'
};
}
};
</script>
3. 指令和事件处理
Vue 提供了一些指令，用于处理 DOM 元素的属性和行为。例如，v-bind 用于绑定属性，v-model 用于双向绑定表单元素，v-on 用于监听事件。
<template>
<div>
<input v-model="inputValue" />
<button @click="handleClick">Click me</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
handleClick() {
alert('Button clicked!');
}
}
};
</script>
4. 样式绑定和条件渲染
Vue.js 允许你动态地绑定样式和条件地渲染元素。你可以使用 v-bind:class 来绑定样式，使用 v-if、v-else、v-show 来进行条件渲染。
<template>
<div>
<p :class="{ 'red-text': isRed }">This text is red</p>
<div v-if="isVisible">This is visible</div>
</div>
</template>
<script>
export default {
data() {
return {
isRed: true,
isVisible: true
};
}
};
</script>
<style>
.red-text {
color: red;
}
</style>
5. 列表渲染
Vue.js 提供了 v-for 指令，用于遍历数组或对象，渲染列表。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
};
}
};
</script>
这只是 Vue.js UI 开发的基础，Vue.js 还提供了更多高级特性和工具，例如过渡效果、自定义指令、插槽等。你可以在 Vue.js 的[官方文档](https://vuejs.org/)中找到更详细的信息和示例。
转载请注明出处：http://www.zyzy.cn/article/detail/4838/Vue