指数爆炸's Notes

Appearance

v-for ​

列表渲染，遍历容器的元素/对象的属性

  • 使用方法：要让哪个标签循环展示多次，就在哪个标签上使用 v-for
  • 写法
    • v-for="item in items" :key="item.id" item 为数组元素，items 为数组名，:key 是给每个数组元素绑定一个 id 值【最好是 items 里唯一的值】，让 vue 可以顺利的遍历
    • v-for="(item, index) in items" :key="item.id" index 为索引
html
<body>
	<div id="app">
        <table>
            <tr v-for="data in tabledata" :key="data.id">
                <td>{{ data.id }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
            </tr>
        </table>
	</div>
</body>

<script type="module">
	import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

	createApp({
		data() {
			return {    /* 准备数组 */
				const tabledata = [
				    { id: 1, name: 'John', age: 30 },
				    { id: 2, name: 'Paul', age: 20 },
				    { id: 3, name: 'George', age: 40 },
				    { id: 4, name: 'Ringo', age: 25 }
				];
			}
		}
	}).mount('#app')
</script>


---
吴彦祖  郭富城  张学友  刘德华  梁朝伟    
0: 吴彦祖  1: 郭富城  2: 张学友  3: 刘德华  4: 梁朝伟

v-bind ​

为标签绑定属性值

  • 使用方法：在需要属性值的标签内写上 v-bind
  • 写法
    • v-bind:属性名="属性值"
    • :属性名="属性值"

绑定单个属性值 ​

  • 简单绑定属性的属性值
html
<body>
	<a v-bind:href="url">百度</a>
</body>

<script type="module">
	import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

	createApp({
		data() {
			return {
				url: 'https://www.baidu.com' /* 定义属性值 */
			}
		}
	}).mount('#app')
</script>
  • 绑定属性内的某个属性值的属性值
html
<!-- {}表示一个对象，因为style里有很多属性，所以每一个都要加，Homepage是一个动态数据变量 -->
<div v-bind:style="{ display: Homepage }">
  <TeaHomepage />
</div>

<script setup>
const Homepage = ref('block');

function homepage() {
  Homepage.value = 'block';
}
</script>
  • 动态添加/溢出属性值
html
<!-- 动态给class绑定了一个js对象，里有两个键值对，第一个键值对是true，表示永远都添加，但是第二个键值对被赋给了isActive，可以动态控制是否添加active -->
<button :class="{ 'btn btn-light ms-4 align-self-end': true, 'active': isActive }" @click="homepage">主页</button>

<script setup>
const isActive = ref(true);
</script>

绑定多个属性值 ​

js
<div :class="['alert', 'alert-' + alerts.value[0].type, 'alert-dismissible']"></div>

const alerts = ref([
  {
    message: 'Nice, you triggered this alert message!',
    type: 'success'
  }
]);

---
<div class="alert alert-success alert-dismissible"></div>

v-model ​

为表单元素创建双向数据绑定

  • 语法：v-model="数据名"
html
<body>
    <div id="app">
        <input type="text" v-model="msg">
		<p>{{ msg }}</p>   /* 文本框的内容更改，这里也动态变化 */
    </div>
</body>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                msg: 'Hello Vue 3!'
            }
        }
    }).mount('#app')
</script>

v-on ​

[!quote] v-onv-on 可以为标签绑定 事件，有两种写法：

  • v-on:事件名="函数名"
  • @事件名="函数名"

[!quote] 事件

  • click 点击
  • mouseover 悬浮
  • mouseleave 不悬浮
  • dblclick 鼠标双击事件
  • focus 元素获取焦点事件
  • blur 元素失去焦点事件
  • keydown 按下键盘键的事件
  • keyup 释放键盘键的事件
  • keypress 按下并释放键盘键的事件
  • submit 表单提交事件
  • change 表单控件值改变事件
  • input 用户输入事件
  • touchstart 触摸开始事件
  • touchend 触摸结束事件
  • touchmove 触摸移动事件
  • scroll 元素滚动事件
  • resize 浏览器窗口尺寸改变事件
  • drag 元素拖拽事件
  • drop 元素放置事件
  • contextmenu 右键菜单事件
