目录
快速入门
-
Vue是一款用于构建用户界面的渐进式的JavaScript框架
-
框架:就是一套完整的项目解决方案,用于快速构建项目
-
优点:大大提升前端项目的开发效率
-
缺点:需要理解记忆框架和使用规则
准备
- 引入Vue模块(官方有提供) import
- 创建Vue程序的应用实例,控制视图的元素 createApp({对象})
- 准备元素,给Vue控制
数据驱动视图
- 准备数据(在下图准备属性data里面,或者准备方法的method里面)
- 通过插值表达式渲染画面{{}}
Vue常见指令
- 指令:HTML便签上带有 v-前缀的特殊属性,不同的指令有不同的含义,可以实现不同的功能
- 一些常见的指令
- v-for 列表渲染,遍历容器的元素或对象的属性
- v-bind 为HTML标签绑定属性值,如设置href,css样式等
- v-if/v-else-if/v-else 条件性渲染某元素,判定为true渲染,否则不渲染
- v-show 根据条件展示某元素,区别再与切换的是display的值还是会渲染
- v-model 在表单元素上创建双向数据绑定
- v-on 为html标签绑定事件
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="app">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td>{{e.age}}</td>
</tr>
</tbody>
</table>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList:[
{
"id":1,
"name":'哈哈',
"age":2
},
{
"id":2,
"name":'嘻嘻',
"age":3
},
{
"id":3,
"name":'哈哈 aaaaa',
"age":3
},
]
}
}
}).mount('#app');
</script>
</body>
</html>
v-bind
作用:动态为HTML标签绑定属性值,如设置href,src,style样式等
语法:v-bind:属性名="属性值"
简化 :属性名="属性值"
注意:动态的为标签的属性绑定值,不能使用插值表达式,得使用v-bind指令 且绑定的数据,必须在data中定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="app">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td>{{e.age}}</td>
<td><img v-bind:src="e.image" width="30px"></td>
</tr>
</tbody>
</table>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList:[
{
"id":1,
"name":'哈哈',
"age":2 ,
image:"../img/1.jpg"
},
{
"id":2,
"name":'嘻嘻',
"age":3 ,
image:"../img/1.jpg"
},
{
"id":3,
"name":'哈哈 aaaaa',
"age":3 ,
image:"../img/1.jpg"
},
]
}
}
}).mount('#app');
</script>
</body>
</html>因为插值表达式不能出现在标签内部,用这个方法
v-if或v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table id="app">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{e.id}}</td>
<td>{{e.name}}</td>
<td>{{e.age}}</td>
<td>
<span v-if="e.job==1">asd</span>
<span v-else-if="e.job==2">qwe</span>
<span v-else="e.job==3">zxc</span>
</td>
</tr>
</tbody>
</table>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList:[
{
"id":1,
"name":'哈哈',
"age":2 ,
"job":1
},
{
"id":2,
"name":'嘻嘻',
"age":3 ,
"job":2
},
{
"id":3,
"name":'哈哈 aaaaa',
"age":3 ,
"job":3
},
]
}
}
}).mount('#app');
</script>
</body>
</html>
区别:
- v-if与v-show 作用:根据条件判断,是否展示某元素
- 区别:v-if 条件不成立,直接不渲染这个元素(不频繁切换的场景) v-show通过css样式,来控制元素的展示与隐藏(频繁切换的场景)
v-model与v-on
v-model 在表单元素上使用,双向数据绑定,可以更方便的获取或设置表单项数据
语法:v-model="变量名"
在表单上或后端修改都会互相更改数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="empList[1].name">
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList:[
{
"id":1,
"name":'哈哈',
"age":2 ,
"job":1
},
{
"id":2,
"name":'嘻嘻',
"age":3 ,
"job":2
},
{
"id":3,
"name":'哈哈 aaaaa',
"age":3 ,
"job":3
},
]
}
}
}).mount('#app');
</script>
</body>
</html>
v-on
作用:为html标签绑定事件(添加事件监听)
语法:v-on:事件名="方法名"
简写@事件名=" "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button type="button" v-on:click="handle">点我</button>
<input type="text" v-model="empList[1].name">
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList:[
{
"id":1,
"name":'哈哈',
"age":2 ,
"job":1
},
{
"id":2,
"name":'嘻嘻',
"age":3 ,
"job":2
},
{
"id":3,
"name":'哈哈 aaaaa',
"age":3 ,
"job":3
},
]
}
},
methods:{
handle(){
console.log(11111);
}
}
}).mount('#app');
</script>
</body>
</html>