vue.js阶段总结

一.vue.js入门

1.1 vue.js是什么

Vue.js是一款开源的JavaScript框架，主要用于构建用户界面和单页应用。它的核心库主要关注视图层，采用自底向上增量开发的设计。此外，它也提供了一套声明式的、组件化的编程模型和响应性的渲染功能

1.2搭建Vue.js开发环境

1. 安装Node.js：Vue.js是基于Node.js的，因此首先需要在你的计算机上安装Node.js。你可以从Node.js官方网站下载并安装适合你操作系统的版本。

2. 安装Vue CLI：Vue CLI是Vue.js的命令行工具，用于快速创建和管理Vue项目。可以通过npm（Node包管理器）来安装Vue CLI。在命令行中输入以下命令：

   npm install -g @vue/cli
   

   这将全局安装Vue CLI。

3. 创建Vue项目：使用Vue CLI创建一个Vue项目。在命令行中输入以下命令，将my-project替换为你的项目名称：

   vue create my-project
   

   这将创建一个名为my-project的新目录，并在其中初始化一个Vue项目。

4. 进入项目目录：进入刚刚创建的Vue项目目录：

   cd my-project
   

5. 启动开发服务器：运行以下命令启动Vue项目的本地开发服务器：

   npm run serve
   

   这将启动一个开发服务器，并在浏览器中打开你的Vue应用程序。默认情况下，它将在http://localhost:8080上运行。

   现在你已经成功搭建了Vue.js的开发环境，可以开始编写和运行Vue应用程序了

二.基础特性

2.1模版语法

以下是一些常用的模板语法：

1. 插值表达式：使用双大括号{{ }}来显示Vue实例中的数据。例如：

   <p>{{ message }}</p>
   

   这将在页面上显示message的值。

2. 属性绑定：使用v-bind指令来绑定HTML属性。例如：

   <img v-bind:src="imageSrc" alt="图片">
   

   这将把imageSrc的值作为图片的源地址。

3. 事件绑定：使用v-on指令来监听DOM事件。例如：

   <button v-on:click="handleClick">点击我</button>
   

   这将在用户点击按钮时调用handleClick方法。

4. 条件渲染：使用v-if和v-else指令来根据条件显示或隐藏元素。例如：

   <div v-if="isVisible">这是一个可见的元素</div>
   <div v-else>这是一个不可见的元素</div>
   

   这将根据isVisible的值来决定哪个元素被显示。

5. 循环渲染：使用v-for指令来遍历数组或对象，并渲染多个元素。例如：

   <ul>
     <li v-for="item in items">{{ item }}</li>
   </ul>
   

   这将遍历items数组，并为每个元素创建一个列表项。

   以上是Vue.js模板语法的一些基本用法，还有很多其他高级特性和指令可以用于更复杂的应用场景。

 2.2计算属性与监听属性

Vue.js中的计算属性与监听属性都是对数据进行处理的重要工具，但它们各有特点和使用场景。

计算属性定义在computed选项中，适用于计算性的属性，会根据其他响应式数据的变化来进行计算。例如，我们有一个全名fullName，需要显示其首字母大写的形式，可以使用计算属性来实现：

computed: {
  fullNameUppercase: function () {
    return this.fullName.split(' ').map(function (word) {
      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
    }).join(' ');
  }
}

在这里，fullNameUppercase是一个计算属性，它会根据fullName的变化自动更新。这个属性的getter函数会在每次访问时被调用，但如果fullName没有发生变化，那么上一次的计算结果会被缓存，不会重复执行getter函数。这种方式不仅简化了代码，还提高了性能。任何复杂的逻辑，你都应当使用计算属性。

另一方面，监听器适用于更复杂的场景，需要对数据变化做出特定的响应，无论是同步还是异步的操作都可以在监听器中实现。例如，我们需要在用户修改全名后，将新的全名发送到服务器，可以使用watch来监听fullName的变化：

watch: {
  fullName: function (newValue, oldValue) {
    // 发送请求到服务器，更新全名
  }
}

在这里，当fullName发生变化时，watch中的方法会被调用。相比于计算属性，监听器可以进行深度监听，监听对象的变化。

2.3 class与styls的增强绑定

