VUE基础的一些实战总结

🙂博主：冰海恋雨.

🙂文章核心：VUE基础的一些实战总结

首先推荐观看VUE官方文档

目录

创建一个 Vue 应用

要创建一个 Vue 应用，你需要按照以下步骤操作：

步骤 1：安装 Node.js 和 npm

确保你的计算机上已经安装了 Node.js。你可以在 Node.js 官网 上下载并安装它。安装完成后，npm（Node.js 包管理器）也会随之安装。

步骤 2：安装 Vue CLI

打开终端（命令行工具）并运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

这会全局安装 Vue CLI 工具，以便你可以在任何位置使用它。

步骤 3：创建 Vue 项目

在命令行中进入你想要创建项目的文件夹，并运行以下命令来创建一个新的 Vue 项目：

vue create my-vue-app

这里的 my-vue-app 是你的项目名称，你可以根据自己的喜好来命名。

步骤 4：启动开发服务器

进入新创建的项目文件夹：

cd my-vue-app

然后运行以下命令启动开发服务器：

npm run serve

步骤 5：访问应用程序

在浏览器中打开 http://localhost:8080/ 或者你终端中显示的类似地址，这是 Vue 开发服务器默认的访问地址。你将能够看到正在运行的 Vue 应用程序。

步骤 6：编辑 Vue 应用

现在，你可以在 src 文件夹下的 App.vue 文件中编写你的 Vue 应用。你也可以创建新的组件，并在 App.vue 中引入它们。

步骤 7：构建和部署

当你完成了应用的开发，并想要部署到生产环境时，可以运行以下命令进行构建：

npm run build

这将在 dist 文件夹中生成用于生产的构建文件。

以上是创建并运行一个基本的 Vue 应用程序的步骤。Vue CLI 提供了许多选项，例如选择不同的构建工具、添加插件等。在创建项目时，CLI 会提供一些选项，你可以根据自己的需求进行选择。

vue构建脚手架详情可见：vue手动搭建脚手架（保姆式教案）

模板语法

在 Vue.js 中，模板语法用于将数据绑定到 HTML 中，使你能够动态地渲染页面内容。以下是一些常用的 Vue 模板语法示例以及它们的用法：

1. 插值

使用双大括号 {{}} 进行数据插值，将数据显示在 HTML 元素中：

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

在 Vue 实例中，message 是一个数据属性，它会动态地渲染到 <p> 元素中。

2. 指令

Vue 提供了一系列指令，用于操作 DOM、绑定事件、条件渲染等操作。例如，v-bind 用于动态地绑定 HTML 特性，v-on 用于监听事件：

<button v-on:click="incrementCounter">Click me</button>
<p v-bind:title="tooltipText">Hover over me</p>

这里 v-on:click 监听按钮的点击事件，v-bind:title 动态绑定了元素的 title 属性。

3. 计算属性

Vue 允许你在模板中使用计算属性。这些属性依赖于 Vue 实例的数据，并且根据计算方法动态返回值：

<p>{{ reversedMessage }}</p>

// 在 Vue 实例中
data: {
  message: 'Hello Vue!'
},
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('');
  }
}

reversedMessage 是一个计算属性，根据 message 数据属性返回相应的反转字符串。

4. 条件渲染

<img v-bind:src="imageURL">

使用 v-if 和 v-else 来根据条件决定是否渲染特定的元素：

<div v-if="isVisible">
  <p>Visible content</p>
</div>
<div v-else>
  <p>Alternate content</p>
</div>

5. 列表渲染

使用 v-for 可以遍历数组或对象，并根据其中的项来渲染列表：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

这里的 items 是一个数组，在模板中使用 v-for 渲染每个 item。

6. 绑定属性

使用 v-bind 绑定元素属性：

<img v-bind:src="imageURL">

imageURL 是一个数据属性，使用 v-bind:src 将其值绑定到 <img> 元素的 src 属性上。

以上是 Vue 模板语法的基本用法示例。你可以根据需要使用这些语法来构建动态、交互式的 Vue 应用程序。

详细指令可见：vue的常用指令_vue常见指令

响应式基础

Vue.js 的核心特性之一就是响应式（Reactivity）。这意味着当 Vue 实例的数据发生变化时，相关的视图将会自动更新。

响应式数据

在 Vue 中，你可以在 data 对象中定义数据属性。这些属性在被 Vue 实例化后变成了响应式的。当数据发生变化时，相关的 DOM 将自动更新。

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });

在这个例子中，message 是一个响应式的数据属性。当 message 的值发生改变时，任何使用 message 的视图都将自动更新。

视图与数据绑定

Vue 使用双大括号 {{ }} 进行数据插值，将数据绑定到视图中：

<div id="app"> <p>{{ message }}</p> </div>

在这个例子中，{{ message }} 将显示 Hello Vue!，并且当 message 的值改变时，这个段落的内容也会自动更新。

改变数据

你可以通过 Vue 实例中的方法来改变数据，这样做会触发视图的更新。例如，你可以在 Vue 实例中定义一个方法，并在需要的时候调用它来改变数据：

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { changeMessage: function () { this.message = 'Updated message!'; } } });

在上面的例子中，changeMessage 方法会将 message 的值改变为 'Updated message!'。当这个方法被调用时，相关的视图也会相应地更新。

响应式的原理

Vue 使用了一种响应式的数据变化追踪机制，当数据被改变时，Vue 能够自动检测到变化，并通知相关的视图进行更新。这种机制使得开发者不需要手动操作 DOM，而只需要关注数据的状态变化。

通过使用 Vue 提供的响应式系统，你可以更容易地构建动态、交互式的应用程序，而不必担心手动管理 DOM 更新。

这就是 Vue.js 中响应式的基础原理和使用方法。  

vue的优缺点：

优点：

1. 组件化开发，提升效率，方便复用，便于协同开发
2. 单页面路由
3. 易于结合其他的第三方库
4. 丰富的api方法
5. 轻量高效,虚拟DOM
6. MVVM，数据驱动视图
7. 轻量级的框架

缺点：

1. 缺少高阶教程和文档
2. 生态环境不如angular和react
3. 社区不大
4. 不支持ES6的浏览器无法使用，如ie10
5. 报错不明显，适合单人开发或者中小型项目
6. 不利于SEO优化

总结：

1. 组件化开发：Vue.js鼓励使用组件化开发，将页面拆分成多个独立的组件，以便提高代码复用性和维护性。
   
2. 数据驱动：Vue.js采用数据驱动的方式管理应用的状态和UI，通过响应式的数据绑定机制实现页面与数据的自动同步。
   
3. 指令和事件：掌握常用的指令如v-if、v-for、v-bind等，以及事件处理方法，能够更好地操作DOM元素。
   
4. 路由管理：使用Vue Router进行路由管理，实现单页面应用（SPA）的路由跳转和状态管理。
   
5. HTTP请求：学习使用Vue Resource或者axios等库进行HTTP请求，与后端进行数据交互。
   
6. 状态管理：了解Vuex状态管理模式，对于大型应用或者组件通信复杂的情况，可以更好地管理应用的状态。
   
7. 响应式设计：深入理解Vue.js的响应式设计原理，能帮助你更好地编写高效的Vue组件。