Javascript

Vue教程：新手入门与基础实践指南

本文主要是介绍Vue教程：新手入门与基础实践指南，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文详细介绍了Vue教程，包括Vue的基本概念、特点、安装和使用方法，以及基础语法和组件化开发等内容。同时，文章还涵盖了Vue的事件处理、生命周期管理、路由与状态管理等高级主题，并提供了丰富的示例代码。通过本文，读者可以快速入门并掌握Vue的开发技能。

Vue教程：新手入门与基础实践指南
1. Vue简介

1.1 什么是Vue

Vue.js 是一个用于构建用户界面的渐进式框架。与其他框架不同的是，Vue 采用自底向上的增量开发模式，可以逐步将 Vue 移入现有项目中。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1.2 Vue的特点和优势

Vue 拥有以下特点和优势：

  • 易于入门：Vue 的学习曲线相对平缓，文档详尽且清晰，非常适合初学者。
  • 轻量级：Vue 的核心库只有 20KB 的体积（压缩后的生产环境版本），并且其核心库只需几行简单的 HTML 代码就能开始使用。
  • 双向数据绑定：Vue 提供了双向数据绑定的功能，能够自动同步 DOM 和 JavaScript 之间的数据变化，极大简化了前端开发。
  • 组件化开发：Vue 采用组件化的方式组织代码，使得代码更易于维护和扩展。
  • 插件丰富：Vue 的生态系统中提供了大量各类插件，如路由管理、状态管理等，丰富了应用的构建。

1.3 如何安装和使用Vue

首先，确保你已经安装了 Node.js 环境。接下来，可以通过 npm 或者脚手架工具来安装 Vue。

1.3.1 使用 npm 安装 Vue

通过 npm 安装 Vue，只需执行以下命令：

npm install -g @vue/cli

安装完成后，可以使用 vue create 命令来创建一个新的 Vue 项目：

vue create my-project

1.3.2 使用 CDN 引入 Vue

如果你不想使用 npm，也可以通过 CDN 方式引入 Vue。这只需要在你的 HTML 文件中添加如下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!'
        }
      });
    </script>
  </body>
</html>

此代码展示了如何通过 CDN 引入 Vue，并通过 Vue 实例来绑定一个简单的变量 message。

2. Vue基础语法

2.1 数据绑定与插值

数据绑定是 Vue 的核心特性之一，它允许你在 HTML 模板中直接引用 JavaScript 数据。主要通过双大括号 {{ }} 来实现数据的插值。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
      <p>{{ number }}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello, Vue!',
          number: 123
        }
      });
    </script>
  </body>
</html>

2.2 指令及其用法

Vue 提供了丰富的指令来操作 DOM。这些指令以 v- 开头，常见的有 v-if、v-for、v-bind 等。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="show">显示内容</p>
      <ul>
        <li v-for="item in items">{{ item }}</li>
      </ul>
      <a v-bind:href="url">Vue 文档</a>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          show: true,
          items: ['Vue', 'React', 'Angular'],
          url: 'https://vuejs.org/'
        }
      });
    </script>
  </body>
</html>

2.3 计算属性与方法

计算属性用于基于响应式依赖的计算结果，而方法则用于执行更复杂的逻辑操作。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <p>原始值: {{ number }}</p>
      <p>计算结果: {{ doubleNumber }}</p>
      <button v-on:click="increment">点击 +1</button>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          number: 1
        },
        methods: {
          increment: function () {
            this.number++;
          }
        },
        computed: {
          doubleNumber: function () {
            return this.number * 2;
          }
        }
      });
    </script>
  </body>
</html>
3. Vue组件化开发

3.1 组件的概念与创建

Vue 使用组件来构建可复用的 UI 组件。组件可以通过 Vue.component 注册，也可以通过全局 API Vue.component 或局部 API components 来定义。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>
    <script>
      Vue.component('my-component', {
        template: '<p>This is a custom component.</p>'
      });
      var app = new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>

3.2 父子组件通信

