一. 什么是Vue
-
Vue是一款用于构建用户界面的渐进式的JavaScript框架。(官方：https://cn.vuejs.org/)
-
框架：就是一套完整的项目解决方案，用于快速构建项目
-
优点：大大提升前端项目的开发效率
-
缺点：需要理解记忆框架的使用规则(参照官网)
二. Vue快速入门
- 准备
(1) 引入Vue模块(官方提供)
(2) 创建Vue程序的应用实例，控制视图的元素
(3) 准备元素(div)，被Vue控制
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
</head>
<body>
<div id="app">
//差值表达式
<h1>{{message}}</h1>
<h1>{{number}}</h1>
</div>
</body>
<script type="module">
// 1. 引入Vue
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 2. 创建应用实例对象
createApp({
data(){
return {
message:'Hello Vue!',
number:100
}
}
}).mount('#app');
</script>
</html>三. 常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同的含义，可以实现不同功能
|------------------------|-------------------------------|
| 常用指令 | 作用 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
| v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
| v-if/v-else-if/-v-else | 条件性的渲染某个元素，判断为ture时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-model | 在表单元素上创建双向点数据绑定 |
| v-on | 为HTML标签绑定事件 |
四. v-for指令
-
作用：列表渲染，遍历容器的元素或者对象的属性
-
语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
-
参数说明：
items为遍历的数组；
item为遍历出来的元素；
index为索引/下标，从0开始；可以省略，省略后的语法： v-for="item in items"
:key：:与key是紧挨着的，分开会报错，作用给元素添加的唯一标识，便于Vue进行列表项的正确排序复用，提高渲染性能；推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)
注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用指令v-for</title>
</head>
<body>
<div id="container">
<table >
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</thead>
</table>
</div>
</body>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
// 数组
list:[
{
"id":"1",
"name":'张三',
"age":"13",
"gender":'男'
},
{
"id":"2",
"name":'李四',
"age":"18",
"gender":'男'
},
{
"id":"3",
"name":'王五',
"age":"14",
"gender":'男'
},
{
"id":"4",
"name":'赵六',
"age":"16",
"gender":'男'
}
]
}
}
}).mount('#container');
</script>
</html>五. v-bind
- v-bind：动态为HTML标签绑定属性值，如href、src、style样式等；
语法：v-bind:属性名="属性值" 简化 :属性名="属性值"
注意：动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用指令v-for</title>
</head>
<body>
<div id="container">
<table border="1" style="width: 50%;height: 50%;">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<!-- 动态的为标签的属性绑定值，不能使用差值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。 -->
<!-- <td><img class="avatar" src="{{item.img}}" alt="{{item.name}}"></td> -->
<td><img class="avatar" v-bind:src="item.img" alt="item.name"></td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</thead>
</table>
</div>
</body>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
// 数组
list:[
{
"id":"1",
"name":'张三',
"img":"img/th.jpg",
"age":"13",
"gender":'男'
},
{
"id":"2",
"name":'李四',
"img":"img/th.jpg",
"age":"18",
"gender":'男'
},
{
"id":"3",
"name":'王五',
"img":"img/th.jpg",
"age":"14",
"gender":'男'
},
{
"id":"4",
"name":'赵六',
"img":"img/th.jpg",
"age":"16",
"gender":'男'
}
]
}
}
}).mount('#container');
</script>
</html>
六. v-if、v-show
-
作用：这两类指令，都是用来控制元素的显示与隐藏的
-
v-if语法：v-if="表达式"，表达式为ture显示，false隐藏；原理：基于条件判断，用来控制创建或者移除元素节点(条件渲染)；要么显示要么不显示，不频繁切换；可以配合v-else-if / v-else进行链式调用条件判断
注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后
3.v-show语法： v-show="表达式"，表达式值为ture显示，false隐藏；原理：基于css样式display来控制显示与隐藏；频繁切换显示隐藏的场景
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用指令v-if、v-show</title>
</head>
<body>
<div id="container">
<table border="1" style="width: 50%;height: 50%;">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>头像</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tbody>
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td><img class="avatar" v-bind:src="item.img" alt="item.name"></td>
<td>{{item.age}}</td>
<td>
<!-- v-if 控制-->
<span v-if="item.gender==1">男</span>
<span v-else-if="item.gender==2">女</span>
<span v-else>未知</span>
<!-- v-show 控制-->
<!-- <span v-show="item.gender==1">男</span>
<span v-show="item.gender==2">女</span>
<span v-show="item.gender!=1 && item.gender!=2">未知</span> -->
</td>
</tr>
</tbody>
</thead>
</table>
</div>
</body>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
// 数组
list:[
{
"id":"1",
"name":'张三',
"img":"img/th.jpg",
"age":"13",
"gender":'1'
},
{
"id":"2",
"name":'李四',
"img":"img/th.jpg",
"age":"18",
"gender":'2'
},
{
"id":"3",
"name":'王五',
"img":"img/th.jpg",
"age":"14",
"gender":'1'
},
{
"id":"4",
"name":'赵六',
"img":"img/th.jpg",
"age":"16",
"gender":'2'
}
]
}
}
}).mount('#container');
</script>
</html>
七. v-model、v-on
- v-model：在表单元素上使用，双向数据绑定。可以方便的获取 或 设置表单项数据
语法：v-model = "变量名"；v-model中绑定的变量，必须在data中定义
- v-on：为HTML标签绑定事件(添加事件监听)
语法：v-on：事件名="方法名" 简写为 @事件名="..."
methods函数中的this指向Vue实例，可以通过this获取data中定义的数据
methods与data同级
