Vue 3 入门基础知识
Vue 3 入门基础知识
入门知识
实验介绍
本章节实验主要讲解 vue 的最基本的知识点，在讲解知识点之前，我们需要介绍一下 vue.js：
Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全有能力为复杂的单页应用程序提供支持。
模版插值绑定
模版插值，就是将变量使用 {{}} 双大括号的方式在 DOM 元素中解析我们在 data() 中定义好的变量。
接下来，在上节课的实验代码中基础上，在 src/views 新建 BasicKnow.vue：
<template>
<div class="basic-know-wrap">
<!-- 模版插值 -->
{{counter}}
<br>
<button @click="count">计数器</button>
</div>
</template>
<script>
export default {
name: 'BasicKnow',
data() {
return {
counter: 0
}
},
methods: {
count() {
this.counter++
}
}
}
</script>从上面的代码，我们可以看出其实 vue.js 3 是兼容 vue.js 2.x 的，我们同样可以在 vue.js 3 版本使用 vue.js 2.x 的知识点，像 data()，methods。
在 router/index.js 配置路由：
const routes = [
{
path: '/basic_know',
name: 'BasicKnow',
component: () => import('../views/BasicKnow.vue'),
meta: {
title: '基础知识'
}
}
]然后跑起服务：
npm run serve
v-bind 绑定
除了上面的模版插值之外，我们还可以使用 v-bind，以及 v-bind 简写模式 :
<button @click="count" :title="msg">计数器</button>在 data() {} 定义 msg 变量，将 msg 绑定给 title 属性：
<script>
export default {
name: 'BasicKnow',
data() {
return {
counter: 0,
msg: '这是一个 button 按钮'
}
},
methods: {
count() {
this.counter++
}
}
}
</script>然后我们使用鼠标移上 button 按钮，会出现一个 这是一个 button 按钮 提示语：
v-model 处理输入框
Vue还提供了一个v-model指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举：
使用 input 标签，通过 v-mode 指令绑定我们上面定义好的 counter 变量：
<template>
<div class="basic-know-wrap">
<!-- 模版插值 -->
{{counter}}
<br>
<input v-model="counter">
<br>
<button @click="count" :title="msg">计数器</button>
</div>
</template>效果如下：
v-if 条件指令
通常我们在 js 中可以使用 if 语句来判断程序如何运行，vue.js 吸取了这点优势，我们也可以在 DOM 元素进行条件判断。假如程序员有女朋友的话，你大概会呈现以下状态：
<span v-if="isSeen">我想见你</span>然而这个 isSeen 变量其实就是你的女朋友，所以需要在 data() 里面定义 isSeen 变量：
<script>
export default {
name: 'BasicKnow',
data() {
return {
isSeen: true
}
},
}
</script>所以效果如下：
v-for 循环
有了 v-if 语句，当然就会有 v-for 循环指令，只要适用于列表展示：
<template>
<div class="basic-know-wrap">
<ul>
<li :key="index" v-for="(item, index) in arr">{{item}}</li>
</ul>
</div>
</template>在 data() 定义 arr 变量：
<script>
export default {
name: 'BasicKnow',
data() {
return {
arr: ['女朋友', '我想你了', '我想见你了']
}
},
}
</script>
腾讯云开发者
