前言
作为一个学生的我，很清楚的知道 “纸上得来终觉浅,绝知此事要躬行。知识一定不仅局限于课堂”。所以今天再次自学了关于“前端框架的知识——Vue.js”;那么接下来分享一下我今天的成果。vue.js与sweetalert.js关于table的CRUD。
分享内容
运行整体效果
1：引用相关js
<!--SweetAlert2是一款功能强大的纯Js模态消息对话框插件。
SweetAlert2用于替代浏览器默认的弹出对话框，它提供各种参数和方法，支持嵌入图片，背景，HTML标签等，并提供5种内置的情景类，功能非常强大。
在下面我们可以用到，稍后做解释。
-->
<script src="js/sweetalert2.min.js"></script>
<!--引入sweetalert2.min.css-->
<link rel="stylesheet" href="css/sweetalert2.min.css">
<!--引入核心 vue.js-->
<script src="js/vue.js"></script>
2:html
<div id="tab_content">
<div class="serch_style">
<input type="text" class="serch_input" v-model="serch_txt" placeholder="搜索音乐标题" /><input class="serch_input serch_submt" type="button" v-on:click="serch_method" value="搜索" />
</div>
<input type="button" v-on:click="deleteAllsound" class="serch_input" value="一键删除" style="width: 150px;background-color:rgb(105,105,105);float:right;margin-left:10px" />
<input type="button" v-on:click="addShow_State" class="serch_input" value="新增歌曲" style="width: 150px;background-color:rgb(105,105,105);float:right" />
<table class="tab_style">
<thead>
<tr>
<th>编号</th>
<th>音乐标题</th>
<th>歌手</th>
<th>专辑</th>
<th>时长</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-if="addshow">
<td></td>
<td><input type="text" class="serch_input" placeholder="音乐标题" v-model="title" /></td>
<td><input type="text" class="serch_input" placeholder="音乐歌手" v-model="Singer" /></td>
<td><input type="text" class="serch_input" placeholder="音乐专辑" v-model="Album" /></td>
<td><input type="text" class="serch_input" placeholder="音乐时长" v-model="time" /></td>
<td><input type="button" class="serch_input" value="保存" v-on:click="addSounds" style="width: 80px;background-color:rgb(105,105,105)" /></td>
</tr>
<tr v-for="(item,index) in serch_method">
<td style="width:50px;" class="color_style1 ">{{index+1}}</td>
<td style="width:250px;" class="color_style2"><span>{{item.title}}</span></td>
<td class="color_style1"><span>{{item.Singer}}</span></td>
<td class="color_style1"><span>{{item.Album}}</span></td>
<td class="color_style1"><span>{{item.time}}</span></td>
<td class="color_style1"><a v-on:click="updateSounds(index)">修改</a><a v-on:click="deleteSounds(index)">删除</a></td>
</tr>
</tbody>
</table>
</div>
javascript 逻辑层js
<script type="text/javascript">
//歌单信息列表。初始化数据。
var sound = [{
title: "天空为什么是黑色的",
Singer: "宁夏",
Album: "demoa",
time: "04:30"
}, {
title: "光辉岁月",
Singer: "孙露",
Album: "光辉岁月",
time: "04:15"
}, {
title: "他说",
Singer: "林俊杰",
Album: "2003-2010精品",
time: "05:20"
}, {
title: "怪我太爱你",
Singer: "穆哲熙",
Album: "怪我太爱你",
time: "04:56"
}, {
title: "请先说你好",
Singer: "贺一航",
Album: "请先说你好",
time: "04:49"
}, {
title: "失恋俱乐部",
Singer: "任然",
Album: "失恋俱乐部",
time: "03:24"
}, {
title: "爱过你这件事",
Singer: "西袖",
Album: "爱过你这件事",
time: "04:39"
}];
//实例化 Vue 应用
var vm = new Vue({
// el 渲染 #tab_content,.serch_style 两个标签.这里面是选择器标识。
el: "#tab_content,.serch_style",
//data 需要渲染的数据
data: {
title: "", //声明并初始化 音乐标题
Singer: "", //声明并初始化 音乐歌手
Album: "", //声明并初始化 音乐专辑
time: "", //声明并初始化 音乐时长
serch_txt: "", //声明并初始化 音乐搜索文本
addshow: false, //声明并初始化 音乐信息添加行状态
sound_list: sound //声明并初始化 音乐数据列表
},
//【1：搜索模块】
//计算属性【这里是监听搜索文本框的值，是否有改变。有改变的话对相关对象进行处理】
computed: {
//声明一个函数，serch_method 在标签中 <tr v-for="(item,index) in serch_method"></tr>
//对该行进行循环遍历，渲染数据
serch_method: function () {
var arr_soundlist = this.sound_list; //获取当前音乐列表中的数据（也就是音乐列表）
if (!this.serch_txt) { //这里的 ‘serch_txt’进行了 v-model="serch_txt" 双向绑定。
return arr_soundlist; //判断搜索文本框中的值，是否为空，为空的话立即返回当前音乐列表。
}
var searchStr = this.serch_txt; //不为空的话，保存搜索框内的值，开始进行处理……
searchStr = searchStr.trim().toLowerCase(); //对搜索值，进行统一格式，若是字母的话，转化为‘小写’toLowerCase()函数
arr_soundlist = arr_soundlist.filter((item) => { //对当前获取到的音乐列表进行遍历过滤 filter 用法
//indexOf(),可对指定的字符或字符串进行匹配，若不存在那么就为 ‘-1’
//那么这里就是，对音乐列表的 title 标题字段 进行遍历，是否存在
//如果存在那么此函数，将返回 当前数据信息列表
if (item.title.toLowerCase().indexOf(searchStr) !== -1) {
return item;
}
});
//如果匹配不成功的话，那么将返回一个空的音乐数据列表
return arr_soundlist;
}
}, methods: {
//【2：点击‘添加音乐’按钮触发的事件】
addShow_State: function () {
//这里用到了 v-if 语法 <tr v-if="addshow"></tr> 也就是编辑行是否显示。
//当点击时，判读该值。如果没显示，就显示出来。如果已经显示，那么再次点击将会消失
if (this.addshow)
this.addshow = false;
else
this.addshow = true;
}
//【3：音乐信息添加模块】
, addSounds: function () {
//判读 需填写的字段是否为空，如果为空那么将会弹窗提示。且到此结束，返回出去
if (this.title == "" || this.time == "" || this.Singer == "" || this.Album == "")
{
swal({
title: "提示",
text: "请填写歌曲信息完整",
type: 'warning'
});
return;
}
//否则，将音乐信息保存在 音乐列表数组内去，也就是向数组追加一条
sound.push({ "title": this.title, "time": this.time, "Singer": this.Singer, "Album": this.Album });
//且消失编辑行以及清空字段
this.addshow = false;
this.title = this.time = this.Singer = this.Album = "";
}
//【4：修改信息模块】
, updateSounds: function (index) {
//这里 index 是形参，也就是说，当每一个修改按钮，点击的时候都会传递一个，当前所在行的索引。
//这索引 不仅可表示当前所在行，还能依据索引获取到，数据列表中的指定的项。
//那么修改操作就是对指定数组的项进行修改。
let data = sound[index]; //获取数据列表中的指定的项。
//这里 swal 就是调用 sweetalert2.min.js 中的弹窗。比 'alert '功能要强大。
//可以在弹窗的同时，将html 作为内容输出。那么修改的操作就是，给出四个文本框，
//将原始值，赋值进去，让用户去修改，且声明标识ID（用来在最后依据ID获取到Value值）。
//showCancelButton 启动取消按钮 默认有一个确定按钮
swal({
title: "修改提示", //弹窗显示标题
html: //弹窗显示内容
"<div><p>音乐标题:<input id=\"title\" value=" + data.title + " ></input></p>" +
" <p>音乐歌手:<input id=\"Singer\" value=" + data.Singer + "></input></p>" +
" <p>音乐专辑:<input id=\"Album\" value=" + data.Album + "></input></p>" +
"<p>音乐时长:<input id=\"time\" value=" + data.time + "></input></p></div>",
showCancelButton: true, //是否启用取消按钮
confirmButtonText: '确定修改', //指定确定按钮的文本
cancelButtonText: '取消修改' //指定取消按钮的文本
}).then((result) => { //回调函数
if (result.value) { //判断是否点击了确定修改
let title = document.getElementById('title').value; //声明变量，获取修改后音乐标题
let Singer = document.getElementById('Singer').value; //声明变量，获取修改后音乐歌手
let Album = document.getElementById('Album').value; //声明变量，获取修改后音乐专辑
let time = document.getElementById('time').value; //声明变量，获取修改后音乐时长
//这个时候就可以，把获取到的值，使用 splice 方法对指定项进行替换
//这一步，建议要验证相关值，是否合法，合法才可以替换
sound.splice(index, 1, { "title": title, "time": time, "Singer": Singer, "Album":Album });
}
});
}
//【删除指定行的方法】
, deleteSounds: function (index) {
//在一个方法中调用 另一个方法
this.$options.methods.deletedMethod(function callback() {
//使用 splice 方法对指定项进行删除
sound.splice(index, 1);
})
//【一键删除】
}, deleteAllsound: function () {
this.$options.methods.deletedMethod(() => {
//直接数组赋空
sound = [];
this.sound_list = sound; //刷新
})
}
,//【封装一个删除的方法。 形参为一个函数】
deletedMethod: function (callback) {
swal({
title: '确定删除吗?',
text: "全部删除了以后就不恢复不了哦！",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
cancelButtonText: '取消',
confirmButtonText: '确定删除!'
}).then((result) => {
if (result.value) {
callback()
}
})
}
}
});
</script>
1）v-model： Vue 对数据的双向绑定。
2）v-on:click： Vue 将对标签的 click 事件进行绑定。
3）v-if： Vue 判断相关值，来决定是否渲染里面的dom。
4）v-for：对指定集合进行遍历渲染音乐信息列表。
5）toLowerCase()：转小写。
6）Filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
7）splice（）方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
8) This.options: Vue的实例属性$options是用来获取定义在data外的数据和方法的。
这里的样式是我自己写的，没有用到bootstrap或其他框架，要是喜欢，可以拿去凑合凑合用
<style>
body {
width: 1500px;
overflow: hidden;
background-color: rgb(30,30,30);
}
.tab_style {
margin-top: 1px;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
.tab_style th {
border: 1px solid rgba(60,60,60,0.5);
height: 25px;
font-size: 12px;
color: #808080;
}
.tab_style td {
border: 1px solid transparent;
height: 30px;
text-align: center;
}
.tab_style a {
margin-right: 10px;
}
.tab_style a:hover {
cursor: pointer;
color: red;
font-weight: 700;
}
.color_style1 {
color: #808080;
font-size: 11px;
}
.color_style2 {
color: white;
font-size: 13px;
}
.serch_style {
width: 100%;
height: 50px;
text-align: center;
padding: 30px;
display: inline-block;
}
.serch_input {
width: 300px;
height: 30px;
border-style: none;
padding-left: 10px;
outline: none;
display: inline-block;
background-color: rgba(0,0,0,0.5);
color: white;
}
.serch_submt {
width: 50px;
height: 32px;
margin-top: 10px;
position: relative;
color: black;
top: 1px;
background-color: rgba(255,255,255,0.8);
}
.serch_submt:hover {
background-color: rgba(255,255,255,0.6);
}
tr:nth-child(2n) {
background-color: rgb(40,40,40);
}
</style>
初步总结
【1】Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
【2】只要绑定相关标签的容器就好了，那么这个时候。数据和dom已经被 建立了关联，所有东西都是响应式的。当这些数据改变时，视图会进行重渲染。
【3】值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
【4】当然例外的是freeze 对象 。如果data 为此对象，那么在后期是不能被修改的，有点类似于常量。
【5】我们不仅可以把数据绑定在dom的文本中或attr 指令，还可以绑定在dom 标签的结构中去。
【6】所有的 DOM 操作都由 Vue 来处理。
【7】需要明白所有的 Vue 组件都是 Vue 实例。
那今天就分享到这里，要是有不对的地方还请各位大神指出，诚恳接受批评。谢谢！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