在Vue.js中，可以使用class与styles的增强绑定来动态地绑定类名和样式。具体来说，可以使用v-bind:class指令来绑定一个或多个类名，使用v-bind:style指令来绑定内联样式。

以下是一些示例：

1. 绑定类名：

   <template>
     <div v-bind:class="{ active: isActive }">Hello World</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isActive: true
       }
     }
   }
   </script>
   

   在上面的代码中，我们使用了v-bind:class指令来绑定一个对象，该对象包含一个名为active的属性，其值为isActive数据属性的值。当isActive为true时，类名为active的类将被添加到元素上。

2. 绑定内联样式：

   <template>
     <div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         textColor: 'red',
         fontSize: 20
       }
     }
   }
   </script>
   

   在上面的代码中，我们使用了v-bind:style指令来绑定一个对象，该对象包含两个属性：color和fontSize。这两个属性的值分别来自textColor和fontSize数据属性。注意，由于fontSize是一个数字，我们需要将其转换为字符串并添加单位（例如“px”）才能正确显示。

三. 内置指令

3.1列表渲染指令v-for

v-for是Vue.js中的一个指令，用于在模板中渲染一个列表。它的基本语法如下：

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

<script>
export default {
  data() {
    return {
      items: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

在这个例子中，我们使用v-for指令遍历items数组，并为每个元素创建一个<li>标签。:key属性用于给每个列表项添加一个唯一的标识符，以便Vue.js能够跟踪它们的变化并优化性能。

3.2条件渲染指令

Vue.js提供了多种条件渲染指令，用于根据不同的条件显示或隐藏元素。以下是一些常用的条件渲染指令：

1. v-if：用于根据条件显示或隐藏元素。如果条件为真，则显示元素；否则，不显示元素。例如：

   <template>
     <div>
       <p v-if="isVisible">Hello World</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isVisible: true
       }
     }
   }
   </script>
   

   在上面的代码中，当isVisible为true时，<p>标签将被显示；否则，它将被隐藏。

2. v-else：用于与v-if一起使用，表示当条件为假时显示的元素。例如：

   <template>
     <div>
       <p v-if="isVisible">Hello World</p>
       <p v-else>Goodbye World</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isVisible: false
       }
     }
   }
   </script>
   

   在上面的代码中，由于isVisible为false，因此第二个<p>标签将被显示。

3. v-show：类似于v-if，但不会从DOM中删除元素。它只是通过CSS样式来控制元素的可见性。例如：

   <template>
     <div>
       <p v-show="isVisible">Hello World</p>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isVisible: false
       }
     }
   }
   </script>
   

   在上面的代码中，由于isVisible为false，因此第一个<p>标签将不可见，但它仍然存在于DOM中。

3.3 filters过滤器

Vue.js中的过滤器是一种有用的工具，它允许开发者对即将显示的数据进行进一步的筛选处理并格式化输出。过滤器可以用于常见的文本格式化，例如首字母大写、日期格式等。

在Vue.js中，过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式（从2.1.0+版本开始支持）。

需要注意的是，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。此外，过滤器还可以串联使用，对同一个数据进行多次处理。

对于过滤器的使用方式，有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用，局部注册的过滤器只能在当前组件内部使用。

以下是一个自定义过滤器的例子：

<<!-- 在双花括号中 -->
{{ message | filterName }}

<!-- 在 v-bind 表达式中 -->
v-bind:class="{ active: isActive | filterName }"

四.组件

4.1 组件的使用

Vue.js 组件是用于构建用户界面的可复用的代码块。它们可以帮助你将复杂的 UI 分解成更小、更易于管理的部分。在 Vue.js 中，组件可以分为两种类型：单文件组件（.vue 文件）和多文件组件（包含模板、脚本和样式的文件夹）。

1. 单文件组件（.vue 文件）：

