基于Vue开发备忘录

目录

  • 1、首先画出UI界面
  • 2 重点是Vue的使用
    • 2.1 首先先导入vue的js文件
    • 2.2 然后再你的body界面创建一个vue的根节点
    • 2.4 画好之后进行vue的操作了
      • 2.4.1 创建vue对象
      • 2.4.2 vue对象里面的el属性
      • 2.4.3 vue对象里面的data属性
      • 2.4.4 vue对象里面的computed属性
      • 2.4.5 vue对象里面的methods属性
      • 2.4.6 vue对象里面的watch属性
      • 2.4.7 这里面的属性远不止这些,具体用法以官方文档为主
  • 3 vue操作部分
    • 3.1 解释里面map和finter两个数组的api
      • 3.1.1 map
      • 3.1.2 filter
    • 3.2 解释unshift
  • 4 解释标签内的属性
    • 4.1 v-model的解释
    • 4.2 v-bind的解释
    • 4.3 v-on的解释
    • 4.3 v-show和v-if
    • 4.4 v-for的解释
    • 4.5 通过v-bind对class进行操作
    • 4.6 {{操作}}操作
    • 4.7 v-on:keyup.enter的解释
    • 4.8 关于深度监听属性
  • 5 自己的心得
  • 6 源码

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要操作的对象,可以对里面的节点进行操作

## 2.3 然后你就可以在里面画制你的备忘录UI了 这里不多说,等UI画好之后在进行vue的操作

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博客

当然这都是个人见解,仅此而已。

你可能感兴趣的:(小刘,vue.js,css,前端)