1. 简单的数据绑定
展示如何使用双大括号语法进行文本插值：
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
2. 条件渲染
使用 v-if 指令来显示或隐藏元素：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
});
</script>
3. 列表渲染
用 v-for 指令遍历数组并渲染列表项：
<ul id="example-1">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ id: 1, text: 'Vue.js' },
{ id: 2, text: 'React' },
{ id: 3, text: 'Angular' }
]
}
});
</script>
4. 表单输入绑定
使用 v-model 实现双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
5. 绑定属性
通过 v-bind 动态设置 HTML 属性：
<a v-bind:href="url">Link</a>
<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
});
</script>
6. 事件处理
监听 DOM 事件并调用方法：
<button v-on:click="increment">Increment</button>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++;
}
}
});
</script>
7. 计算属性
创建依赖于其他数据属性的计算属性：
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}
});
</script>
8. 过滤器（Vue 2）
在 Vue 2 中使用过滤器格式化文本输出（注意：Vue 3 已移除对过滤器的支持）：
<p>{{ message | capitalize }}</p>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue'
},
filters: {
capitalize(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
</script>
9. 组件化开发
定义一个简单的自定义组件：
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
new Vue({ el: '#app' });
</script>
10. 路由基础（Vue Router）
为应用添加基本的路由功能（需安装 Vue Router 包）：
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import Foo from './Foo.vue';
import Bar from './Bar.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
const router = new VueRouter({
routes // 缩写为 `routes: routes`
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
</script>
请注意，最后一个例子涉及到 Vue Router 的使用，这需要额外安装 vue-router 包，并且通常用于更复杂的应用程序结构中。对于初学者来说，了解如何创建和使用基本组件、数据绑定、条件渲染、列表渲染等是掌握 Vue 的关键。如果你正在使用 Vue 3，需要注意一些 API 和特性上的变化，例如 Composition API 和新的生命周期钩子。
