1、首先画出UI界面
我这里是自己画的一款备忘录的UI界面，仅供参考，仅供参考，仅供参考！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#app {
width: 60%;
background-color: #fff;
border: 1px solid black;
box-shadow: 0px 5px 5px 0px;
margin: auto;
border-radius: 5px;
}
#title {
border-bottom: 1px solid black;
text-align: center;
width: 100%;
}
#input {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px 0px;
}
#input>input {
width: 80%;
height: 30px;
padding: 5px;
}
#memoBox {
border: 1px solid black;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#memoBox>.memo {
border: 1px solid black;
width: 98%;
display: flex;
flex-direction: row;
margin: 5px 0px;
border-radius: 10px;
position: relative;
}
#memoBox>.memo>div {
display: flex;
flex-direction: row;
align-items: center;
}
#memoBox>.memo>div:nth-child(1)>input {
margin-right: 10px;
margin-left: 10px;
}
#memoBox>.memo>div:nth-child(2) {
width: 7%;
position: absolute;
right: 10px;
top: 12px;
}
#memoBox>.memo>div:nth-child(2)>button {
border: none;
color: #fff;
background-color: red;
width: 100%;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
border-radius: 5px;
}
.shadow {
transition: all 0.5s;
box-shadow: 1px 1px 1px 1px;
}
#operation {
border-top: 1px solid black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
}
#operation>div:nth-child(1) {
display: flex;
flex-direction: row;
align-items: center;
font-size: 13px;
}
#operation>div:nth-child(1)>input {
margin: 0px 5px 0px 20px;
}
#operation>div:nth-child(3) {
margin-right: 20px;
}
#operation>div:nth-child(3)>button {
border: none;
color: #fff;
background-color: red;
width: 100%;
height: 30px;
font-size: 14px;
border-radius: 5px;
}
.throu {
text-decoration: line-through;
}
</style>
<title>小刘备忘录</title>
</head>
<body>
<div id="app">
<!-- 标题标签 -->
<div id="title">
<h3>小刘备忘录</h3>
</div>
<!-- 输入框 -->
<div id="input">
<input type="text" placeholder="请输入您的备忘(1~30个字)" v-on:keyup.enter="addList" />
</div>
<!-- 备忘录便签主体 -->
<div id="memoBox" v-for="item in list">
<div class="memo" v-bind:class="{shadow : item.isstyle}" v-on:mouseenter="showYes(item.id)"
v-on:mouseleave="showNo(item.id)">
<div>
<input type="checkbox" v-model="item.ischecked">
<p v-bind:class="{throu : item.ischecked}">{{item.data}}</p>
</div>
<div v-show="item.isstyle">
<button v-on:click="del(item.id)">删除</button>
</div>
</div>
</div>
<!-- 下面操作领域 -->
{{obtainlist}}
<div id="operation">
<div>
<input type="checkbox" v-bind:checked="choice" v-on:click="clickChoice">
<p>全选/取消</p>
</div>
<div>
<p>{{Selected}}/{{this.list.length}}</p>
</div>
<div>
<button v-on:click="delArr">删除所有选中</button>
</div>
</div>
</div>
</body>
</html>
2 重点是Vue的使用
2.1 首先先导入vue的js文件
可以去官网上面下载
我这里提供官方文档地址：安装 — Vue.js
下载好之后会有一个js文件，然后导入你的项目中并且你需要的界面导入，以备忘录这个项目为例
2.2 然后再你的body界面创建一个vue的根节点
意思是把这个根节点作为vue要操作的对象，可以对里面的节点进行操作
</div>
2.4 画好之后进行vue的操作了
2.4.1 创建vue对象
<script>
var app = new Vue({});
</spript>
2.4.2 vue对象里面的el属性
el属性就是前面所说的作为vue操作的根节点
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
});
</spript>
2.4.3 vue对象里面的data属性
data属性专门存储数据的地方，类似于微信小程序的data
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
data: {
}
});
</spript>
2.4.4 vue对象里面的computed属性
computed属性也叫计算属性，是vue生命周期的一部分
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
data: {
},
//计算属性
computed: {
}
});
</spript>
2.4.5 vue对象里面的methods属性
methods属性是使用最多的属性，专门管理事件处理方法的
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
data: {
},
//计算属性
computed: {
},
methods:{
}
});
</spript>
2.4.6 vue对象里面的watch属性
watch属性是监听属性，其实和计算属性类似，都有监听属性，但是他们两语义上区别。
计算函数注重属性，监听器注重行为
计算属性核心还是getter和setter
watch是监听某个属性进行对应的操作
var app = new Vue({
//选择#app作为根节点
el: "#app",
data: {
},
//计算属性
computed: {
},
methods:{
},
//监听器
watch:{
}
});
2.4.7 这里面的属性远不止这些，具体用法以官方文档为主
官方文档地址：介绍 — Vue.js
3 vue操作部分
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
//数据属性
data: {
isOk: true,
list: [
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘一",
ischecked: false,
isstyle: false
},
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘二",
ischecked: false,
isstyle: false
},
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘三",
ischecked: false,
isstyle: false
},
]
},
//计算属性
computed: {
//计数统计
Selected: function () {
let num = 0;
this.list.map(x => {
if (x.ischecked == true) {
num++;
}
})
return num;
},
//备忘条全选时改变
choice: function () {
if (this.list.length == 0) {
return false;
}
if (this.Selected === this.list.length) {
this.isOk = false;
return true;
} else {
this.isOk = true;
return false;
}
},
//导入本地数据
obtainlist: function () {
let localData = localStorage.getItem("list");
if (localData) {
this.list = JSON.parse(localStorage.getItem("list"));
console.log("Data exported from local...");
} else {
console.log("No local data...");
}
}
},
//事件属性
methods: {
//添加备忘
addList(e) {
if (e.target.value.length > 0 && e.target.value.length < 41) {
//创建数组
let addlist = {
id: (Math.floor(Math.random() * 10000)),
data: e.target.value,
ischecked: false,
isstyle: false
}
//加入数组前面
this.list.unshift(addlist);
//清空输入框
e.target.value = "";
} else {
alert("请按格式输入备忘");
}
},
//悬浮样式入
showYes(id) {
this.list.map(x => {
if (x.id == id) {
x.isstyle = true;
}
})
},
//悬浮样式出
showNo(id) {
this.list.map(x => {
if (x.id == id) {
x.isstyle = false;
}
})
},
//全选或者全取消
clickChoice() {
this.list.map(x => {
if (this.isOk) {
x.ischecked = true;
} else {
x.ischecked = false;
}
})
this.isOk = !this.isOk;
},
//删除单个
del(id) {
this.list = this.list.filter(item => item.id != id);
},
//删除已选中
delArr() {
this.list = this.list.filter(item => item.ischecked != true);
}
},
//监听器
watch: {
//list数组长度的变化
list: {
//深度监听
deep: true,
handler(newData, lodData) {
localStorage.setItem("list", JSON.stringify(newData));
}
},
},
});
</script>
3.1 解释里面map和finter两个数组的api
这两个属性都是数组里面的api，能够极大提高我们的生产力
3.1.1 map
map可以比作一个循环，然后list.map(x =>{
})
中的x可以当成增强for循环中的循环出的值
3.1.2 filter
filter是过滤，可以理解为for循环加if判断，设置一个条件将符合条件的数组返回，功能强大。
3.2 解释unshift
unshift也是数组的api之一，他是将内容插入到数组的最前头。
4 解释标签内的属性
4.1 v-model的解释
他是vue组件之一，他发挥的最好地方就是vue的data数据可以和表单的数据进行双向绑定，重点在双向绑定且改变即渲染
4.2 v-bind的解释
也是vue组件之一，他是对数据进行单项绑定，意识就是可以在vue里面对数据进行操作，但是标签里面不能操作数据，小技巧：可以缩写为 ：。
4.3 v-on的解释
vue组件之一，是对标签进行事件绑定一个方法，例如
，然后再vue的methods里面定义跟v-on:click=“pclick()”名字一样的就可以，其中标签中得pclick如果没有传参，括号可以省略，小技巧：可以缩写为 @；
4.3 v-show和v-if
他们两极度相似，可以在里面编写判断,例如：
他们两唯一的区别是if是完全不会渲染到界面上，而show是display：no，但是可以在界面上看到。
4.4 v-for的解释
vue组件之一，也是这个项目的灵魂之一，举例：
list是指你要渲染的值
item是通过for循环出来的值，也相当于增强for循环，通过in连接，
4.5 通过v-bind对class进行操作
举例：v-bind:class=“{shadow : item.isstyle}==true”，可以再里面写判断条件
shadow是已经编写好的一个class属性的css优化，然后通过item.isstyle的值对shadow这个class是否使用进行操作。
4.6 {{操作}}操作
两个花括号可以直接引用ve里面的属性并且进行一些简单的操作。
4.7 v-on:keyup.enter的解释
v-on是绑定事件，然后keyup是输入键盘时出发的事件，.enter是keyup的后缀属性，意思为只有点击Enter键是才会触发的事件
4.8 关于深度监听属性
因为我们的watch只会监听一个属性的表面，如果说一个单一得值还好，如果是多层次的数组那里面值的变化就不会监听到了，只会监听表现list的长度、名称、等等的变化，所以就需要我们想办法深度监听，我查询到了一种方法，运用递归的形式来进行深度监听，但是没想到vue自带深度监听的方法，只需要多加两个属性即可
//监听器
watch: {
//监听list数组长的变化
list: {
//开启深度监听
deep: true,
//深度监听变化后的方法，里面的两个参数，newData和lodData
//一个是新的值newData，一个是旧的值lodData
handler(newData, lodData) {
localStorage.setItem("list", JSON.stringify(newData));
}
},
},
5 自己的心得
vue经过我这两天的学习后，我发现和微信小程序的操作大题都相似，但又比微信小程序强大许多，因为vue的监听渲染非常的强大，可以对vue里面的值操作并且能够实现实时渲染，只要只发生改变网页上的值就可以在第一时间更新。
6 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../js/vue.js"></script>
<style>
#app {
width: 60%;
background-color: #fff;
border: 1px solid black;
box-shadow: 0px 5px 5px 0px;
margin: auto;
border-radius: 5px;
}
#title {
border-bottom: 1px solid black;
text-align: center;
width: 100%;
}
#input {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px 0px;
}
#input>input {
width: 80%;
height: 30px;
padding: 5px;
}
#memoBox {
border: 1px solid black;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#memoBox>.memo {
border: 1px solid black;
width: 98%;
display: flex;
flex-direction: row;
margin: 5px 0px;
border-radius: 10px;
position: relative;
}
#memoBox>.memo>div {
display: flex;
flex-direction: row;
align-items: center;
}
#memoBox>.memo>div:nth-child(1)>input {
margin-right: 10px;
margin-left: 10px;
}
#memoBox>.memo>div:nth-child(2) {
width: 7%;
position: absolute;
right: 10px;
top: 12px;
}
#memoBox>.memo>div:nth-child(2)>button {
border: none;
color: #fff;
background-color: red;
width: 100%;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;
border-radius: 5px;
}
.shadow {
transition: all 0.5s;
box-shadow: 1px 1px 1px 1px;
}
#operation {
border-top: 1px solid black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
position: relative;
}
#operation>div:nth-child(1) {
display: flex;
flex-direction: row;
align-items: center;
font-size: 13px;
}
#operation>div:nth-child(1)>input {
margin: 0px 5px 0px 20px;
}
#operation>div:nth-child(3) {
margin-right: 20px;
}
#operation>div:nth-child(3)>button {
border: none;
color: #fff;
background-color: red;
width: 100%;
height: 30px;
font-size: 14px;
border-radius: 5px;
}
.throu {
text-decoration: line-through;
}
</style>
<title>小刘备忘录</title>
</head>
<body>
<div id="app">
<!-- 标题标签 -->
<div id="title">
<h3>小刘备忘录</h3>
</div>
<!-- 输入框 -->
<div id="input">
<input type="text" placeholder="请输入您的备忘(1~30个字)" v-on:keyup.enter="addList" />
</div>
<!-- 备忘录便签主体 -->
<div id="memoBox" v-for="item in list">
<div class="memo" v-bind:class="{shadow : item.isstyle}" v-on:mouseenter="showYes(item.id)"
v-on:mouseleave="showNo(item.id)">
<div>
<input type="checkbox" v-model="item.ischecked">
<p v-bind:class="{throu : item.ischecked}">{{item.data}}</p>
</div>
<div v-show="item.isstyle">
<button v-on:click="del(item.id)">删除</button>
</div>
</div>
</div>
<!-- 下面操作领域 -->
{{obtainlist}}
<div id="operation">
<div>
<input type="checkbox" v-bind:checked="choice" v-on:click="clickChoice">
<p>全选/取消</p>
</div>
<div>
<p>{{Selected}}/{{this.list.length}}</p>
</div>
<div>
<button v-on:click="delArr">删除所有选中</button>
</div>
</div>
</div>
<script>
var app = new Vue({
//选择#app作为根节点
el: "#app",
//数据属性
data: {
isOk: true,
list: [
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘一",
ischecked: false,
isstyle: false
},
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘二",
ischecked: false,
isstyle: false
},
{
id: (Math.floor(Math.random() * 10000)),
data: "备忘三",
ischecked: false,
isstyle: false
},
]
},
//计算属性
computed: {
//计数统计
Selected: function () {
let num = 0;
this.list.map(x => {
if (x.ischecked == true) {
num++;
}
})
return num;
},
//备忘条全选时改变
choice: function () {
if (this.list.length == 0) {
return false;
}
if (this.Selected === this.list.length) {
this.isOk = false;
return true;
} else {
this.isOk = true;
return false;
}
},
//导入本地数据
obtainlist: function () {
let localData = localStorage.getItem("list");
if (localData) {
this.list = JSON.parse(localStorage.getItem("list"));
console.log("Data exported from local...");
} else {
console.log("No local data...");
}
}
},
//事件属性
methods: {
//添加备忘
addList(e) {
if (e.target.value.length > 0 && e.target.value.length < 41) {
//创建数组
let addlist = {
id: (Math.floor(Math.random() * 10000)),
data: e.target.value,
ischecked: false,
isstyle: false
}
//加入数组前面
this.list.unshift(addlist);
//清空输入框
e.target.value = "";
} else {
alert("请按格式输入备忘");
}
},
//悬浮样式入
showYes(id) {
this.list.map(x => {
if (x.id == id) {
x.isstyle = true;
}
})
},
//悬浮样式出
showNo(id) {
this.list.map(x => {
if (x.id == id) {
x.isstyle = false;
}
})
},
//全选或者全取消
clickChoice() {
this.list.map(x => {
if (this.isOk) {
x.ischecked = true;
} else {
x.ischecked = false;
}
})
this.isOk = !this.isOk;
},
//删除单个
del(id) {
this.list = this.list.filter(item => item.id != id);
},
//删除已选中
delArr() {
this.list = this.list.filter(item => item.ischecked != true);
}
},
//监听器
watch: {
//list数组长度的变化
list: {
//深度监听
deep: true,
handler(newData, lodData) {
localStorage.setItem("list", JSON.stringify(newData));
}
},
},
});
</script>
</body>
</html>
关于vue的出现，然后jquery的使用率逐渐在下降，这可能是未来的一个趋势所在，在现在的一些招聘上面的要求对vue的掌握越来越重要了。现在很多网站都是基于vue去开发的，然后我也在博客上我也看到了一些jquery被取消依赖的博文
比如jQuery 已死？_CSDN资讯的博客-CSDN博客
当然这都是个人见解，仅此而已。
3172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
