前端框架Vue.js与sweetalert2.min.js结合实现tabe添删改查（CRUD）
前言
作为一个学生的我，很清楚的知道 “纸上得来终觉浅,绝知此事要躬行。知识一定不仅局限于课堂”。所以今天再次自学了关于“前端框架的知识——Vue.js”;那么接下来分享一下我今天的成果。vue.js与sweetalert.js关于table的CRUD。
分享内容
运行整体效果
1：引用相关js
<script src="js/sweetalert2.min.js">script>
<link rel="stylesheet" href="css/sweetalert2.min.css">
<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 在标签中 音乐标题:+ data.title + " >
" +
" 音乐歌手:+
data.Singer + ">" +
" 音乐专辑:+
data.Album + ">" +
"音乐时长:+
data.time + ">",
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或其他框架，要是喜欢，可以拿去凑合凑合用
初步总结
【1】Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
【2】只要绑定相关标签的容器就好了，那么这个时候。数据和dom已经被 建立了关联，所有东西都是响应式的。当这些数据改变时，视图会进行重渲染。
【3】值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
【4】当然例外的是freeze 对象 。如果data 为此对象，那么在后期是不能被修改的，有点类似于常量。
【5】我们不仅可以把数据绑定在dom的文本中或attr 指令，还可以绑定在dom 标签的结构中去。
【6】所有的 DOM 操作都由 Vue 来处理。
【7】需要明白所有的 Vue 组件都是 Vue 实例。
那今天就分享到这里，要是有不对的地方还请各位大神指出，诚恳接受批评。谢谢！