【2025最新】Vue.js零基础入门实战指南：你应该学习的核心基础语法

唐叔在学习

已于 2025-04-28 22:18:13 修改

阅读量890

点赞数 28

分类专栏：唐叔学前端文章标签： vue.js 前端 web开发前端实战代码

于 2025-04-28 22:16:54 首次发布

本文链接：https://blog.csdn.net/tang_is_learning/article/details/147596761

版权

唐叔学前端专栏收录该内容

12 篇文章

订阅专栏

作者：唐叔在学习
专栏：唐叔学前端
关键词：#Vue教程 #前端入门 #编程新手 #Web开发 #实战代码

大家好，我是唐叔！今天给各位前端萌新带来一份超详细的Vue.js入门指南。作为当下最火的前端框架之一，Vue以其简洁易用的特性俘获了大批开发者的心。废话不多说，咱们直接上干货！

一、Vue.js基础入门：创建第一个响应式应用

每个Vue应用都是通过创建Vue实例开始的，它是Vue世界的"上帝对象"。

<!DOCTYPE html>
<!-- 完整可运行的Vue基础示例 -->
<html>
<head>
  <title>Vue.js基础示例 | 唐叔的前端教程</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 页面内容保持不变 -->
  <script>
    // 创建一个Vue实例
    new Vue({
      el: '#app',  // 挂载点
      data: {      // 数据对象
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

这里el指定Vue管理的DOM元素，data包含我们需要的所有数据。唐叔提醒：data中的属性是响应式的，改变它们会自动更新视图！

二、Vue模板语法：Vue的DNA

Vue使用基于HTML的模板语法，让你能声明式地将数据渲染进DOM。

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

  <!-- 使用JavaScript表达式 -->
  <p>{{ message.split('').reverse().join('') }}</p>
</div>

完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue基础示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        changeMessage() {
          this.message = '消息已改变!'
        }
      }
    })
  </script>
</body>
</html>

唐叔小贴士：双大括号会把数据解释为普通文本，如果要输出真正的HTML，需要使用v-html指令。

三、Vue核心指令详解：v-if/v-for/v-bind实战

指令是带有v-前缀的特殊属性，唐叔带你看几个最常用的：

1. 条件渲染 v-if

<div v-if="seen">现在你看到我了</div>
<div v-else>你看不到我了</div>

2. 列表渲染 v-for

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

3. 属性绑定 v-bind

<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

4. 事件监听 v-on

<button v-on:click="sayHello">点我</button>
<!-- 简写 -->
<button @click="sayHello">点我</button>

完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue指令示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    .active { color: red; }
  </style>
</head>
<body>
  <div id="app">
    <!-- v-if -->
    <p v-if="show">我会根据show的值显示/隐藏</p>

    <!-- v-for -->
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ index }} - {{ item }}
      </li>
    </ul>

    <!-- v-bind -->
    <a :href="url" :class="{ active: isActive }">链接</a>

    <!-- v-model -->
    <input v-model="inputText">
    <p>输入的内容：{{ inputText }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        show: true,
        list: ['苹果', '香蕉', '橙子'],
        url: 'https://vuejs.org',
        isActive: true,
        inputText: ''
      }
    })
  </script>
</body>
</html>

唐叔划重点：指令是Vue的核心功能，掌握它们就掌握了Vue的半壁江山！

四、Vue计算属性vs侦听器：性能优化指南

1. 计算属性 computed

当需要复杂逻辑计算时，计算属性是你的好朋友：

var app = new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性会缓存结果，只有依赖变化时才会重新计算。

2. 侦听器 watch

当你需要在数据变化时执行异步或开销较大的操作时：

var app = new Vue({
  data: {
    question: '',
    answer: '请先提问'
  },
  watch: {
    question: function(newVal) {
      // 模拟异步请求
      setTimeout(() => {
        this.answer = '你问题的答案是...'
      }, 1000)
    }
  }
})

唐叔经验谈：能用computed实现的优先用computed，watch适合处理副作用操作。

完整代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>计算属性和侦听器</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="firstName" placeholder="姓">
    <input v-model="lastName" placeholder="名">
    <p>全名：{{ fullName }}</p>
    <p>问题：{{ question }}</p>
    <p>答案：{{ answer }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        firstName: '张',
        lastName: '三',
        question: '',
        answer: '请提问'
      },
      computed: {
        fullName() {
          return this.firstName + ' ' + this.lastName
        }
      },
      watch: {
        question(newVal) {
          if (newVal.includes('?')) {
            this.answer = '思考中...'
            setTimeout(() => {
              this.answer = '这是对"' + newVal + '"的回答'
            }, 1000)
          }
        }
      }
    })
  </script>
</body>
</html>

五、Vue.js实战：TodoList应用开发完整教程

来，跟着唐叔写个完整的小例子 – 综合TodoList：

<!DOCTYPE html>
<html>
<head>
  <title>Vue TodoList</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    .done { text-decoration: line-through; }
  </style>
</head>
<body>
  <div id="app">
    <h3>我的待办事项 ({{ remaining }}/{{ todos.length }})</h3>
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="添加新任务"
    >
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.done">
        <span :class="{ done: todo.done }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        newTodo: '',
        todos: [
          { text: '学习Vue', done: false },
          { text: '学习React', done: false }
        ]
      },
      computed: {
        remaining() {
          return this.todos.filter(todo => !todo.done).length
        }
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim()) {
            this.todos.push({
              text: this.newTodo,
              done: false
            })
            this.newTodo = ''
          }
        },
        removeTodo(index) {
          this.todos.splice(index, 1)
        }
      }
    })
  </script>
</body>
</html>