父组件可以通过 props 将数据传递给子组件，而子组件可以通过事件将数据传回给父组件。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <child-component :message="parentMessage"></child-component>
    </div>
    <script>
      Vue.component('child-component', {
        props: ['message'],
        template: '<p>{{ message }}</p>'
      });
      var app = new Vue({
        el: '#app',
        data: {
          parentMessage: 'Hello from parent!'
        }
      });
    </script>
  </body>
</html>

3.3 组件的复用与封装

组件的一个核心特性是可复用性。通过将 UI 分解为独立的、可复用的组件，可以提高开发效率和代码质量。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <my-button></my-button>
      <my-button></my-button>
    </div>
    <script>
      Vue.component('my-button', {
        template: '<button>Click me</button>'
      });
      var app = new Vue({
        el: '#app'
      });
    </script>
  </body>
</html>
4. Vue事件处理与生命周期

4.1 事件处理机制

Vue 中的事件处理与原生的 DOM 事件处理方式类似，使用 v-on 指令来监听 DOM 事件并返回处理函数。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="sayHello">点击我</button>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        methods: {
          sayHello: function () {
            alert('Hello!');
          }
        }
      });
    </script>
  </body>
</html>

4.2 生命周期钩子详解

Vue 提供了一系列生命周期钩子来控制组件的初始化、挂载、更新和销毁等过程。

钩子函数

  • beforeCreate：在实例初始化之前，数据和方法还未绑定。
  • created：实例初始化完成，此时已有方法和属性，但未挂载到 DOM。
  • beforeMount：数据观测 (data observer) 和 event/watcher 事件配置都已完成，但尚未挂载到 DOM。
  • mounted：组件已经被挂载到 DOM 上。
  • beforeUpdate：数据更新之前，但 DOM 还未更新。
  • updated：组件 DOM 更新完成后。
  • beforeDestroy：该组件即将被销毁。
  • destroyed：组件被销毁。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello World'
        },
        beforeCreate: function () {
          console.log('beforeCreate');
        },
        created: function () {
          console.log('created');
        },
        beforeMount: function () {
          console.log('beforeMount');
        },
        mounted: function () {
          console.log('mounted');
        },
        beforeUpdate: function () {
          console.log('beforeUpdate');
        },
        updated: function () {
          console.log('updated');
        },
        beforeDestroy: function () {
          console.log('beforeDestroy');
        },
        destroyed: function () {
          console.log('destroyed');
        }
      });
      setTimeout(() => {
        app.message = 'Hello Vue';
      }, 1000);
      setTimeout(() => {
        app.$destroy();
      }, 2000);
    </script>
  </body>
</html>

4.3 常见生命周期场景

  • 初始化：在 created 钩子中执行初始化操作，比如从服务器获取数据。
  • 数据更新：在 beforeUpdate 和 updated 钩子中处理数据更新后的逻辑。
  • 销毁：在 beforeDestroy 和 destroyed 钩子中清理资源，防止内存泄漏。
5. Vue路由与状态管理

5.1 Vue Router基础

Vue Router 是 Vue.js 官方的路由管理库，允许你在单页应用中根据 URL 路径显示不同的视图。

示范代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue-router@3.0.2"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link>
      </nav>
      <router-view></router-view>
    </div>
    <script>
      const Home = {
        template: '<p>这是首页内容。</p>'
      };
      const About = {
        template: '<p>这是关于页内容。</p>'
      };
      const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About }
      ];
      const router = new VueRouter({
        routes
      });
      var app = new Vue({
        el: '#app',
        router
      });
    </script>
  </body>
</html>

5.2 Vuex状态管理简介

Vuex 是 Vue.js 的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vuex@3.1.0"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ count }}</p>
      <button v-on:click="increment">点击 +1</button>
    </div>
    <script>
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment: state => {
            state.count++;
          }
        }
      });
      var app = new Vue({
        el: '#app',
        store,
        methods: {
          increment: function () {
            this.$store.commit('increment');
          }
        }
      });
    </script>
  </body>
</html>

5.3 简单项目实践

