本文档详细介绍了Vue.js的基础知识，包括Vue实例的创建与挂载、数据绑定（内容、属性和表单控件的双向绑定）、组件的使用（遍历数据与组件模板）以及多个实战案例，如显示输入框内容、换肤功能、增删改查操作和tab栏切换。通过示例代码展示了Vue.js的强大功能和易用性。
目录
一、vue基础
1.vue格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'hello',
},
})
</script>
</body>
</html>
-
创建dom结构，作为vue实例挂载点，vue实例中的所有数据只能在此dom范围内使用
<div id="app"></div> -
通过
new Vue创建vue实例 -
el属性指定当前vue实例的挂载点 -
data中是模型数据，这些数据依赖于当前的vue实例，可以再控制台中通过下面方式访问data中数据app.msg -
可以通过插值表达式使用
data中的数据
二、数据绑定
1.内容绑定
将data中的数据显示成内容（开始标签与结束标签之间）
使用{{}}
<div id="app">
<p>
{{title}}
</p>
</div>
上面只能显示纯文本，如果要显示html内容，需要使用v-html指令
<p v-html="content"></p>
2.属性绑定
将data中的数据作为某个元素的属性的值
使用v-bind:属性名称指令，属性可以是内置，也可以是自定义的
<p v-bind:id="id">{{title}}</p>
v-bind:可以缩写为:
<p :id="id">{{title}}</p>
3.表单控件的值
可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：
- text 和 textare 元素使用
valueproperty和input事件； - checkbox 和 radio 使用
checkedproperty和change事件； - select 字段将
value作为 prop 并将change作为事件。
文本框和文本域
<input type="text" v-model="message">
<textarea v-model="message" cols="30" rows="10"></textarea>
三、组件
1.遍历数据
当传递的数据是数组时，不会向上面genuine索引获取对象。而是通过v-for指令遍历数据，生成组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table id="app" border="1" cellspacing="0">
<tr>
<th>姓名</th>
<th>学历</th>
<th>出生日期</th>
</tr>
<tr v-for="item in students">
<td>{{item.name}}</td>
<td>{{item.education}}</td>
<td>{{item.birth}}</td>
</tr>
</table>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
students: [{
id: 1,
name: '小王',
education: '本科',
birth:'2000-12-20'
},
{
id: 2,
name: '小师',
education: '硕士',
birth:'2000-12-20'
},
{
id: 3,
name: '小浩',
education: '博士后',
birth:'2000-12-20'
},
],
},
})
</script>
</body>
</html>
2.组件模板
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<skd-button></skd-button>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('skd-button',{
template:`<button>自定义按钮</button>`
})
/*
创建了 vue 根实例app
*/
let app = new Vue({
el: '#app',
data: {},
})
</script>
</body>
</html>
四、案例
1.显示输入框内容
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" id="msg" v-model="txt" v-on:keyup="changeMsg">
<br>
<span>{{msg}}</span>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
txt:'',
msg:'',
},
methods:{
changeMsg:function(){
this.msg = this.txt
}
}
})
</script>
</body>
</html>
2.换肤案例
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,
body,
#app{
width: 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
}
nav{
height: 150px;
background-color: rgba(0, 0, 0, .7);
text-align: center;
}
img{
height: 120px;
margin: 0 20px;
margin: 15px 20px;
}
</style>
</head>
<body>
<div id="app" :style="{backgroundImage:bgImg}">
<nav>
<img src="./images/1.jpg" v-on:click="changeBg('./images/1.jpg')" alt="">
<img src="./images/2.jpg" v-on:click="changeBg('./images/2.jpg')" alt="">
<img src="./images/3.jpg" v-on:click="changeBg('./images/3.jpg')" alt="">
</nav>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
bgImg:'url(./images/1.jpg)'
},
methods:{
changeBg:function(url){
// 切换 bgImg 的值为当前点击的图片的路径
this.bgImg=`url(${url})`
}
}
})
</script>
</body>
</html>
3.增删改查案例
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -150px;
width: 300px;
background-color: rgba(0, 0, 0, .4);
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="group1">
<input type="button" class="add" @click="add" value="新增" />
</div>
<div class="group2">
<table border="1" cellspacing="0">
<tr>
<th>id</th>
<th>标题</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-cloak v-for="(item, index) of slist">
<td>{{ index + 1 }}</td>
<td>{{ item.title }}</td>
<!-- <td>{{ item.create_time }}</td> -->
<!-- <td>{{formatTime(item.create_time)}}</td> -->
<td>{{formatTime(parseInt(item.create_time))}}</td>
<td>
<a href="javascript:;" @click="showOverlay(index)">修改</a> |
<a href="javascript:;" @click="del(index)">删除</a>
</td>
</tr>
</table>
</div>
<model :list="selectedlist" :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
// let timestamp = Date.parse(new Date())
// console.log(timestamp);
Vue.component('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="con">
<h2 class="title">新增 | 修改</h2>
<div class="content">
<table border="1" cellspacing="0">
<tr>
<td>输入标题</td>
<td><input type="text" v-model="modifylist.title"></td>
</tr>
</tr>
</table>
<p>
<input type="button" @click="changeActive" value="取消">
<input type="button" @click="modify" value="保存">
</p>
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
}
}
});
let app = new Vue({
el: '#app',
data: {
isActive: false, // 是否显示弹窗
selected: -1, // 选择了哪条记录
selectedlist: {}, // 选中的信息
slist: [],
list: [{
title: '今天天真冷',
create_time: '1614665768000',
},
{
title: '明天气温就回升',
create_time: '1614686466000',
},
{
title: '春暖花开',
create_time: '1614686519000',
}
],
},
created() {
this.setSlist(this.list);
},
methods: {
formatTime: function (a) {
return moment(a).format('YYYY-MM-DD HH:mm:ss')
},
// 修改数据
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 点击保存按钮
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
add: function () {
this.selectedlist = {
id: '',
title: '',
// create_time: 'new Date(parseInt())',
create_time: '1614686768000',
};
this.selected = -1;
this.isActive = true;
},
// delete list in index location
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.isActive = !this.isActive;
},
// 获取需要渲染到页面中的数据
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
}
},
watch: {}
});
</script>
</body>
</html>
4.tab栏切换
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#app{
width: 500px;
margin: 20px auto;
}
.tab li {
width: 100px;
list-style: none;
display: inline-block;
border: 1px solid black;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.tab div {
/*把div隐藏起来*/
display: none;
width: 500px;
}
img {
width: 500px;
height: 300px;
}
.tab div.current {
/*显示div*/
display: block;
}
.active {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<!-- tab栏 -->
<ul>
<li @click='change(index)' :class='currentIndex==index?"active":""' :key='item.id'
v-for='(item,index) in list'>{{item.title}}</li>
<!-- <li class="active">科幻</li> -->
<!-- <li class="">大海</li> -->
<!-- <li class="">飞机</li> -->
</ul>
<!-- 对应显示的图片 -->
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
<img :src="item.path">
</div>
</div>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
currentIndex: 0,
list: [{
id: 1,
title: '科幻',
path: 'img/1.jpg'
}, {
id: 2,
title: '大海',
path: 'img/2.jpg'
}, {
id: 3,
title: '飞机',
path: 'img/3.jpg'
}]
},
methods: {
change: function (index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
5.封装表格
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 80%;
/* 下面这个代码就能设置tr边框颜色了 */
border-collapse: collapse;
margin: 20px auto;
}
thead {
text-align: left;
line-height: 40px;
}
th,
td {
padding-left: 20px;
}
tbody {
line-height: 50px;
}
table tr {
width: 100%;
border-bottom: 2px solid #ebeef5;
}
tbody tr:hover {
background-color: #f5f7fa;
transition: background-color .25s ease;
}
.btn{
background-color: #f56c6c;
color: #fff;
padding: 8px 20px;
box-sizing: border-box;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
border: 1px solid #dcdfe6;
outline: none;
transition: .1s;
}
.btn:hover{
background-color: #f78989;
border-color: #f78989;
border: 1px solid #dcdfe6;
}
</style>
</head>
<body>
<div id="app">
<skd-table></skd-table>
</div>
<!-- 引入 vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 自定义table组件
Vue.component('skd-table', {
data: function () {
return {
posts: [{
id: 1,
title: '早上好',
name: '项羽'
},
{
id: 2,
title: '中午好',
name: '嬴政'
},
{
id: 3,
title: '晚上好',
name: '曹操'
},
]
}
},
template: `
<table>
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>姓名</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr v-for='(item,index) in posts'>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.name}}</td>
<td><button @click='del(item,id)' class='btn'>删除</button></td>
</tr>
</tbody>
</table>
`,
methods:{
del:function(id){
let index=this.posts.findIndex(item=>{
return item.id==id
})
this.posts.splice(index,1)
}
}
})
let app = new Vue({
el: '#app',
data:{
}
})
</script>
</body>
</html>
扫一扫
9031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
