👨🏻‍💻's 博客

慢品人间烟火色，闲观万事岁月长

0%

Vue学习笔记 - 互动教程 01

发表于 更新于 分类于

为了快速熟悉Vue,学习下互动教程。

早上出门有事情,没学完,学到哪算哪

互动教程(Vue3)

声明式渲染

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。

小结

  1. 使用 data 组件选项来声明响应式状态，该选项应该是一个返回对象的函数
  2. 使用双花括号”状态值“渲染文本（双大括号写法又名:mustache语法)
  3. 双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
export default {
  // 返回一个Object,其中name属性的"状态"/值是字符串"张三"
  data() {
    return {
        name:"Zhangsan",
        gender:"male"
    }
  }
}
</script>

<template>
  // 渲染name属性
  <h1>{{ name }}</h1>
  <h1>{{ gender }}</h1>
  <h1>{{ this.gender.split('') }}</h1>
</template>

2025-04-07 08.53.40.png

Attribute 绑定

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令：

1
<div v-bind:id="dynamicId"></div>

示例代码
要求: 把一个动态的 class 绑定添加到这个 <h1> 上，并使用 titleClass 的数据属性作为它的值。如果绑定正确，文字将会变为红色

1
2
3
<div v-bind:id="dynamicId"></div>
# 简写
<div :id="dynamicId"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1>Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>

<style>
.title {
  color: red;
}
</style>

这个一开始没理解

1
2
# 这样写没有效果,看了参考答案明白了
<h1 :id="titleClass">Make me red</h1>

要延伸一下,JS可以通过 id,class,name 等找到页面的元素,示例只是以id为例,所以有个title的样式,就明白v:bind绑定了

1
<h1 :class="titleClass">Make me red</h1>

2025-04-07 09.11.50.png

再验证下,绑定id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
export default {
  data() {
    return {
      titleClass: 'title',
      today:'mondy'
    }
  }
}
</script>

<template>
  <h1 :class="titleClass">Make me red</h1> 
  <h1 :id="today">Make me green</h1> 
</template>

<style>
.title {
  color: red;
}
#mondy {
	color: green;    
}
</style>

2025-04-07 09.22.19.png

小结:

  1. 使用 v-bind:id=”dynamicId” 绑定元素,可以给属性一个动态值
  2. v-bind:id=”dynamicId” 可以简写为 :id=”dynamicId”

事件监听

可以使用 v-on 指令监听 DOM 事件

1
<button v-on:click="increment">{{ count }}</button>

简写

1
<button @click="increment">{{ count }}</button>

实现一个点击自增的按钮效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    incremetMore() {
      this.count += 2
    }
  }
}
</script>

<template>
  <button @click="incremetMore">Count is: {{ count }}</button>
</template>

2025-04-07 09.33.58.png

小结:

  1. 使用 v-on:click=”方法名” 监听点击事件
  2. v-on:click=”方法名”可以简写为 @click=”方法名”
  3. methods里定义方法列表

表单绑定

可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定

1
<input :value="text" @input="onInput">
1
2
3
4
5
6
7
methods: {
  onInput(e) {
    // v-on 处理函数会接收原生 DOM 事件
    // 作为其参数。
    this.text = e.target.value
  }
}

为了简化双向绑定，Vue 提供了一个 v-model 指令，它实际上是上述操作的语法糖：

1
<input v-model="text">

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  // 双向绑定: input通过:value绑定(bind)了状态值里的text,input事件触发methods里的onInput方法
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

使用v-model进行简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>

<template>
  // 双向绑定: input通过:value绑定(bind)了状态值里的text,input事件触发methods里的onInput方法
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

2025-04-07 09.42.03.png

小结:

  1. 使用 v-model=”状态值”,可以实现双向绑定,支持文本输入框，多选框、单选框、下拉框 – 开发时更关注状态的变化,建立绑定很多时候是必要的苦力活

条件渲染

可以使用 v-if 指令来有条件地渲染元素

1
<h1 v-if="awesome">Vue is awesome!</h1>
1
2
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

这个没啥好说的,很自然的逻辑，过一下用例即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      // ...
    }
  }
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1>Vue is awesome!</h1>
  <h1>Oh no 😢</h1>
</template>

示例程序同时展示了两个 <h1> 标签，并且按钮不执行任何操作。尝试给它们添加 v-if 和 v-else 指令，并实现 toggle() 方法，让我们可以使用按钮在它们之间切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
export default {
  data() {
    return {
      awesome: true
    }
  },
  methods: {
    toggle() {
      // 值取反
      this.awesome = !this.awesome
    }
  }
}
</script>

<template>
  <button @click="toggle">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

小结:

  1. 可以使用v-if="状态值",v-else 实现根据状态值来执行不同的操作

参考

  1. Vue互动教程