JAVA-Web端学习3 Vue
人们总是习惯性地抱着自己的固有思维，从而难以理解。
Vue
Vue概念
Vue是一款用于构建用户界面的渐进式的JavaScript框架。之所称之为渐进式，是因为Vue 可灵活集成到现有项目中，从小型功能模块逐步扩展为完整应用。你可以仅用其核心库增强静态 HTML，也可结合 Vue Router、Vuex 等构建全栈应用。
Vue基本使用
将一段message加大加粗显示出来
准备
引入Vue模块（官方提供）
创建Vue程序的应用实例，控制视图的元素
准备元素（div），被Vue控制
数据驱动试图
准备数据
通过插值表达式渲染界面
<div id="app"> //div元素 使用ID进行标识
<h1> {{message}}</h1>
<h2> {{count}}</h2>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp ({
data(){ //定义数据返回方法
return { //返回一个json格式数据对象
message: "Hello message",
count: 10,
}
}
}).mount("#app"); //使用ID指定vue控制区域
</script>
效果如下：
Vue基本指令
指令：HTML标签上带有v-前缀的特殊属性，不同的指令含有不同的含义，可以实现不同的功能。
常用指令如下：
v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind 为HTML标签绑定属性值，如设置href或者css样式等
v-if/v-else/v-else-if 条件性地渲染某元素，判定为true时渲染否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-for
基本语法
<!-- 遍历数组 -->
<div v-for="(item, index) in items" :key="index">
{{ item }}
</div>
<!-- 遍历对象 -->
<div v-for="(value, key, index) in object" :key="key">
{{ key }}: {{ value }}
</div>
示例代码：
<div id="app">
<li v-for="(item,index) in list":key="index"> //遍历数组
{{index}} - {{item}}
</li>
<li v-for="(value,key) in node":key="key"> //遍历对象
{{key}} - {{value}}
</li>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp ({
data(){
return {
list : ["aaa","bbb","ccc"],
node : {
name : "koko",
id : 25,
score:32.8,
}
}
}
}).mount("#app");
</script>
效果如下
v-if
基本格式
<div v-if="condition">内容</div>
通过判断condition是否为true从而是否执行内容
接下来结合一个v-for+v-if来详解
<div id="app">
<li v-for="(item,index) in list":key="index"> //遍历列表元素并且针对每一个元素进行判断
<d v-if="item=='Y'">
<h3>这是Y</h3>
</d>
<d v-else-if="item=='N'">
<h3>这是N</h3>
</d>
<d v-else>
<h3>这啥也不是</h3>
</d>
</li>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp ({
data(){
return {
list : ["Y","Y","N","N","B"],
}
}
}).mount("#app");
</script>
效果如下：
v-bind
v-bind 是 Vue.js 中用于动态绑定 HTML 元素属性的指令，它允许我们将元素的属性与 Vue 实例中的数据进行绑定。
基本格式如下
<!-- 完整语法 -->
<div v-bind:属性="变量">内容</div>
<!-- 缩写语法 -->
<div :属性="变量">内容</div>
示例代码：
<template>
<div>
<!-- 绑定图片源 -->
<img :src="imageUrl" :alt="imageAlt">
<!-- 绑定按钮状态 -->
<button :disabled="isButtonDisabled">点击</button>
<!-- 动态 class -->
<div :class="activeClass">动态样式</div>
<!-- 动态样式 -->
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
动态样式文本
</p>
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'example.jpg',
imageAlt: '示例图片',
isButtonDisabled: true,
activeClass: 'active',
textColor: 'red',
fontSize: 16
}
}
}
</script>
使用 v-bind 绑定元素和直接使用元素的主要区别在于数据绑定的灵活性和动态性。
当使用 v-bind（通常简写为 :）时，可以将 HTML 元素的属性动态绑定到 Vue 实例的数据上。这意味着属性值不是固定的，而是会随着数据的变化而实时更新。
v-show
v-show与v-if类似，都是通过判断条件来显示是否展示内容
<div v-show="condition">内容</div>
二者区别在于：v-show 不会销毁或重建 DOM 元素，而是通过修改元素的 CSS display 样式属性来控制显示和隐藏。当条件为 true 时，元素正常显示；当条件为 false 时，元素设置 display: none 隐藏，但仍保留在 DOM 中。
例如选项卡切换，频繁地切换选项卡使用v-show来展示
<div v-show="activeTab === 'tab1'">选项卡1内容</div>
<div v-show="activeTab === 'tab2'">选项卡2内容</div>
v-model
v-model 是 Vue.js 中用于实现表单元素和数据之间双向绑定的指令。它允许表单元素的值与 Vue 实例中的数据属性自动同步，当用户在表单中输入内容时，数据会自动更新；反之，当数据发生变化时，表单元素也会相应更新。
实力代码如下：
//随着我们不断进行操作，由于使用v-model绑定了Node，所以操作的执行也会随之改变Node内属性的值
<body>
<div id="app">
{{Node}}
<input v-model="Node.message" placeholder="输入消息">
<!-- 多行文本 -->
<textarea v-model="Node.description" placeholder="输入描述"></textarea>
<!-- 复选框 -->
<input type="checkbox" v-model="Node.checked"> 选中
<!-- 单选按钮 -->
<input type="radio" v-model="picked" value="选项1"> 选项1
<input type="radio" v-model="picked" value="选项2"> 选项2
<!-- 下拉选择 -->
<select v-model="Node.selected">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
</select>
</div>
<!-- 文本输入 -->
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp ({
data(){
return {
Node : {
message : '',
description : '',
checked : '',
selected : '',
},
}
}
}).mount("#app");
</script>
</body>
效果如下：
v-on
v-on 是 Vue.js 中用于监听 DOM 事件的指令，它允许你在特定事件触发时执行 JavaScript 代码或调用组件方法。
基本格式如下：
<!-- 完整格式 -->
<button v-on:click="handleClick">点击我</button>
<!-- 简写格式 -->
<button @click="handleClick">点击我</button>
提供一个完整实例，结合v-on和v-model
<div id="app">
{{Node}}
<input v-model="Node.message" placeholder="输入消息">
<!-- 多行文本 -->
<textarea v-model="Node.description" placeholder="输入描述"></textarea>
<!-- 复选框 -->
<input type="checkbox" v-model="Node.checked"> 选中
<!-- 单选按钮 -->
<input type="radio" v-model="Node.picked" value="选项1"> 选项1
<input type="radio" v-model="Node.picked" value="选项2"> 选项2
<!-- 下拉选择 -->
<select v-model="Node.selected">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
</select>
<!-- v-on分别绑定了输出方法和清空方法-->
<button type="button" @click="GetOut"> 输出</button>
<button type="button" @click="Clear"> 清空</button>
</div>
<!-- 文本输入 -->
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp ({
data(){
return {
Node : {
message : '',
description : '',
checked : '',
picked : ' ',
selected : '',
},
}
},
methods: {//v-on的触发方法，Getout为在控制台输出，Clear为清空当前输入内容
Getout() {
console.log(this.Node);
} ,
Clear() {
this.Node = {
message : '',
description : '',
checked : '',
picked : ' ',
selected : '',
};
}
},
}).mount("#app");
</script>
效果如下：
点击输出按钮之后
点击清空按钮之后
浙公网安备 33010602011771号