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.js 中,模板语法用于将数据绑定到 HTML 中,使你能够动态地渲染页面内容。以下是一些常用的 Vue 模板语法示例以及它们的用法:

1. 插值

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

{{ message }}

在 Vue 实例中,message 是一个数据属性,它会动态地渲染到

元素中。

2. 指令

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


Hover over me

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

3. 计算属性

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

{{ reversedMessage }}

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

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

4. 条件渲染

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

Visible content

Alternate content

5. 列表渲染

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

  • {{ item.name }}

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

6. 绑定属性

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


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

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

响应式基础

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

响应式数据

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

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

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

视图与数据绑定

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

{{ message }}

在这个例子中,{{ 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.js,前端,javascript)