html
<body>
    <div id="app">
        <button @click="handle">点击我</button>
    </div>
</body>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        methods: {
            handle: function () {    //声明某个方法
                alert("我被点击了")
            }
        }
    }).mount('#app')
</script>

v-if，v-else if，v-else ​

条件性的渲染某元素

  • 语法：v-if="表达式"
html
<body>
    <div id="app">   /* 根据条件，三个span只渲染一个 */
        <span v-if="age<=35"><b>年轻人</b></span>
        <span v-else-if="age>35&&age<=60"><b>中年人</b></span>
        <span v-else="age>60"><b>老年人</b></span>
    </div>
</body>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                age: 18
            }
        }
    }).mount('#app')
</script>

v-show ​

不管条件成立与否都渲染，只是不成立的使用 display 来隐藏

  • 语法：v-show="表达式"
html
<body>
    <div id="app"> 
		<span v-show="age<=35"><b>年轻人</b></span>
		<span v-show="age>35&&age<=60"><b>中年人</b></span>
		<span v-show="age>60"><b>老年人</b></span>
    </div>
</body>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
            return {
                age: 18
            }
        }
    }).mount('#app')
</script>


---
<span><b>年轻人</b></span>
<span style="display: none;"><b>中年人</b></span>
<span style="display: none;"><b>老年人</b></span>

生命周期 ​

生命周期 就是 vue 对象从创建到销毁的过程

[!attention] 生命周期中的函数 与 data()， methods{} 同级

  • beforeCreate：创建前调用
  • created：创建后
  • beforeMount：挂载前
  • mounted：挂载后
html
<body>
	……
</body>

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'  

    createApp({     
        mounted() {
            alert("Vue挂载完毕，发送请求获取数据");
        }
    }).mount('#app')   
</script>
  • beforeUpdate：数据更新前
  • updated：数据更新后
  • beforeUnmount：组件销毁前
  • unmounted：组件销毁后

v-pre ​

跳过元素和它的子元素的编译过程，可以用来显示原始的 Mustache 标签。

v-cloak ​

这个指令保持在元素上直到关联实例结束编译，和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到编译结束。

v-once ​

只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

例子 ​

  • 表单验证
html
<template>
	<form class="d-flex flex-column">
		<div class="d-flex mb-2">
			<label for="disabledTextInput"
				class="form-label col-form-label flex-shrink-0 ms-2">用户名：</label>
			<input required type="text" id="disabledTextInput" class="form-control flex-grow-1"
				pattern="\d{5,8}" title="请输入5-8位的数字">
		</div>
		<div class="d-flex mb-2">
			<label for="disabledTextInput"
				class="form-label col-form-label flex-shrink-0 ms-2">密码：</label>
			<input required type="text" id="disabledTextInput" class="form-control flex-grow-1"
				pattern="[A-Za-z0-9]{5,8}" title="请输入5-8位的英文字母或数字" v-model="password1">
		</div>
		<div class="d-flex mb-2">
			<label for="disabledTextInput"
				class="form-label col-form-label flex-shrink-0 ms-2">确认密码：</label>
			<input required type="text" id="disabledTextInput" class="form-control flex-grow-1"
				v-model="password2" :pattern="confirmPasswordPattern" title="两次输入的密码不一致">
		</div>
		<button type="submit" class="btn btn-primary mx-auto">注册</button>
	</form>
</template>

<script setup>
// 表单判断
import { ref } from 'vue';
import { computed, watch } from 'vue';

const password1 = ref('');
const password2 = ref('');

const confirmPasswordPattern = computed(() => password1.value ? '^' + password1.value + '$' : '.*');

watch(password1, () => {
    password2.value = '';
});
</script>