创建一个名为 MyComponent.vue 的文件，然后在其中编写以下内容：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击更改消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '欢迎来到 Vue.js!'
    };
  },
  methods: {
    changeMessage() {
      this.message = '你已经成功更改了消息！';
    }
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

2.多文件组件（包含模板、脚本和样式的文件夹）：

首先，创建一个名为 components 的文件夹，然后在其中创建一个名为 MyComponent.vue 的文件。接下来，编写以下内容：

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">点击更改消息</button>
  </div>
</template>

// MyComponent.js
export default {
  data() {
    return {
      message: '欢迎来到 Vue.js!'
    };
  },
  methods: {
    changeMessage() {
      this.message = '你已经成功更改了消息！';
    }
  }
};

/* MyComponent.scss */
h1 {
  color: #42b983;
}

现在，你可以在其他 Vue.js 项目中使用这个组件。首先，确保你已经安装了 Vue.js，然后在你的主 JavaScript 文件中导入并注册这个组件：

import Vue from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue.component('my-component', MyComponent);

最后，在你的 HTML 文件中使用这个组件：

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

 这样，你就可以在 Vue.js 项目中使用自定义组件了。

4.2 组件中的Props属性

在 Vue.js 中，Props（属性）被用于父组件向子组件传递数据。这是构建可复用组件的关键特性，允许你将特定的数据作为属性传递给子组件。

要实现这一点，你需要首先在子组件中声明你希望接收的 props。这可以通过在 Vue 单文件组件的 props 选项中列出每个 prop 的名称来实现。例如：

export default {
  props: ['foo'],
  setup(props) {
    console.log(props.foo);
  }
}

在上述代码中，我们声明了一个名为 foo 的 prop，并在 setup 函数中使用它。需要注意的是，prop 的类型默认会被视为字符串。如果你希望指定不同的类型，可以使用 String, Number, Boolean, Array, Object, Function, Symbol 等任何一种。

此外，当子组件的 props 属性声明时，你可以使用小驼峰或中划线写法。而当子组件的模板需要使用从父组件传来的变量时，也需要使用对应的小驼峰写法。如果你需要动态地绑定父组件的数据到子组件模板的 props，和绑定 HTML 标签特性一样，可以使用 v-bind 进行绑定。

4.3 组件通信

在 Vue.js 中，组件通信是其核心特性之一，允许不同组件之间进行数据的交互和通信。一般来说，Vue.js 的组件可以有以下几种关系：父子关系、跨代关系（隔代关系）、兄弟关系等。因此，根据不同的关系，Vue.js 提供了多种方式来实现组件之间的通信。

1. 父子组件间通信：这是最常见的一种情况。父组件可以通过 props 向子组件传递数据，子组件通过自定义事件 $emit 将数据传回给父组件。

2. 跨代组件间通信：如果需要实现跨代的通信（例如，祖父组件与孙组件之间），可以使用 provide / inject 或者使用 Vue.observable 方法来创建一个可响应的对象。

3. 兄弟组件间通信：兄弟组件之间的通信可以通过使用事件总线（Event Bus）来实现。你可以创建一个空的 Vue 实例作为中央事件总线，然后在需要通信的两个兄弟组件之间互相引入这个中央事件总线。

4. 任意组件间通信：除了以上的方式之外，你还可以使用 Vuex 状态管理库来进行跨层级、跨组件的全局状态管理。

需要注意的是，尽管 Vue.js 提供了以上多种方式来实现组件间的通信，但在实际开发中，你需要根据实际需求和项目规模来选择最合适的通信方式。对于大型应用来说，可能会需要使用到 Vuex 来进行全局的状态管理；而对于小型应用来说，可能只需要使用到父子组件间的通信就足够了。

五.Vue项目化

5.1 快速构建项目

Vue.js 是一个流行的前端框架，用于构建用户界面。以下是使用 Vue CLI（命令行界面）快速构建项目的步骤：

1. 首先，确保你已经安装了 Node.js 和 npm。如果没有安装，请访问 Node.js 官网（https://nodejs.org/）下载并安装。

2. 打开终端或命令提示符，运行以下命令来全局安装 Vue CLI：

   npm install -g @vue/cli
   

3. 安装完成后，你可以使用 vue create命令来创建一个新的 Vue 项目。运行以下命令并按照提示进行操作：

   vue create my-project
   

4. 其中，my-project 是你的项目名称，可以根据需要自行更改。

5. 在创建过程中，你可以选择预设配置、选择 Babel 预设、选择 CSS 预处理器等选项。根据你的需求进行选择即可。

6. 等待命令执行完成，Vue CLI 将为你创建一个新的项目目录，并在该目录下生成一个基本的 Vue 项目结构。

7. 进入项目目录：

   cd my-project
   

8. 启动开发服务器：

npm run serve

这将启动一个本地开发服务器，并在浏览器中自动打开你的项目页面。默认情况下，它将监听 localhost:8080 端口。

 5.2 插件

在 Vue.js 中，插件被视为一种添加全局功能的工具代码。通过使用 app.use() 方法，可以注册全局组件、指令、资源和属性。插件的使用并不局限于添加全局方法、资源、选项或实例方法，还包括一些其他的扩展功能。

以下是如何在 Vue.js 项目中安装和使用插件的一般步骤：

1.  首先，你需要安装你希望使用的插件。可以使用 npm 或 yarn 进行安装。例如，如果你想要安装 vue-router，你可以在项目的根目录下运行以下命令：

   npm install vue-router
   

   2.安装完成后，你需要在项目的入口文件（通常是 main.js）中导入并使用这个插件。例如，对于上面安装的 vue-router，你可以这样使用：5

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   

 5.3 vue.js配置文件

Vue.js 的配置文件是 vue.config.js，它位于项目的根目录下。该文件用于自定义 Vue CLI 项目的配置选项。

在 vue.config.js 文件中，你可以配置以下选项：

开发服务器配置：可以修改开发服务器的端口号、主机名等选项。例如：

module.exports = {
  devServer: {
    port: 8081, // 设置端口号为 8081
    host: 'localhost', // 设置主机名为 localhost
  },
};

 ​​​​​​构建配置：可以修改打包输出目录、是否生成 Source Map 文件等选项。例如：

module.exports = {
  build: {
    outputDir: 'dist', // 设置打包输出目录为 dist
    publicPath: '/', // 设置公共路径为根目录
    productionSourceMap: false, // 生产环境下不生成 Source Map 文件
  },
};

代理配置：可以配置代理来解决跨域问题。例如：

module.exports = {
  proxy: {
    '/api': {
      target: 'http://localhost:3000', // 目标服务器地址
      changeOrigin: true, // 改变请求头中的 Host 字段为目标服务器地址
      pathRewrite: { '^/api': '' }, // 重写请求路径，将 /api 替换为空字符串
    },
  },
};

插件配置：可以配置一些第三方插件。例如：

module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin(), // 使用自定义插件 MyPlugin
    ],
  },
};

