vue介绍以及基本指令

目录

一、vue是什么

 二、使用vue的准备工作

三、创建vue项目

四、vue插值表达式

五、vue基本指令

六、key的作用 

七、v-model 

九、指令修饰符

---

一、vue是什么

Vue是一种用于构建用户界面的JavaScript框架。它可以帮助开发人员构建单页应用程序和复杂的前端应用程序。Vue具有简单易用的语法，能够实时更新视图和响应用户的交互操作。它也提供了丰富的生态系统，包括插件和组件库，使开发过程更加高效和灵活。Vue可以与其他库和框架集成使用，也可以作为单独的前端框架使用。

 二、使用vue的准备工作

在创建Vue项目之前，需要下载以下几个东西：

1. Node.js：Vue.js 是基于 Node.js 开发的，因此需要先安装 Node.js。可以在官网上下载对应操作系统的安装包，并按照安装程序的提示进行安装。

2. npm：npm 是 Node.js 的包管理器，通过 npm 可以安装 Vue.js 以及其他依赖包。安装好 Node.js 后，npm 将会自动安装。

3. Vue CLI：Vue CLI 是一个脚手架工具，可以帮助我们快速创建 Vue 项目。通过 npm 可以全局安装 Vue CLI。例如，在命令行中运行以下命令：npm i -g @vue/cli

以上就是创建 Vue 项目前需要下载的东西。安装好这些工具后，就可以开始创建 Vue 项目了。

三、创建vue项目

创建新的 Vue 项目：在命令提示符或终端中，使用 vue create my-project 命令来创建一个新的 Vue 项目，my-project 是您项目的名称，可以按照需求进行命名。

选择预设：在创建项目时，Vue CLI 会要求您选择预设。您可以选择手动配置项目或者使用默认的预设配置。

安装依赖项：创建项目后，进入项目目录并运行以下命令来安装项目依赖：

cd my-project
npm install

运行项目：依赖安装完成后，运行以下命令来启动项目开发服务器：

npm run serve

这将启动一个本地开发服务器，并在浏览器中打开项目。您可以在代码编辑器中修改项目文件，并实时在浏览器中查看更改。

四、vue插值表达式

Vue.js中的插值表达式是一种特殊的语法，用于将数据动态绑定到HTML模板中。

插值表达式使用双大括号{{}}将数据包裹起来，例如：

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

在上面的例子中，message是一个变量，它会在Vue实例的作用域中查找并替换成对应的值。

插值表达式还可以使用JavaScript表达式，例如：

<p>{{ message.toUpperCase() }}</p>

上面的例子中，message变量的值会被转换成大写字母。

使用插值表达式，可以将动态的数据渲染到HTML模板中，实现数据的绑定和更新。

五、vue基本指令

1. v-bind：用于将数据绑定到HTML元素的属性上，例如 v-bind:src="image"可以将image变量的值绑定到src属性上。

2. v-model：用于实现双向数据绑定，将表单元素的值与数据模型进行绑定，例如 v-model="message"可以将message变量与输入框的值进行绑定。

3. v-if：用于根据条件判断是否渲染元素，例如 v-if="show"可以根据show变量的值决定是否显示元素。

4. v-for：用于循环渲染元素列表，例如 v-for="item in items"可以循环渲染items数组中的每个元素。

5. v-on：用于监听DOM事件，例如 v-on:click="handleClick"可以在点击事件发生时调用handleClick方法。

6. v-show：与v-if类似，用于根据条件判断是否显示元素，但是通过v-show只是控制元素的显示与隐藏，不会重新渲染DOM。

7. v-text：用于替代元素的textContent，将表达式的值直接显示在元素中。

8. v-html：用于将HTML代码渲染到元素中，将表达式的值作为HTML解析并显示。

以上是一些常见的Vue.js基本指令，通过使用这些指令可以实现动态数据绑定和控制DOM元素的行为。

六、key的作用 

在Vue中，key是用来标识每个节点的特殊属性。它主要用于Vue的虚拟DOM算法中的优化，确保在更新DOM时，每个节点都能被准确地识别和定位。

当Vue重新渲染一个列表时，它会根据每个节点的key的值来决定如何复用、重新排序或删除现有DOM元素。如果不提供key，Vue会使用默认的算法来尽量准确地复用已有的节点，但这可能会导致不必要的DOM操作，性能也会受到影响。

通过为每个列表项提供唯一的key属性，可以告诉Vue哪些元素是稳定的，哪些是新增的或被删除的。这样，Vue就可以对列表进行高效的更新，减少不必要的DOM操作，提升性能。

另外，key属性还可以用于Vue的其他功能，如v-for指令中的索引使用，以及一些过渡动画效果的切换时的标识等。总的来说，key属性在Vue中起到了非常重要的作用，能够帮助我们更好地管理和优化DOM更新。

七、v-model 

v-model是Vue.js中一个常用的指令，用于实现双向数据绑定。

在Vue.js中，使用v-model指令可以将表单元素的值与Vue实例中的数据属性进行绑定，当表单元素的值发生变化时，Vue实例中的数据也会相应地更新；同样地，当Vue实例中的数据属性发生变化时，表单元素的值也会相应地更新。

v-model指令可以用于各种表单元素，如输入框、复选框、单选按钮、下拉菜单等。

在使用v-model指令时，可以通过指定数据属性的名称来实现数据的双向绑定。例如，通过v-model="message"来绑定一个输入框的值到Vue实例中的message属性上。

示例代码如下：

<template><div><input v-model="message" type="text"><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''}}
}
</script>

在上述代码中，一个输入框通过v-model指令绑定到Vue实例中的message属性上。当输入框的值发生变化时，message属性也会相应地更新，并且在页面上显示出来。

需要注意的是，对于复选框和单选按钮来说，v-model绑定的是被选中状态的值，而不是输入框的值。例如，可以通过v-model="checked"来绑定一个复选框的选中状态到Vue实例中的checked属性上。

示例代码如下：

<template><div><input v-model="checked" type="checkbox"><p>{{ checked }}</p></div>
</template><script>
export default {data() {return {checked: false}}
}
</script>

在上述代码中，一个复选框通过v-model指令绑定到Vue实例中的checked属性上。当复选框的选中状态发生变化时，checked属性也会相应地更新，并且在页面上显示出来。

总的来说，v-model指令提供了一种简便的方式来实现表单元素与数据属性之间的双向绑定，从而使得数据的变化能够自动反映到页面上，同时也能够方便地获取用户的输入。

九、指令修饰符

指令修饰符（Directive Modifiers）是Vue中用来修饰指令的特殊标记，它们以点号（.）的形式添加在指令后面。指令修饰符用于改变指令行为的方式，例如改变事件修饰符的工作方式，或者改变v-model指令的行为。

一些常用的指令修饰符包括：

• .prevent：阻止默认事件的发生。
• .stop：阻止事件冒泡。
• .capture：使用事件捕获而不是事件冒泡。
• .once：只触发一次事件。
• .passive：指示浏览器该事件的监听器不会调用 preventDefault()。
• .self：只当事件在指定的元素本身触发时才触发回调。
• .sync：实现一个双向绑定，会将父组件中的数据同步到子组件中。
• .number：将输入值转换为数字类型。
• .lazy：将输入事件改为在失去焦点或按下回车键时触发。

可以通过在指令后面添加修饰符来改变指令的行为。例如，<input v-on:click.prevent="doSomething">表示在点击事件发生时阻止默认的行为。