初识Vue.js

初识Vue.js

一.何谓Vue？

Vue是一种流行的JavaScript框架，用于构建用户界面。它是一种渐进式框架，可以逐步应用到现有项目中，也可以用于构建全面的单页应用程序。

1.Vue的特点

1.声明式渲染：Vue使用基于HTML的模板语法，将数据和DOM进行绑定，使开发者能够以声明方式描述应用程序的状态和界面，而不是直接操作DOM。
响应式数据绑定：Vue使用双向绑定的方式，将数据模型与视图进行自动同步。当模型发生改变时，视图会自动更新；反之亦然。

2.组件化开发：Vue将用户界面抽象为独立的可复用组件，每个组件包含了自己的逻辑和模板。组件可以嵌套和组合，使得代码结构更清晰、易于维护和重用。

3.虚拟DOM：Vue使用虚拟DOM来提高性能。它通过在内存中构建虚拟DOM树，然后将其与实际的DOM进行比较，只更新需要改变的部分，以减少DOM操作的次数。

4.插件系统：Vue提供了丰富的插件系统，可以扩展其核心功能。开发者可以使用插件来添加新的功能、库或工具。

Vue的生态系统非常活跃，有大量的第三方库和工具可以与之配合使用，如Vue Router用于进行路由管理，Vuex用于进行状态管理，Vue CLI用于快速搭建Vue项目等等。

总的来说，Vue是一种简洁、灵活且易于学习和使用的前端框架，非常适合构建现代化的Web应用程序。

二.Vue的引入

当我们要使用别人已经设计好的框架时，那么首先要设置相应的运行环境和引入数据之类的，不过Vue的引入还是比较简单的。

1.网络路径或者本地引入

通过 CDN 使用 Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

本地资源导入

<script src="./path/to/vue.js"></script>

2.使用Vue文档搭建服务器引入

在cmd控制台 > npm create vue@latest
配置相应的环境，也一样的可以使用

3.使用Vite文档开发服务器

在cmd控制台 >npm create vite@latest
同上，在使用Vite搭建项目时选择使用Vue框架即可

三.Vue的基本语法

1.插值表达式

Vue框架中的插值表达式使用双花括号 {{}} 来表示。插值表达式可以在模板中动态地显示Vue实例的数据。

<div id="app">
		<h1>{{counter}}</h1>
		<h1>{{msg}}</h1>
		<p>{{counter>18?"成年人":"未成年"}}</p>
		<p>{{msg&&"牛皮"}}</p>
		<p>{{fn(100)}}</p>
		<p>{{counter+90}}</p>
		<p>{{arr[0]}}</p>
	</div>
	<div>
		{{msg}}
	</div>
	<script>

		Vue.createApp({
			data() {
				return {
					arr: [1, 2, 3],
					counter: 0,
					msg: "hello",
					fn: (arg) => { return arg + 90 }
				}
			}
		}).mount('#app');
	</script>

只需要记主一点就是双花括号 {{}} 可以填入任意的表达式

2.基础指令

1.v-html指令

在Vue中，v-html是一种指令，用于将数据绑定到HTML内容中。它允许你在模板中动态地插入HTML代码。

<div v-html="htmlContent"></div>

在Vue实例中，你可以定义一个名为"htmlContent"的数据属性，并将其绑定到模板中的v-html指令。当数据属性的值是包含HTML代码的字符串时，v-html指令会将这段HTML代码渲染到模板中的元素中。

需要注意的是，v-html指令会将字符串中的HTML代码直接渲染到模板中，这样可能会有安全风险。因此，只有当你能够信任这段HTML代码的来源时，才应该使用v-html指令。避免将来自用户输入或不可信任的源的HTML代码直接传递给v-html指令，可以使用其他安全措施来过滤或转义HTML代码。

底层原理大致是：
当遇到带有v-html指令的元素时，Vue会创建一个虚拟DOM节点，并将指令的值作为节点的innerHTML属性。然后，Vue会将这个虚拟DOM节点插入到父节点中的相应位置。

2.v-text指令

v-text是Vue中的指令之一，它用于将数据表达式的值插入到元素的文本内容中。

<p v-text="message"></p>

其中，message是Vue实例中的一个数据属性。当Vue渲染模板时，它会将message的值插入到p元素的文本内容中。

v-text指令和插值语法{{ }}的功能类似，但有一些区别。具体来说，v-text指令只会更新元素的文本内容，而不会影响元素内部的HTML结构。而插值语法则会将数据表达式的值作为HTML解析，并替换元素的文本内容和HTML结构。

需要注意的是，v-text指令会覆盖元素原本的文本内容，而不是在原内容的基础上追加。如果需要在元素的文本内容中追加数据表达式的值，可以使用插值语法或者v-html指令。

3.v-pre指令

在Vue中，v-pre是一种特殊的指令，用于跳过Vue编译器对当前元素及其子元素的编译过程。使用v-pre指令可以提高编译性能，特别是对于那些静态内容较多的元素。

当Vue遇到一个带有v-pre指令的元素时，它会将该元素以及该元素的所有子元素视为原始HTML内容，不会对其进行解析或编译。这意味着其中的任何Vue模板语法或指令都不会生效。

4.v-cloak指令

在Vue中，v-cloak是一种特殊的指令，用于解决在初始化Vue实例时由于网络延迟或其他原因导致页面加载慢时，用户可能会在页面上看到Vue模板语法的问题。

使用v-cloak指令可以防止在Vue实例未完全编译和渲染完成之前，显示Vue模板语法的原始文本。当Vue实例加载并完成编译后，v-cloak指令会自动从元素上移除，从而显示Vue实例正确渲染的内容。

5.v-bind指令

在Vue中，v-bind 是一种用于属性绑定的指令，它可以将Vue实例的数据绑定到HTML元素的属性上。
1.缩写形式：使用冒号 : 表示 v-bind 的缩写，后面跟一个表达式，将其值绑定到属性上。例如：

<div id="app">
  <img :src="imageUrl" alt="Image">
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  }
})

app.mount('#app')
</script>

该指令也对标签的style属性进行绑定

6.事件绑定

1.通过v-on指令绑定事件：

<button v-on:click="handleClick">点击</button>

2.在Vue 3中，你也可以使用缩写形式@来绑定事件：

<button @click="handleClick">点击</button>

3.使用事件修饰符： Vue 3中的事件修饰符与Vue 2相同，可以用来处理事件的特定行为。例如，.prevent修饰符可以阻止默认的表单提交行为：

<form @submit.prevent="handleSubmit">
  <!-- 表单内容 -->
</form>

4.动态事件绑定： 在Vue 3中，可以通过在事件名称前使用方括号，来动态绑定事件：

<button @[eventName]="handleEvent">点击</button>

7.样式事件的绑定

1.对象语法：可以通过绑定一个对象来动态设置元素的样式。对象的属性名是要应用的样式名称，属性值是样式的值，可以是一个变量或表达式。例如：

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello Vue 3</div>

2.数组语法：可以通过绑定一个数组来动态设置元素的样式。数组的元素可以是对象、数组或字符串，它们将会被合并为一个样式对象。例如：

<div :style="[baseStyles, { color: textColor }, computedStyles]">Hello Vue 3</div>

3.字符串语法：可以通过绑定一个字符串来直接设置元素的样式。字符串可以是一个变量或表达式，它的值应该是符合CSS规则的样式字符串。例如：

<div :style="`color: ${textColor}; font-size: ${fontSize}px`">Hello Vue 3</div>