Vue详细入门（语法【一】）

今天滴学习目标！！！

Vue
- 1. 什么是Vue.js
- 2. Vue是怎么使用的嘞
- 3. MVVM是什么嘞？
- 4. Vue有哪些指令
- - 1. v-bind
  - 2.v-model
  - 3.v-if 和 v-else
  - 4. v-for
  - 5. v-show
  - 6. v-on

咱们先了解一下什么是Vue，Vue是怎么使用的嘞，Vue有哪些指令，它的核心语法有哪些？我们就一一来解答吧 (^-^)

Vue

1. 什么是Vue.js

‌‌ Vue.js是一个用于构建用户界面的‌JavaScript框架‌，它基于标准的‌HTML、‌CSS和‌JavaScript，提供了一种声明式的、基于组件的编程模型，帮助开发者高效地开发用户界面，无论是简单还是复杂的界面。‌

一、基本定义
Vue.js基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue.js都能够胜任。

二、主要特性
声明式渲染：Vue.js采用声明式渲染，使得开发者可以专注于创建用户界面，而无需关注如何更新DOM。Vue基于标准HTML拓展了一套模板语法，使开发者可以声明式地描述最终输出的HTML和JavaScript状态之间的关系。

响应式系统：Vue.js具有内置的响应式系统，它会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM，从而确保应用程序始终与底层数据保持同步。

组件化设计：Vue.js提倡组件化设计，允许开发者将应用程序分解成更小的、可重用的组件，从而提高代码的可维护性和可扩展性。Vue.js的单文件组件会将一个组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在同一个文件里，这是Vue.js的标志性功能。

虚拟DOM：Vue.js使用虚拟DOM来跟踪用户界面的变化。当数据发生更改时，Vue.js会比较虚拟DOM与实际DOM，并只更新必要的元素，从而优化性能。

三、应用场景
交互式Web应用程序：Vue.js可以构建交互式Web应用程序，例如单页应用程序（SPA）和渐进式Web应用程序（PWA）。
复杂单页面应用程序：Vue.js适用于开发需要即时更新用户界面的复杂单页面应用程序。
可重用组件库：Vue.js允许开发者创建可重用组件库，以提高开发效率和代码维护性。

四、生态系统
Vue.js拥有一个丰富的生态系统，其中包括许多工具、库和扩展，以满足各种开发需求。这些工具、库和扩展可以进一步提升Vue.js的开发效率和用户体验。

综上所述，Vue.js是一款功能强大且易于使用的JavaScript框架，适用于构建各种用户界面。它的声明式渲染、响应式系统、组件化设计和虚拟DOM等特性使得开发者能够高效地开发高质量的Web应用程序。

2. Vue是怎么使用的嘞

Vue.js的使用方法主要围绕其MVVM（Model-View-ViewModel）架构和组件化思想进行。以下是一个基本的Vue.js使用流程：

安装和初始化Vue项目：
· 首先，需要安装Vue CLI（命令行界面）工具，它可以帮助你快速创建和管理Vue项目。
· 使用Vue CLI创建一个新的Vue项目，选择所需的配置选项。
· 进入项目目录，启动开发服务器，访问并编辑你的应用。
创建Vue组件：
· Vue.js鼓励使用组件化的方式来构建应用。组件是Vue实例，可以包含自己的HTML模板、JavaScript逻辑和CSS样式。
· 在Vue项目的src/components目录下创建Vue组件文件，每个组件文件通常包含<template>、<script>和<style>三个部分。
编写组件模板和逻辑：
· 在<template>部分中编写HTML模板，使用Vue的模板语法来描述HTML结构。
· 在<script>部分中编写JavaScript逻辑，包括数据定义、方法、计算属性等。
· 在<style>部分中编写CSS样式，可以使用scoped属性来确保样式只作用于当前组件。
使用Vue Router添加路由：
· 对于单页面应用（SPA），Vue Router是Vue.js的官方路由管理器。
· 在主Vue实例中使用Vue Router来定义路由规则，并在组件中使用<router-link>和<router-view>来导航和显示不同的页面视图。
数据绑定和事件处理：
· Vue.js提供了双向数据绑定机制，可以使用v-model指令在表单元素上创建双向数据绑定。
· 使用v-bind指令进行属性绑定，使用v-on指令进行事件监听和处理。
构建和部署：
· 当应用开发完成并准备好部署时，使用Vue CLI的构建命令来创建生产版本的应用。
· 这将生成一个包含所有必要文件的dist文件夹，可以将其部署到服务器上。
使用Vue的API：
· Vue.js提供了丰富的API来支持应用开发，包括选项式API和组合式API。
· 选项式API更加符合面向对象的编程风格，而组合式API则更加灵活和适合复杂的应用场景。
调试和测试：
· 在开发过程中，可以使用Vue开发者工具来调试和检查Vue应用的状态和组件。
· 编写单元测试来确保代码的质量和稳定性。