创建一个简单的待办事项列表应用，使用 Vue Router 和 Vuex 进行路由管理和状态管理。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue Todo List</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue-router@3.0.2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vuex@3.1.0"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/todos">待办事项</router-link>
      </nav>
      <router-view></router-view>
    </div>
    <script>
      const Home = {
        template: '<p>这是首页内容。</p>'
      };
      const TodoList = {
        template: '<div><p>{{ count }} 个待办事项</p><button v-on:click="addTodo">添加</button><ul><li v-for="todo in todos">{{ todo }}</li></ul></div>',
        computed: {
          count: function () {
            return this.$store.state.todos.length;
          }
        },
        methods: {
          addTodo: function () {
            this.$store.commit('addTodo', '新待办事项');
          }
        },
        created: function () {
          this.$store.commit('loadTodos');
        }
      };
      const store = new Vuex.Store({
        state: {
          todos: []
        },
        mutations: {
          addTodo: (state, todo) => {
            state.todos.push(todo);
          },
          loadTodos: state => {
            state.todos = ['待办事项1', '待办事项2'];
          }
        }
      });
      const routes = [
        { path: '/', component: Home },
        { path: '/todos', component: TodoList }
      ];
      const router = new VueRouter({
        routes
      });
      var app = new Vue({
        el: '#app',
        router,
        store
      });
    </script>
  </body>
</html>
6. Vue实战案例

6.1 小项目开发流程

开发一个简单的新闻阅读器应用，包括新闻列表展示和新闻详情页。

示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue News Reader</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue-router@3.0.2"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vuex@3.1.0"></script>
  </head>
  <body>
    <div id="app">
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/news">新闻列表</router-link>
      </nav>
      <router-view></router-view>
    </div>
    <script>
      const Home = {
        template: '<p>这是首页内容。</p>'
      };
      const NewsList = {
        template: '<div><ul><li v-for="news in newsList" @click="navigateToDetail(news)">{{ news.title }}</li></ul></div>',
        computed: {
          newsList: function () {
            return this.$store.state.newsList;
          }
        },
        methods: {
          navigateToDetail: function (news) {
            this.$router.push({ name: 'news-detail', params: { id: news.id } });
          }
        },
        created: function () {
          this.$store.commit('loadNewsList');
        }
      };
      const NewsDetail = {
        template: '<div>{{ news.title }}<p>{{ news.content }}</p></div>',
        computed: {
          news: function () {
            return this.$store.getters.getNewsById(this.$route.params.id);
          }
        }
      };
      const store = new Vuex.Store({
        state: {
          newsList: []
        },
        getters: {
          getNewsById: (state) => (id) => {
            return state.newsList.find(news => news.id === id);
          }
        },
        mutations: {
          loadNewsList: state => {
            state.newsList = [
              { id: 1, title: '新闻1', content: '这是新闻1的内容' },
              { id: 2, title: '新闻2', content: '这是新闻2的内容' }
            ];
          }
        }
      });
      const routes = [
        { path: '/', component: Home },
        { path: '/news', component: NewsList },
        { path: '/news/:id', component: NewsDetail, name: 'news-detail' }
      ];
      const router = new VueRouter({
        routes
      });
      var app = new Vue({
        el: '#app',
        router,
        store
      });
    </script>
  </body>
</html>

6.2 常见问题与解决方案

  • 组件通信问题：可以使用 Vuex 或者 prop 和 event 机制来处理组件之间的通信。
  • 性能优化：利用 Vue 提供的 v-if、v-show 等指令来控制渲染，使用 key 属性来优化列表渲染性能。
  • 路由切换问题：确保每个路由组件都有明确的生命周期钩子来处理页面初始化和销毁。

6.3 进一步学习资源推荐

  • 慕课网：提供大量的 Vue.js 相关课程，适合不同水平的开发者学习。
  • Vue.js 官方文档：详细介绍了 Vue 的各个功能和使用方法，是入门和进阶的最佳参考资料。
  • Vue.js 2.x 实战教程：涵盖 Vue.js 2.x 的核心概念和高级特性，适合有一定基础的开发者深入学习。
  • Vue.js 2.x 项目实战：通过实际项目来练习 Vue.js 技能，提高应用开发能力。

以上就是 Vue.js 新手入门与基础实践的全部内容，希望能帮助你快速上手并掌握 Vue 的开发技能。

这篇关于Vue教程：新手入门与基础实践指南的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航