初学者的VUE指南3

>本教程提供了对vue.js的基本理解，适用于VUE 3（在本示例中使用）和更早的版本。 我们将介绍构建VUE应用程序的关键方面，包括：

• >使用VUE CLI创建VUE应用程序。
• 用v-for>。
渲染列表
• >用v-if>，v-else-if和v-else。
>使用Dynamic CSS使用
• >指令。 :class处理用户输入和事件。
• >使用方法和计算属性。
• 使用
>。
• v-bind
密钥概念：

vue cli设置：

vue cli精简项目创建，简化配置并允许自定义的功能选择。
• > >列表渲染（
）：
• 有效地呈现动态列表，用唯一的键优化DOM性能（使用属性）。> v-for有条件渲染：:key>使用
>，
• 和。 v-if双向数据绑定（v-else-if）：v-else对于处理用户输入并提供实时UI反馈至关重要
• >计算的属性：执行数据转换和计算，而无需直接修改原始数据，增强了反应性。 v-model>> Dynamic CSS（
）：有条件地使用基于组件状态的CSS类，启用动态样式。
• >用Vue Cli构建应用程序：
>
• vue CLI简化了项目设置。 让我们安装它： :class （或者，使用
。）

创建一个新项目：

>选择“手动选择功能”，仅为本教程选择babel。 选择VUE 3，然后选择将配置放入专用文件中。 不要保存预设。

<code class="language-bash">npm i -g @vue/cli</code>

图1：VUE CLI欢迎屏幕yarn global add @vue/cli

<code class="language-bash">vue create your-project-name</code>

图2：使用VUE CLI

配置VUE项目

图3：在Vue Cli

中选择VUE版本

这会创建一个项目结构（见图4）。从删除

，然后从

>。

中删除其引用

图4：我们的vue 3项目结构

>应用程序设置：

>

>用以下内容替换App.vue>的内容：

>

<code class="language-bash">npm i -g @vue/cli</code>

这设置了一个简单的标题。 以下各节将逐步建立在此基础上。 （进一步的代码片段将在后续部分中提供，逐步构建。）>

列表渲染：

tasks中的data()> App.vue >

的数组：

<code class="language-bash">vue create your-project-name</code>

v-for使用

渲染列表：

<code class="language-vue"><template>
  <h1>{{ title }}</h1>
</template>

</code>

>

:key

属性对于性能至关重要。

>

图5：使用V-For指令

在VUE中列表渲染。 （其余部分将继续以这种增量样式继续，为每个功能提供代码段和说明 - 条件渲染，用户输入，方法，事件，计算属性，属性，属性绑定和动态CSS - 类似于原始输入，但由于长度而改进的格式和更清晰的解释，在这里包括所有剩余代码，可以使用原始响应中的GIST链接来访问每个步骤的完整代码。） 🎜>

以上是初学者的VUE指南3的详细内容。更多信息请关注PHP中文网其他相关文章！