总之，Vue.js的使用方法涉及多个方面，包括项目初始化、组件创建、模板编写、路由管理、数据绑定和事件处理、构建部署等。通过学习和实践这些基本流程和方法，你可以逐步掌握Vue.js并开发出高质量的Web应用。

3. MVVM是什么嘞？

在前面Vue是怎么使用的嘞的问题当中我们是不是提到了MVVM，那这个MVVM是什么嘞？那我来给大家解答一下吧！

在前端开发中，MVVM 架构通常通过框架或库来实现，比如 Vue.js、React + Redux（虽然 Redux 更接近 MVC 中的 Controller 部分，但可以与 React 结合形成类似 MVVM 的结构）、Angular 等。这里，我将以 Vue.js 为例，展示如何在 HBuilder 中使用 MVVM 架构。

安装 Vue.js
首先，你需要在项目中引入 Vue.js。你可以通过 CDN、npm 或 yarn 来安装它。由于 HBuilder 支持直接创建 Vue 项目，这里假设你已经通过 HBuilder 创建了一个 Vue 项目。
创建 Model
在 Vue.js 中，Model 通常是通过 Vuex（状态管理库）或组件的 data 属性来实现的。为了简单起见，我们将使用组件的 data 属性。

// 在一个 Vue 组件中  
data() {  return {  person: {  name: 'John Doe',  age: 30  }  };  
}

创建 ViewModel
在 Vue.js 中，ViewModel 是通过 Vue 实例本身来实现的。Vue 实例包含了数据（Model）、模板（View）以及用于处理用户交互和业务逻辑的方法。

// 在一个 Vue 组件中  
export default {  data() {  return {  person: {  name: 'John Doe',  age: 30  }  };  },  methods: {  updateName(newName) {  this.person.name = newName;  },  updateAge(newAge) {  this.person.age = newAge;  }  }  
};

创建 View
在 Vue.js 中，View 是通过模板语法来实现的，它允许你将数据绑定到 HTML 元素上。

<!-- 在一个 Vue 组件的模板中 -->  
<div>  <input v-model="person.name" placeholder="Name" />  <input v-model.number="person.age" placeholder="Age" type="number" />  
</div>

将 ViewModel 绑定到 View
在 Vue.js 中，这一步是自动完成的，因为 Vue 实例本身就是 ViewModel，并且模板语法允许你直接绑定数据到 HTML 元素上。
在 HBuilder 中运行项目
1. 打开 HBuilder。
2. 创建一个新的 Vue 项目（如果还没有的话）。
3. 将上述代码添加到你的 Vue 组件中。
4. 运行项目，你应该能够在浏览器中看到一个简单的界面，允许你输入和更新一个人的名字和年龄。

注意：虽然这个示例很简单，但它展示了 MVVM 架构的核心思想：将 Model（数据）与 View（用户界面）分离，并通过 ViewModel（Vue 实例）来管理它们之间的交互。在实际项目中，你可能会使用 Vuex 来管理更复杂的状态，或者使用 Vue Router 来实现路由功能。

4. Vue有哪些指令

Vue.js 提供了一系列指令（Directives），这些指令带有 v- 前缀，用于在模板中提供响应式的行为。以下是一些常用的 Vue 指令及其简单的 HTML 代码示例：

1. v-bind

v-bind：用于动态绑定一个或多个特性，或一个组件 prop 到一个表达式。

