Vue.js入门（搭建第一个页面，新手零配置）

Vue.js是前端主流框架，以"易用、灵活、高效"著称，适合开发单页面应用（SPA）。很多新手觉得Vue配置复杂、需要webpack，其实用Vue CDN引入方式，无需搭建复杂环境，5分钟就能写出第一个Vue页面～

今天分享Vue.js的入门步骤------从引入Vue到编写第一个响应式页面，每一步都有完整代码，新手复制到HTML文件就能运行，轻松入门Vue～

一、准备工作：引入Vue（CDN方式，新手推荐）

新建index.html文件，在<head>中引入Vue CDN：

HTML 复制代码

<!-- 引入Vue 2.x（稳定版，新手推荐） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 或引入Vue 3.x（最新版） -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

二、核心1：Vue的基本结构（MVVM思想）

Vue的核心是"数据驱动视图"------修改数据，视图自动更新，无需手动操作DOM。

完整示例：第一个Vue页面

HTML 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue入门示例</title>
    <!-- 引入Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 1. 视图（View）：挂载Vue的DOM元素 -->
    <div id="app">
        <!-- 插值表达式：显示数据 -->
        <h1>{{ message }}</h1>
        <p>姓名：{{ user.name }}</p>
        <p>年龄：{{ user.age }}</p>
        <!-- 指令：v-bind绑定属性 -->
        <a v-bind:href="url">点击跳转到Vue官网</a>
        <!-- 指令：v-on绑定事件 -->
        <button v-on:click="changeMessage">修改消息</button>
    </div>

    <script>
        // 2. 视图模型（ViewModel）：Vue实例
        new Vue({
            el: '#app',  // 挂载到id为app的DOM元素
            data: {      // 数据（Model）
                message: "Hello Vue! 新手也能轻松入门～",
                user: {
                    name: "张三",
                    age: 20
                },
                url: "https://cn.vuejs.org/"
            },
            methods: {   // 方法：处理事件
                changeMessage() {
                    // 修改数据，视图自动更新
                    this.message = "Vue真的太简单了！";
                    this.user.age += 1; // 年龄+1
                }
            }
        });
    </script>
</body>
</html>

代码说明：

挂载元素（el） ：Vue实例接管#app元素内的所有内容；
数据（data）：存储页面需要展示的数据，是响应式的；
插值表达式（{{}}）：将数据渲染到视图中；
指令：
- v-bind:href：绑定a标签的href属性（可简写为:href）；
- v-on:click：绑定点击事件（可简写为@click）；
方法（methods）：定义事件处理函数，修改data中的数据。

三、核心2：常用指令（新手必懂）

指令是Vue的特殊属性，以v-开头，用于操作DOM，新手先掌握5个常用指令：

1. v-text/v-html（渲染文本）

HTML 复制代码

<div id="app">
    <p v-text="message"></p>  <!-- 等价于{{ message }}，不解析HTML -->
    <p v-html="htmlContent"></p>  <!-- 解析HTML内容 -->
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: "Hello Vue",
        htmlContent: "<h2>这是HTML内容</h2>"
    }
});
</script>

2. v-if/v-else（条件渲染）

HTML 复制代码

<div id="app">
    <p v-if="score >= 60">及格</p>
    <p v-else>不及格</p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        score: 85
    }
});
</script>

3. v-for（列表渲染）

HTML 复制代码

<div id="app">
    <ul>
        <!-- 遍历数组，item是元素，index是索引 -->
        <li v-for="(item, index) in fruits" :key="index">
            {{ index+1 }}. {{ item }}
        </li>
    </ul>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        fruits: ["苹果", "香蕉", "橙子"]
    }
});
</script>

💡 注意：v-for必须加:key（唯一标识，避免渲染错误）。

4. v-model（双向数据绑定）

HTML 复制代码

<div id="app">
    <!-- 输入框值变化，message自动更新；反之亦然 -->
    <input type="text" v-model="message">
    <p>你输入的内容：{{ message }}</p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: ""
    }
});
</script>

四、运行页面

将上述代码保存为index.html，用浏览器打开，即可看到效果：

点击"修改消息"按钮，页面文字和年龄自动更新；
输入框输入内容，下方实时显示；
列表渲染出水果数据。

五、新手避坑指南

挂载元素：Vue实例的el必须指向页面中存在的DOM元素（如#app）；
插值表达式：不能写在HTML属性中（用v-bind）；
方法中的this：methods里的函数，用this访问data中的数据（不要用箭头函数）；
v-for和v-if：不要同时用在同一个元素上（性能问题）；
响应式数据：直接给对象/数组添加新属性，视图不会更新（需用Vue.set）。

最后

Vue的核心是"响应式"和"指令"，新手先掌握CDN引入方式，熟悉data、methods、常用指令的用法，后续再学习Vue CLI、组件、路由等进阶内容。

可以尝试自己写一个"待办事项"页面（用v-for渲染、v-model绑定输入框、v-on绑定添加/删除事件），巩固知识点。