Vue.js 基础 - Vue

01. Vue.js 模板语法——数据驱动视图

Vue 的核心思想是「数据驱动视图」——你只管改数据，页面自动更新，不用手动操作 DOM。模板语法非常直觉：双大括号 {{ }}——把数据插到 HTML 里 v-bind（简写 :）——把数据绑定到 HTML 属性上 v-on（简写 @）——绑定事件 v-model——表单双向绑定：改表单会更新数据，改数据会更新表单 v-if / v-show——条件渲染，控制显示或隐藏 v-for——循环渲染列表

html

<div id="app">
<!-- 文本插值 -->
<h1>{{ message }}</h1>

<!-- 属性绑定 -->
<a v-bind:href="url">链接</a>
<img :src="imageUrl" :alt="imageAlt">

<!-- 事件绑定 -->
<button v-on:click="handleClick">点击</button>
<button @click="handleClick">简写</button>

<!-- 双向绑定 -->
<input v-model="inputValue">
<p>你输入了：{{ inputValue }}</p>

<!-- 条件渲染 -->
<p v-if="isLogin">欢迎回来！</p>
<p v-else>请先登录</p>

<!-- 列表渲染 -->
<ul>
    <li v-for="(item, index) in items" :key="index">
        {{ index }} - {{ item }}
    </li>
</ul>
</div>

<script>
const app = Vue.createApp({
data() {
    return {
        message: 'Hello Vue!',
        url: 'https://vuejs.org',
        imageUrl: 'logo.png',
        imageAlt: 'Vue Logo',
        inputValue: '',
        isLogin: false,
        items: ['苹果', '香蕉', '橘子']
    };
},
methods: {
    handleClick() { alert('按钮被点击了！'); }
}
});
app.mount('#app');
</script>

知识测验

第 1/5 题正确 0

Vue 中 v-model 的作用是什么？

组合式 API