thml
<div id="app">：这是Vue应用将要挂载的根元素。Vue实例将控制这个元素及其子元素。

<img v-bind:src="imageSrc">：这是一个图片元素，它使用了Vue的v-bind指令来动态绑定src属性到Vue实例的imageSrc数据属性上。

Vue
const HelloVueApp = {…}：这是Vue应用的定义。它包含了一个data函数，该函数返回一个对象，该对象定义了应用的数据属性。

Vue.createApp(HelloVueApp).mount(‘#app’)：这行代码创建了一个新的Vue应用实例，并将它挂载到ID为app的DOM元素上。
在这里插入图片描述

2.v-model

v-model：在表单控件元素上创建双向数据绑定。

html
<div id="app">：这是Vue应用的根元素。Vue实例将控制这个元素及其内部的所有内容。

<input type="text" v-model="message">：这是一个文本输入框，它使用了Vue的v-model指令。v-model创建了一个双向数据绑定，意味着输入框的值将与Vue实例中的message数据属性保持同步。当用户在输入框中输入文本时，message属性的值会自动更新以反映输入的内容。

<p>{{ message }}</p>：这是一个段落元素，它使用了Vue的插值语法{{ }}来显示message数据属性的值。当message的值改变时（例如，用户通过输入框更新它），段落中显示的文本也会相应更新。

Vue
const HelloVueApp = {…}：这是Vue应用的定义。它包含了一个data函数，该函数返回一个对象，该对象定义了应用的数据属性。在这个例子中，有一个名为message的数据属性，它被初始化为字符串’Hello Vue!!'。

Vue.createApp(HelloVueApp).mount(‘#app’)：这行代码创建了一个新的Vue应用实例，并将它挂载到ID为app的DOM元素上。这意味着Vue将接管这个元素及其内部的所有内容，并根据Vue实例中的数据动态更新它们。
在这里插入图片描述

3.v-if 和 v-else

v-if：根据表达式的真假值条件渲染元素。
v-else：表示 v-if 或 v-else-if 条件都不满足时的备选内容

html
<div id="app" class="demo">：这是Vue应用的根元素，它有一个ID（app）和一个类（demo）。Vue实例将控制这个元素及其内部的所有内容。

<p v-if="showMessage">Hello Vue!</p>：这是一个段落元素，它使用了Vue的v-if指令。v-if指令用于根据表达式的真假值来条件性地渲染元素。在这个例子中，如果Vue实例中的showMessage数据属性为true，则这个段落会被渲染到DOM中，并显示文本“Hello Vue!”。

<p v-else>Goodbye Vue!</p>：这是另一个段落元素，它使用了v-else指令。v-else指令必须紧跟在v-if或v-else-if元素之后，并且它们共享相同的条件。如果v-if的条件不满足（即showMessage为false），则v-else包裹的内容会被渲染。在这个例子中，如果showMessage为false，则显示文本“Goodbye Vue!”。

Vue
const HelloVueApp = {…}：这是Vue应用的定义。它包含了一个data函数，该函数返回一个对象，该对象定义了应用的数据属性。在这个例子中，有一个名为showMessage的数据属性，它被初始化为true。

Vue.createApp(HelloVueApp).mount(‘#app’)：这行代码创建了一个新的Vue应用实例，并将它挂载到ID为app的DOM元素上。这意味着Vue将接管这个元素及其内部的所有内容，并根据Vue实例中的数据动态更新它们。

这是v-if的视图
在这里插入图片描述

4. v-for

v-for：基于源数据多次渲染元素或模板块。

html
<div id="app" class="demo">：这是Vue应用的根元素，它有一个ID（app）和一个类（demo）。Vue实例将控制这个元素及其内部的所有内容。

<ul>：这是一个无序列表元素，它将包含由Vue通过v-for指令动态生成的列表项。

<li v-for="item in items" :key="item.id">：这是一个列表项元素，它使用了Vue的v-for指令来循环遍历items数组。对于数组中的每个元素（这里命名为item），都会生成一个<li>元素。:key="item.id"是一个绑定，它为每个列表项提供了一个唯一的键值，这是在使用v-for时推荐的做法，可以帮助Vue更有效地识别和更新列表项。

{{ item.text }}：这是Vue的插值语法，用于显示item对象的text属性值。

Vue
const HelloVueApp = {…}：这是Vue应用的定义。它包含了一个data函数，该函数返回一个对象，该对象定义了应用的数据属性。在这个例子中，有一个名为items的数据属性，它是一个包含三个对象的数组，每个对象都有一个id和一个text属性。

5. v-show

v-show：根据表达式的真假值条件渲染元素，但切换的是元素的 CSS display 属性。

html
<div id="app" class="demo">：这是Vue应用的根元素，它有一个ID（app）和一个类（demo）。Vue实例将控制这个元素及其内部的所有内容。

<button v-on:click="showMessage = !showMessage">显示/隐藏</button>：这是一个按钮元素，它使用了Vue的v-on:click指令（或简写为@click）来监听点击事件。当按钮被点击时，它会执行一个表达式，该表达式将
showMessage数据属性的值取反（如果原来是true，则变为false；如果原来是false，则变为true）。

<p v-show="showMessage">Hello Vue!</p>：这是一个段落元素，它使用了Vue的v-show指令。v-show指令根据表达式的真假值来决定是否显示元素。在这个例子中，如果Vue实例中的showMessage数据属性为true，则段落会显示；如果为false，则段落会被隐藏（但仍会保留在DOM中，只是不可见）。

Vue
const HelloVueApp = {…}：这是Vue应用的定义。它创建了一个包含应用数据的对象。

data()函数：这个函数返回一个对象，该对象定义了应用的数据属性。在这个例子中，有一个名为showMessage的数据属性，它被初始化为true。这意味着段落文本在初始加载时是可见的。

这是显示的视图
在这里插入图片描述

这是隐藏的视图
在这里插入图片描述

6. v-on

v-on：用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

html
<div id="app" class="demo">：这是Vue应用的根元素，它有一个ID（app）和一个类（demo）。Vue实例将控制这个元素及其内部的所有内容。

<div id="lightDiv">：这是一个包含图片的容器元素，它有一个ID（lightDiv），但在这个例子中，这个ID并没有特别的用途，因为Vue的控制是通过根元素#app来实现的。

<img v-show="lightOn" src="src/components/曜.jpg">：这是一个图片元素，它使用了Vue的v-show指令。v-show指令根据表达式的真假值来决定是否显示元素。在这个例子中，如果Vue实例中的lightOn数据属性为true，则图片会显示；如果为false，则图片会被隐藏（但仍会保留在DOM中，只是不可见）。

<button v-on:click="lightOn = !lightOn">开/关</button>：这是一个按钮元素，它使用了Vue的v-on:click指令（或简写为@click）来监听点击事件。当按钮被点击时，它会执行一个表达式，该表达式将lightOn数据属性的值取反（如果原来是true，则变为false；如果原来是false，则变为true）。这样，每次点击按钮都会切换图片的显示状态。

Vue
const app = Vue.createApp({…})：这是Vue应用的定义。它创建了一个新的Vue应用实例。

data()函数：这个函数返回一个对象，该对象定义了应用的数据属性。在这个例子中，有一个名为lightOn的数据属性，它被初始化为false。这意味着图片在初始加载时是被隐藏的。

app.mount(‘#app’)：这行代码将Vue应用实例挂载到ID为app的DOM元素上。这意味着Vue将接管这个元素及其内部的所有内容，并根据Vue实例中的数据动态更新它们。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title><script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>
<style>
#app {border: dashed black 1px;display: inline-block;padding-bottom: 10px;
}#app > button {display: block;margin: auto;
}#lightDiv {position: relative;width: 150px;height: 150px;
}#lightDiv > img {position: relative;width: 100%;height: 100%;
}#lightDiv > div {position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border-radius: 50%;background-color: yellow;
}
</style></head><body><div id="app" class="demo"><div id="lightDiv"><img v-show="lightOn" src="src/components/曜.jpg"></div><button v-on:click=" lightOn =! lightOn ">开/关</button></div><script>const app = Vue.createApp({data() {return {lightOn: false}}})app.mount('#app')</script><!-- <script type="module" src="/src/main.js"></script> --></body>
</html>