vue的基本用法

首先推荐阅读Vue3的官方文档

安装vue

CDN方式引入Vue库

<script src="https://unpkg.com/vue@next"></script>

引入本地的vue js文件

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

npm安装

下载

> npm init vue@latest
> cd <your-project-name>
> npm install
> npm run dev
> npm run build

vue的基础知识

示例：使用全局构建版本​

这里有一个使用全局构建版本的例子：使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
	<title>Document</title>
</head>
<body>
	<div id="app">
		<!-- 将vue中的数据填充到页面上 -->
		<div>姓名：{{ name }}</div>
	</div>
	<script>
        // 第一步：创建一个组件对象
		var lemon = {
		data() {
		return {
			name: "lemon",
			age: 18
		}
	}
	}
		// 第二步：创建一个vue实例（对象）
		var app = Vue.createApp(lemon)
		// 第三步：将vue对象挂载到页面的根元素中
		app.mount('#app')
	</script>
</body>
</html>

Vue.createApp(lemon) 是一个创建 Vue 应用程序实例的工厂函数调用，其中 lemon 是一个对象，包含了 Vue 应用程序的各种选项，例如数据、方法、计算属性、生命周期钩子等。该代码片段是要使用 Vue.js 创建一个 Vue 应用程序实例。

mount 方法是 Vue 实例的一个方法，用于将 Vue 应用程序实例挂载到指定 DOM 元素上。一旦 Vue 实例被挂载到 DOM 上，它就开始追踪 DOM 的状态，并通过 Vue 数据绑定系统来响应其数据的变化。例如，在上面的示例中，Vue 实例的数据变化会自动更新页面上绑定的元素内容。

示例：单文件组件

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式

<!-- content in APP.vue -->
<script>
export default {
  data() {
    return {
		name: "lemon",
		age: 19,
		desc: "<h1>这里是一个重点操作</h1>",
		isShow: false
	}
  }
}
</script>

<template>
 <div id="app">
  <!-- 将vue中的数据填充到页面上 -->
	<div>姓名：{{ name }}</div>
</div>
</template>
// content in main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

<!-- content in index.html -->
<!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>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

接下来的示例说明皆使用单文件组件的方式

模板语法

文本插值

最基本的数据绑定形式是文本插值，它使用的双大括号

<template>
	<div>
		<h1>{{ title }}</h1>
		<!-- {{}}等同于v-text -->
		<h1 v-text="title"></h1>
		<p>{{ message }}</p>
	</div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js',
      message: 'Hello, World!'
    }
  }
}
</script>
<style>
h1 {
  color: red;
}
</style>

在 Vue.js 中，{{ }} 和 v-text 都可以用来将数据插值到模板中。

原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令

<template>
	<div>
		<h1>{{ title }}</h1>
		<p>{{ message }}</p>
		<p v-html="content"></p>
	</div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue.js',
      message: 'Hello, World!',
	  content: '<b>Hello, World!</b> <i>Welcome to Vue.js!</i>'
    }
  }
}
</script>
<style>
h1 {
  color: red;
}
</style>

填充原始数据

在 Vue.js 中，v-pre 是一种特殊的指令，它可以让 Vue.js 跳过一个元素及其所有子节点的编译过程，即将该元素和其子节点的内容直接作为静态内容渲染到页面上。

<template>
	<div>
		<h1>{{ title }}</h1>
		<!-- {{  }}等同于v-text -->
		<h1 v-text="title"></h1>
		<p>{{ message }}</p>
		<p v-html="content"></p>
		<p v-pre>{{ content }}</p>
	</div>
</template>

属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind

<template>
<div>
    <div><a :href="url">{{ linkText }}</a></div>
    <div v-bind:id="dynamicId">456</div>
    <div :style="{ color: isActive ? 'red' : 'black' }">This text is {{ isActive ? 'active' : 'inactive' }}.</div>
    <div v-bind="attrObject">Hello, world!</div>
</div>
</template>

<script>
export default {
  data() {
    return {
	  url: 'https://www.example.com',
      linkText: 'Go to Example',
      dynamicId:'num',
      isActive: false,
      attrObject: {
        id: 'my-div',
        class: 'container',
        style: {
          color: 'red',
          fontSize: '18px'
        }
      }
    }
  }
}
</script>
<style>
h1 {
  color: red;
}
#num {
  color: green;
}
</style>

事件绑定

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

  1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

  2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

<template>
  <div>
    <button v-on:click="count++">Clicked {{ count }} times</button>
    <button @click="count++">Clicked {{ count }} times</button>
    <button v-on:click="decrement">Decrement</button>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: "shibuyu",
    };
  },

  methods: {
    decrement() {
      this.count--;
    },
    greet(event) {
      // 方法中的 `this` 指向当前活跃的组件实例
      alert(`Hello ${this.name}!`);
      // `event` 是 DOM 原生事件
      if (event) {
        alert(event.target.tagName);
      }
    },
  },
};
</script>

这个组件定义了三个按钮，分别用于增加、减少和显示计数器的数值。其中，第一个按钮使用的是 v-on:click 这个指令来绑定内联事件处理器，它会在点击按钮时将计数器加一并输出对应的提示语句；第二个按钮使用的是 @click 这个简写指令，它和 v-on:click 是等效的；第三个按钮使用的是方法事件处理器，当点击这个按钮时，Vue 会调用 decrement 方法来将计数器减一。这个组件还新增了一个名为 greet 的方法，用于在点击按钮时展示一个弹窗，里面包含问候语和当前用户的名字。同时，greet 方法还接受一个事件参数，它代表触发当前事件的 DOM 元素。

