vue入门

最新推荐文章于 2024-11-01 09:28:39 发布

没有质量

最新推荐文章于 2024-11-01 09:28:39 发布

阅读量51

点赞数

文章标签： npm

本文链接：https://blog.csdn.net/weixin_74792796/article/details/134997901

版权

首先推荐观看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 元素中：

<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. 条件渲染
使用 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.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>