5.4 环境变量和模式

在Vue.js项目中，模式和环境变量是两个非常重要的概念。

首先，让我们来了解一下模式。模式是 Vue CLI 项目中一个重要的概念，它决定了项目如何运行。默认情况下，一个 Vue CLI 项目有三个模式：development（开发）模式，test（测试）模式以及production（生产）模式。其中，development 模式用于 vue-cli-service serve 和 vue-cli-service test，test 模式用于 vue-cli-service test:unit，而 production 模式则用于 vue-cli-service build 和 vue-cli-service test:e2e。

接下来，我们再来看一下环境变量。环境变量可以帮助我们根据不同的环境（比如开发环境、预发布环境以及生产环境等）来设置不同的配置项。在 Vite 中，我们可以在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：import.meta.env.MODE（应用运行的模式），import.meta.env.BASE_URL（部署应用时的基本 URL），import.meta.env.PROD（应用是否运行在生产环境）。此外，我们还可以在项目根目录中创建.env或者.env.xxx的文件来指定环境变量，如.env文件中的环境变量会被所有环境载入，而.env.local文件会在所有环境中被载入但会被git忽略。

5..5 静态资源管理

在Vue.js项目中，静态资源管理是非常重要的一环。静态资源主要包括样式文件、JavaScript文件、图片和字体等文件。

首先，静态资源可以通过两种方式进行处理：第一种方式是在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理，例如assets目录的文件。第二种方式是放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

对于第一种方式，我们需要注意的是，诸如background: url (...) 和 CSS @import 的资源， 都会被解析为一个模块依赖。例如，url (./image.png)会被翻译为require (’./image.png’)。

对于第二种方式，通常建议将静态资源放在 public 目录下，这样在部署应用时可以直接将这些资源复制到输出目录中。这种方式尤其适用于一些不会被修改的静态资源，如图片、字体等。然而，这种方式也有一个需要注意的问题，就是静态资源经常要部署在不同的上下文路径下，如nginx将vue静态资源部署在/static下，此时使用绝对路径可能访问不到引入的资源。因此，对于这种情况，我们需要根据实际情况调整静态资源的引用路径。