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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- codeforces 1396A(构造)
- codeforces 1335E1+E2(思维)
- JSP开发基础入门学习1
- codeforces 1407C(数学+交互题)
- codeforces 1420C1
- codeforces 1417D(思维,构造)
- Servlet基础入门学习2
- codeforces 1426D(思维)
- codeforces 1324E(dp)
- OpenCV4.4 CUDA编译与加速全解析
- codeforces 1077D(二分)
- codeforces 1077F1(dp)
- Servlet基础入门学习1
- Lombok,你的开发效率神器!
- codeforces 1272E(反向建边+多源bfs)