一幅长文细学Vue（二）——Vue基础入门
2 Vue基础入门
摘要
在本文中，我们会快速地入门Vue。主要了解的是Vue各种指令语法。
声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码。
作者：来自ArimaMisaki创作
2.1 概述
2.1.1 单文件组件
说明：在Vue项目中我们常常将一整个项目拆分成多个组件。举一个比较生动的例子，我们将要用积木制作一个超级玛丽，那我们需要将一个超级玛丽分为头、身子、脚等一系列组件。在后续的开发中，如果我们还想做一个不一样的超级玛丽，则我们可以找找以往的组件，看看有没有组件可以复用。
在Vue项目中，组件以.vue的文件形式存在。它也被成为单文件组件。其结构分为template、css、script。
2.1.2 API风格
说明：Vue的组件可以按照两种不同的风格进行书写：选项式API和组合式API。
选项式API：如果使用选项式API，我们可以用包含多个选项对象来描述组件的逻辑。选项有很多种，我们会在后续一一介绍。在初级学习阶段，我们大多书写选项式API。
组合式API：我们可以通过导入的API函数来描述组件逻辑。
2.1.3 声明式渲染
说明：Vue的核心功能是声明式渲染。通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
我们可以在data组件选项中来声明响应式状态，该选项应该是一个返回对象的函数。
<script>
export default {
data() {
return {
message: 'Hello World!',
counter: {
count: 0
}
}
}
}
</script>
<template>
<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
2.1.4 属性绑定
说明：我们可以使用v-bind:指令来绑定一个属性值，由于v-bind经常被使用，所以其可以被简写为:。
<script>
export default {
data() {
return {
titleClass: 'title'
}
}
}
</script>
<template>
<h1 :class="titleClass">Make me red</h1>
</template>
<style>
.title {
color: red;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
2.1.5 事件监听
说明：我们可以使用v-on来监听DOM事件，其简写为@。
<script>
export default {
data() {
return {
count: 0
}
},
methods:{
increment(){
this.count++
}
}
}
</script>
<template>
<!-- 使此按钮生效 -->
<button @click="increment">count is: {{ count }}</button>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
2.1.6 表单绑定
说明：如果我们希望一个通过一个表单改变数据，那么我们可以使用v-on+v-bind完成这样的操作，但是Vue为我们提供了语法糖v-model，它通常用于双向绑定。
语法糖：简化语法，让你觉得语法不再枯燥无味。
<script>
export default {
data() {
return {
text: ""
}
},
}
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2.1.7 条件渲染
说明：我们可以使用v-if，v-else-if，v-else来进行条件渲染，其中v-if和v-else-if对应的值只有为真的情况下才会渲染。
<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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
2.1.8 列表渲染
说明：当我们想要渲染多个li标签时，我们可以将标签中的内容置于数组中，并使用v-for指令。
<script>
// 给每个 todo 对象一个唯一的 id
let id = 0
export default {
data() {
return {
newTodo: '',
todos: [
{ id: id++, text: 'Learn HTML' },
{ id: id++, text: 'Learn JavaScript' },
{ id: id++, text: 'Learn Vue' }
]
}
},
methods: {
addTodo() {
this.todos.push({ id: id++, text: this.newTodo })
this.newTodo = ''
},
removeTodo(todo) {
this.todos = this.todos.filter((t) => t !== todo)
}
}
}
</script>
<template>
<form @submit.prevent="addTodo">
<input v-model="newTodo">
<button>Add Todo</button>
</form>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button @click="removeTodo(todo)">X</button>
</li>
</ul>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
2.1.9 生命周期初探
说明：目前为止，我们并没有实际动手去操作DOM，但是有时候我们也有要手动操作DOM的情况。Vue为我们提供了模板引用，具体的做法是在标签中使用ref属性，之后我们可以在script标签中使用this.$refs.p来访问操作该标签对应的DOM。
我们可以通过mounted()函数来操作DOM，它常被称为生命周期钩子，因为它允许我们注册一个在组件特定生命周期调用的回调函数。
<script>
export default {
mounted(){
this.$refs.p.textContent = 'I like you'
}
}
</script>
<template>
<p ref="p">hello</p>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
2.2 指令汇总
-
插值表达式：从data中渲染文本，可在里面使用js表达式
-
v-text：从data中渲染文本
-
v-html：从data中渲染标签及其内容
-
v-bind：从data中渲染属性，可简写为
: -
v-on事件：从methods中获取事件，可简写为@事件，如@click
-
v-model：用于双向绑定，只能用于表单元素。当需要维护组件内外数据的同步时，也可以使用该指令
-
v-if：条件渲染指令。v-if会动态创建或移除DOM元素，具有切换开销
-
v-else：配合v-if使用
-
v-else-if：配置v-if使用
-
v-show：条件渲染指令。v-show会动态地显示与隐藏，本质是display:none，具有渲染开销
-
v-for：列表循环指令。从data中的列表中循环获取数据，语法是元素 in 列表名或==(元素名,索引) in 列表名==
2.3 事件对象
说明：
-
在原生DOM事件绑定中，可以在事件处理函数的形参处，接收事件对象event。同理在v-on指令所绑定的事件处理函数中，同样可以接收到事件对象event。
-
事件对象event必须写在参数列表的第一个，如果不想写在第一个，请在传参时事件变量前加上$。
<body>
<div id = "app">
<b>count的值为：{{count}}</b>
<button v-on:click="addCount">+1</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
count:0,
},
methods:{
addCount(e){
const nowBgColor = e.target.style.backgroundColor;
e.target.style.backgroundColor = nowBgColor === 'red'?'':'red';
this.count+1;
}
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.4 事件修饰符
| 事件修饰符 | 说明 |
|---|---|
| .prevent | 阻止默认行为（阻止a链接的跳转，阻止表单的提交） |
| .stop | 阻止事件冒泡 |
| .capture | 以捕获模式触发当前的事件处理函数 |
| .once | 绑定的事件只触发一次 |
| .self | 只有在event.target是当前元素自身时触发事件处理函数 |
2.5 按键修饰符
| 事件修饰符 | 说明 |
|---|---|
| @keyup.enter | 按enter键后会发生对应事件 |
| @keyup.esc | 按esc键后会发生对应事件 |
<body>
<div id="app">
<input type="text" @keyup.enter = "submit" @keyup.esc = "clearInput">
</div>
<script src = "./vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
},
methods:{
submit(e){
console.log('按下了enter键，最新的值是：'+e.target.value);
},
clearInput(e){
e.target.value = '';
},
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.6 v-model修饰符
说明：
- 使用.trim可以使得文本框输入的空格传到后台时被忽略
- 使用.number可以保重转换后仍为数值
- 使用.lazy可以让文本框失去焦点后再更新而非实时更新
<body>
<div id="app">
<!-- 使用.trim可以是的文本框输入的空格传到后台时被忽略 -->
姓名：<input type="text" v-model.trim = "username">
<hr>
<!-- 使用.number可以保重转换后仍为数值 -->
年龄：<input type="text" v-model.number="age">
<hr>
<!-- 使用.lazy可以让文本框失去焦点后再更新而非实时更新 -->
地址：<input type="text" v-model.lazy = "address">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ArimaMisaki',
age:13,
address:'北京市',
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
2.7 使用key来维护列表状态
引入：在我们使用v-for指令时，常常会因为添加或删除数组的元素，导致维护的li标签顺序与想象中不符。
说明：在标签中添加key属性，值为列表中的某个值。相当于数据库中的主键。通常列表指定值最好是id。key能够维护表单的状态。
<body>
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<ul>
<li v-for = "{user,index} in userlist" :key = "user.id">
<input type="checkbox">
姓名:{{user.name}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
userlist: [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' }
],
name: '',
}
})
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
文章来源: blog.csdn.net，作者：ArimaMisaki，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chengyuhaomei520/article/details/126567787
- 点赞
- 收藏
- 关注作者
评论（0）