Vue 基础简介
Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架，它具有以下特点：
- JS 框架：提供一套完整的工具和规范，助力高效开发。
- 简化 DOM 操作：开发者无需直接编写复杂的 DOM 操作代码，只需关注数据变化。
- 响应式数据驱动：当数据发生变化时，视图会自动更新。
环境准备
首先，通过 <script> 标签导入 Vue.js：
html
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>Vue 实例的两大核心元素
1. el：挂载点
通过 CSS 选择器设置 Vue 实例所管理的 HTML 元素。Vue 实例可以挂载在大部分双标签元素上，但建议不要挂载到 <body> 和 <html> 上。
2. data：数据对象
Vue 中用到的所有数据都定义在 data 对象中。data 中可以存储复杂类型的数据（如数组、对象），在渲染它们时，需遵守 JavaScript 语法。
html
<div id="app">
<p>{{ message }}</p>
</div>
javascript
var app = new Vue({
el: "#app", // id选择器，也可以使用class选择器等
data: {
message: "hello"
}
})Vue 指令详解
指令 (Directives) 是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-text
用于设置标签的纯文本内容（等同于 innerText）。
html
<div id="app">
<p v-text="message"></p>
</div>
javascript
var app = new Vue({
el: "#app",
data: {
message: "hello"
}
})v-html
用于在标签中嵌入 HTML 代码（等同于 innerHTML）。
html
<div id="app">
<!-- 如果是普通文本，效果和 v-text 一样 -->
<!-- <p v-html="message"></p> -->
<!-- 如果是 HTML 字符串，则会被渲染为 HTML 元素 -->
<p v-html="link"></p>
</div>
javascript
var app = new Vue({
el: "#app",
data: {
// message: "hello"
link: '<a href="http://baidu.com">百度</a>'
}
})v-on
用于为元素绑定事件，可以使用简写 @。
html
<div id="app">
<!-- 完整语法 -->
<input type="button" value="事件绑定" v-on:click="handleClick">
<!-- 简写语法 -->
<input type="button" value="事件绑定" @click="handleClick">
</div>
javascript
var app = new Vue({
el: "#app",
methods: {
handleClick: function() {
// 方法体
alert('按钮被点击了！');
}
}
})常见事件
| 事件名 | 说明 | 触发时机 |
|---|---|---|
click |
点击 | 鼠标点击元素时 |
dblclick |
双击 | 鼠标双击元素时 |
mousedown |
鼠标按下 | 在元素上按下鼠标按钮时 |
mouseup |
鼠标松开 | 在元素上松开鼠标按钮时 |
mouseenter |
鼠标进入 | 鼠标进入元素时（不冒泡） |
mouseleave |
鼠标离开 | 鼠标离开元素时（不冒泡） |
mouseover |
鼠标悬停 | 鼠标进入元素或其子元素时（冒泡） |
mouseout |
鼠标移出 | 鼠标移出元素或其子元素时（冒泡） |
mousemove |
鼠标移动 | 鼠标在元素内移动时 |
scroll |
滚动 | 元素滚动条滚动时 |
resize |
窗口调整 | 窗口大小变化时（通常用 window.addEventListener） |
contextmenu |
右键菜单 | 鼠标右键点击时（通常配合 .prevent 阻止默认菜单） |
v-show 与 v-if
两者都用于根据表达式的真假，条件性地显示或隐藏元素，但原理不同。
v-show：通过操作元素的 CSSdisplay样式来控制显示和隐藏。元素始终会被渲染并保留在 DOM 中。v-if：通过操作 DOM 元素来控制显示和隐藏。当条件为假时，元素及其子元素会被完全销毁和移除。
选择建议 ：如果需要在显示与隐藏之间频繁切换 ，推荐使用 v-show（性能开销更小）；如果在运行时条件很少改变 ，则使用 v-if 更合适。
html
<div id="app">
<!-- 使用 v-show -->
<img v-show="isShow" src="示例图片地址1.jpg">
<img v-show="age >= 18" src="示例图片地址2.jpg">
<!-- 使用 v-if -->
<img v-if="isShow" src="示例图片地址1.jpg">
<img v-if="age >= 18" src="示例图片地址2.jpg">
</div>
javascript
var app = new Vue({
el: "#app",
data: {
isShow: true,
age: 17
}
})v-bind
用于动态设置元素的属性（如 src、title、class 等），可以使用简写 :。
html
<div id="app">
<!-- 完整语法 -->
<img v-bind:src="imgSrc">
<!-- 简写语法 -->
<span :title="message">将鼠标悬停在我上面</span>
</div>
javascript
var app = new Vue({
el: "#app",
data: {
imgSrc: "https://example.com/image.jpg",
message: "这是一个动态提示信息"
}
})v-for
用于根据一组数据遍历生成列表结构，语法为 item in items，并支持获取循环索引。
html
<div id="app">
<ul>
<!-- 获取元素和索引 -->
<li v-for="(item, index) in arr">
{{ index + 1 }}. {{ item }}
</li>
</ul>
</div>
javascript
var app = new Vue({
el: "#app",
data: {
arr: ["a", "b", "c"]
}
})v-model
实现表单元素与数据之间的双向数据绑定。当表单控件的值发生变化时，对应的数据也会自动更新，反之亦然。
html
<div id="app">
<input type="text" v-model="message">
<p>你输入的内容是：{{ message }}</p>
</div>
javascript
var app = new Vue({
el: "#app",
data: {
message: "hello"
}
})网络应用：axios
Vue.js 结合网络请求库 axios 可以轻松开发网络应用。
首先导入 axios：
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>GET 请求示例
javascript
axios.get('https://api.example.com/data?key1=value1&key2=value2')
.then(function(response) {
// 成功后的回调函数
console.log('数据获取成功：', response.data);
}, function(err) {
// 失败后的回调函数
console.error('请求失败：', err);
});POST 请求示例
javascript
axios.post('https://api.example.com/data', {
key1: 'value1',
key2: 'value2'
})
.then(function(response) {
// 成功后的回调函数
console.log('数据提交成功：', response.data);
}, function(err) {
// 失败后的回调函数
console.error('提交失败：', err);
});