在内联处理器中调用方法

methods: {
  say(message) {
    alert(message)
  }
}
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

在内联事件处理器中访问事件参数

在内联事件处理器中，我们可以通过 $event 来获取触发当前事件的事件对象

<template>
  <button v-on:click="logEvent($event)">Click me</button>
</template>

<script>
export default {
  methods: {
    logEvent(event) {
      console.log(event);
    }
  }
};
</script>

vue的双向数据绑定

Vue 中的双向数据绑定是指，当组件中的数据发生变化时，这些变化会自动反映到对应的 HTML 元素上；同时，当用户在 HTML 元素中输入值时，这些值会自动同步到组件的数据中。这种双向的数据绑定方式使得我们可以更加方便地处理表单和用户交互。

在 Vue 中实现双向数据绑定有多种方式，其中最常用的是使用 v-model 这个指令。例如，我们可以如下定义一个文本输入框，并将它绑定到组件实例中的 message 变量上：

<template>
  <div>
    <input type="text" v-model="message" />
    <p>You typed: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

在这个例子中，我们通过 v-model 将 <input> 元素与 message 变量进行了双向数据绑定。当用户在输入框中输入文字时，message 的值会自动更新为输入框中的值；反之，当我们修改 message 的值时，输入框中的值也会随之更新。

需要注意的是，v-model 指令只适用于一些特定的元素类型，例如 <input>、<textarea> 和 <select> 等。同时，我们还可以通过 v-model 设置一些修饰符，以扩展双向数据绑定的功能，例如去除输入字符串的首尾空格、限制输入的最大值等。

  • 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；

  • <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；

  • <select> 会绑定 value property 并侦听 change 事件。

  1. 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件。例如，我们可以这样定义一个包含文本输入框和文本域的组件，并将它们分别绑定到变量 message 和 description 上：

<template>
  <div>
    <input type="text" v-model="message" />
    <textarea v-model="description"></textarea>
    <p>You typed: {{ message }}</p>
    <p>You described: {{ description }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      description: "",
    };
  },
};
</script>

在这个例子中，我们通过 v-model 将 <input> 和 <textarea> 元素与 message 和 description 变量进行了双向数据绑定。当用户在输入框中输入文字时，message 的值会自动更新为输入框中的值；反之，当我们修改 message 的值时，输入框中的值也会随之更新。同样的，当用户在文本域中输入文字时，description 的值会自动更新为文本域中的值；反之，当我们修改 description 的值时，文本域中的值也会随之更新。

  1. <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件。例如，我们可以这样定义一个包含复选框和单选框的组件，并将它们分别绑定到变量 checked 和 selected 上：

<template>
  <div>
    <input type="checkbox" v-model="checked" />
    <input type="radio" value="A" v-model="selected" /> A
    <input type="radio" value="B" v-model="selected" /> B
    <input type="radio" value="C" v-model="selected" /> C
    <p>Checked: {{ checked }}</p>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      selected: "",
    };
  },
};
</script>

在这个例子中，我们通过 v-model 将复选框和单选框元素与 checked 和 selected 变量进行了双向数据绑定。当用户选中复选框时，checked 的值会自动更新为 true；反之，当用户取消选中复选框时，checked 的值会自动更新为 false。当用户选择某个单选框时，selected 的值会自动更新为选中项的 value 值；反之，当我们修改 selected 的值时，对应的单选框也会自动选中。

  1. <select> 会绑定 value property 并侦听 change 事件。例如，我们可以这样定义一个包含下拉框的组件，并将它绑定到变量 selected 上：

<template>
  <div>
    <select v-model="selected">
      <option value="">Choose an option</option>
      <option value="A">Option A</option>
      <option value="B">Option B</option>
      <option value="C">Option C</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "",
    };
  },
};
</script>

在这个例子中，我们通过 v-model 将 <select> 元素与 selected 变量进行了双向数据绑定。当用户选中某个选项时，selected 的值会自动更新为选中项的 value 值；反之，当我们修改 selected 的值时，下拉框也会自动选中对应的选项。

分支语句

if语句

<template>
  <div>
    <p v-if="type === 'A'">这是类型为 A 的内容</p>
    <p v-else-if="type === 'B'">这是类型为 B 的内容</p>
    <p v-else-if="type === 'C'">这是类型为 C 的内容</p>
    <p v-else>这是其他类型的内容</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type : 'E',
    };
  },
};
</script>

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else 指令用于在 v-if 使用的条件不成立时执行的语句块

v-else-if 指令用于在多个条件语句中执行的语句块

v-show语句

<template>
  <div>
    <p v-show="isShow">这是一个控制显示/隐藏的元素</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow : true,
    };
  },
};
</script>

v-show 指令用于根据指定的条件来控制元素的显示和隐藏。当条件为 true 时，该元素会被显示；否则，元素会被隐藏但仍然存在于 DOM 中。与 v-if 不同的是，v-show 并不会销毁和重建元素，因此使用 v-show 可以提高性能

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

遍历语句

v-for 是一种循环语句，用于遍历数组或对象，并在 Vue 模板中渲染出相应的元素。它的语法如下：

<div v-for="item in items">
  {{ item.text }}
</div>

或者，你也可以为索引指定别名 (如果用在对象，则是键值)：

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

案例如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <ol>
      <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
      object: {
        name: "Tom",
        age: 18,
        email: "tom@test.com",
      },
    };
  },
};
</script>