Vue.js学习笔记

1 Vue.js基础

Vue.js介绍

vuejs 渐进式 JavaScript 框架

Vue.js 如何应用

1 在普通html项目中,引入VUE.JS

Hb 的项目 生成的 默认是3.X版本

修改为 2.6.10版本

在html head 里 引进js文件

    <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>

2 利用vue cli 搭建工程模式

Hello Vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!-- 插值表达式:通过两个大括号,把变量包起来 -->
            {{showText}}
        </div>
        <script>
            let vm = new Vue({
                el: '#app',  // el = element的缩写 挂载到那个元素上,或者将来渲染到那个区域 id #app css基础选择器 # id . class 
                data:{
                    showText : 'Hello Vue'
                }
            });
        </script>
    </body>
</html>

标签绑定_v-bind_单向数据绑定

vue v- 叫做vue的指令

v-bind 可以动态修改HTML标签的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #ex1 {
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            .change {
                background-color: blue !important;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 插值表达式:通过两个大括号,把变量包起来 -->
            {{ showText }}

            <!-- v-bind 可以动态修改HTML标签的属性 -->
            <span v-bind:title="showText"> 鼠标放在这里,看看显示什么 </span>
            <div id="ex1" v-bind:class="change">

            </div>
        </div>
        <script>
            let vm = new Vue({
                el: '#app', // el = element的缩写 挂载到那个元素上,或者将来渲染到那个区域 id #app css基础选择器 # id . class 
                data: {
                    showText: 'Hello Vue',
                    change: 'change'
                }
            });
        </script>
    </body>
</html>

标签绑定_v-model_双向数据绑定 (重点)

v-model 是应用在表单元素中的。 表单元素 input select

狭义:

它会把表单元素input value值 和 data里定义的属性值进行双向绑定。

所谓 双向绑定 VM层数据绑定,一句话 你变我也变 我变你也变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #ex1 {
                width: 200px;
                height: 200px;
                background-color: aqua;
            }

            .change {
                background-color: blue !important;
            }
        </style>
    </head>
    <body>
        <!-- vue 的双向绑定   MVC MV VM  是 vm的绑定 -->

        <div id="app">
            <!-- html渲染的内容 view -->
            <input type="text" name="" id="" v-model="input" value="" />
            <br>
            {{input}}
        </div>
        <script>
            let vm = new Vue({
                el: '#app', 
                data: {   // model 数据
                    showText: 'Hello Vue',
                    change: 'change',
                    input: ''
                }
            });
        </script>
    </body>
</html>

标签绑定_v-on_事件绑定(重点)

js 事件:developer.mozilla.org/zh-CN/docs/…

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">

        </style>
    </head>
    <body>

        <div id="app">
            <button type="button" @click="tishi(1)">提交</button>
            <div v-on:dblclick="tishi2">
                考虑到房价肯定撒就发撒旦
            </div>
            <input type="text" id="" @focus="tishi3('你好','新世界')" value="" />
        </div>
        <script>

            let vm = new Vue({
                el: '#app',
                data: { // model 数据
                    showText: 'Hello Vue',
                    change: 'change',
                    input: '',
                    num: 5
                },
                methods: { 
                //方法
                // 属性中,方法如何声明. k v  方法和方法之间,要用逗号分割.
                // 在传统js中,我们用onclick来触发单击事件,在vue中,我们要用v-on 这个v指令来触发事件
                // 语法糖 缩写 v-on 用 @ 字符来替代 v-on:
                // 语法糖 缩写 v-bind: 直接用 : 来替代
                    tishi:function (arg) {
                        alert(arg)
                    },
                    tishi2:function () {
                        alert('另一个双击我的按钮')
                    },
                    tishi3:function (arg1,arg2) {
                        alert(arg1)
                        alert(arg2)
                    }

                }
            });
        </script>
    </body>
</html>

标签绑定_v-text_v-html_v-show

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">

        </style>
    </head>
    <body>

        <div id="app">
            <!-- div.innerText
            v-text:innerText 显示文本,你有什么,我原样输出
            v-html:innerHtml 显示并渲染html标签
             v-show: 原理:他接受一个值,这个值一定是真或假的布尔值.当时真的时候,就会显示. 当是假的时候,它会给该元素追加style display none
             -->
            <span v-text="html" v-show="2>1"></span>
            <!-- 和下面的一样 -->
            <br>
            {{ showText }}


            <button type="button" @click="changeShow">改变显示</button>
        </div>


        <div id="app2">
            {{ showText }}
        </div>


        <script>
            let vm = new Vue({
                el: '#app',
                data: { // model 数据
                    showText: 'Hello Vue',
                    change: 'change',
                    input: '',
                    num: 5,
                    msg: '唐山港集团',
                    html: '<h1>唐山港集团</h1>', //innerHtml
                    isShow: true
                },
                methods: {
                    /**
                     * 动态改变data中isShow的值 每次反转
                     */
                    changeShow: function() {

                        // 单击一次,取反,当它是ture的时候,变成false;当它是false,变成true
                        this.isShow = !this.isShow
                    }
                }
            });


        </script>
    </body>
</html>

标签绑定_v-if-else(重点)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">

        </style>
    </head>
    <body>

        <div id="app">
            <!-- 
                v-if指令: 根据v-if里面的布尔值,来决定是否在html里,渲染此DOM对象,它和vshow的区别在于,它是真正的不渲染,不占位.
                v-else指令:用法,1是,前面的dom对象中必须有 v-if  v-else 直接写,不用再=什么

                v-else-if,他们的结构同下面,理解.

                if () {
                    显示A
                }else if(){
                    显示B
                }else if(){
                    显示C
                }else{
                    不是ABC
                }

                v-show:
             -->
            <!-- <table border="" cellspacing="" cellpadding="" v-if="havedata">
                <tr><th>序号</th><th>姓名</th><th>电话</th></tr>
                <tr><td>1</td><td>沈国福</td><td>15031519880</td></tr>
                <tr><td>2</td><td>田华</td><td>15331519880</td></tr>
            </table>

            <span v-else>没有更多记录了</span>
             -->

            <div v-if="type === 'A'">
                A
            </div>
            <div v-else-if="type === 'B'">
                B
            </div>
            <div v-else-if="type === 'C'">
                C
            </div>
            <div v-else>
             Not A/B/C
            </div>


            <br>
            <br>
            <button type="button" @click="changeA">改成A</button>
            <button type="button" @click="changeB">改成B</button>
            <button type="button" @click="changeC">改成C</button>
            <button type="button" @click="changeD">改成D</button>
        </div>




        <script>
            let vm = new Vue({
                el: '#app',
                data: { // model 数据
                    showText: 'Hello Vue',
                    change: 'change',
                    input: '',
                    num: 5,
                    msg: '唐山港集团',
                    html: '<h1>唐山港集团</h1>', //innerHtml
                    havedata: true,
                    type: 'A'
                },
                methods: {
                    /**
                     * 动态改变data中isShow的值 每次反转
                     */
                    changeA: function() {
                        this.type = 'A'
                    },
                    changeB: function() {
                        this.type = 'B'
                    },
                    changeC: function() {
                        this.type = 'C'
                    },
                    changeD: function() {
                        this.type = 'D'


                    },


                }
            });
        </script>
    </body>
</html>

一些问题

  • MD文件如何查看,编辑?

  • Vue data里能否使用变量赋值?

  • Vue data是一个对象,看API可以用方法,能否使用方法?

    // 1 用对象的方式,来构建data
    // data:{
    //    message : '唐山港集团欢迎您!'
    // },
    // 2 以方法的方式,来构建data,return 一个值 值是一个对象。
    // data(){
    //    return {
    //        message: '唐山港集团欢迎您2!'
    //    }
    // }
    // 3 以匿名函数的方式来构建data
    // data:function () {
    //    return {
    //        message: '唐山港集团欢迎您3!'
    //    }
    // }
  • $data是什么?

    $data:是普通js变量

    vm.$data.message = vm.message

  • axios离线引进

标签绑定_v-for (重点)

js for 循环 遍历

fori forli forof

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>V-FOR</title>
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <!--对数组循环输出 -->
            <ul>
                <li v-for="(item,index) in deptList" :key="index">
                    {{index+1}}-{{item}}
                </li>
            </ul>
            <!-- 对对象进行遍历输出 -->

            <ul>
                <li v-for="(item,key,index) in zhangsan">
                    {{index+1}}--{{key}}--{{item}}
                </li>
            </ul>

            <!-- 对数字进行循环输出 -->
            <div style="width: 330px;height: 330px;background-color: #1CBBB4; display: flex; flex-wrap: wrap;">
                <div style="width: 100px; height: 100px;margin: 5px; background-color: #E03997; text-align: center;line-height: 100px;"
                    v-for="i in 9">{{i}}

                </div>
            </div>

            <!-- 对数组对象进行输出 -->

            <ul>
                <li v-for="item in result" :key="item.userId">
                    userId:{{item.useId}} <br>
                    姓名:{{item.userName}}<br>
                    电话:{{item.tel}}
                </li>
            </ul>

        </div>


        <script type="text/javascript">
            let vm = new Vue({
                el: '#app',
                data: {
                    message: '唐山港集团欢迎您!',
                    deptList: [
                        '综合管控部',
                        '商务软件科',
                        '安质管控部',
                        '生产软件科'
                    ],
                    zhangsan: {
                        name: '张三',
                        sex: 0, // 0表示男 1表示女
                        age: 16
                    },
                    result: [{
                        "Id": 192,
                        "userName": "1",
                        "tel": "1"
                    }, {
                        "Id": 191,
                        "userName": "",
                        "tel": ""
                    }, {
                        "Id": 182,
                        "userName": "宋运城",
                        "tel": "654321"
                    }, {
                        "Id": 180,
                        "userName": "",
                        "tel": "冀B9235K"
                    }, {
                        "Id": 179,
                        "userName": null,
                        "tel": "冀B9235K"
                    }, {
                        "Id": 178,
                        "userName": null,
                        "tel": "冀B9235K"
                    }, {
                        "Id": 176,
                        "userName": null,
                        "tel": "Tsp2022$$$"
                    }, {
                        "Id": 175,
                        "userName": null,
                        "tel": "宋运城"
                    }, {
                        "Id": 168,
                        "userName": null,
                        "tel": "宋运城"
                    }, {
                        "Id": 167,
                        "userName": null,
                        "tel": "564615"
                    }, {
                        "Id": 160,
                        "userName": "测试111",
                        "tel": "123"
                    }, {
                        "Id": 159,
                        "userName": "测试111",
                        "tel": "123"
                    }, {
                        "Id": 158,
                        "userName": "测试111",
                        "tel": "123"
                    }, {
                        "Id": 157,
                        "userName": "苏锦沅",
                        "tel": "9999999"
                    }, {
                        "Id": 156,
                        "userName": "sdf",
                        "tel": "45892361245"
                    }, {
                        "Id": 155,
                        "userName": "tre",
                        "tel": "18596756542"
                    }, {
                        "Id": 154,
                        "userName": "sxt",
                        "tel": "15686425946"
                    }, {
                        "Id": 152,
                        "userName": "马可波罗",
                        "tel": "15234567891"
                    }, {
                        "Id": 150,
                        "userName": "呜呜呜呜",
                        "tel": "12345"
                    }, {
                        "Id": 145,
                        "userName": "111",
                        "tel": "11111111111"
                    }, {
                        "Id": 144,
                        "userName": "111",
                        "tel": "333"
                    }, {
                        "Id": 121,
                        "userName": "userName",
                        "tel": "tel"
                    }, {
                        "Id": 120,
                        "userName": "田华12345",
                        "tel": "394838773"
                    }, {
                        "Id": 118,
                        "userName": "jg",
                        "tel": "12332155"
                    }, {
                        "Id": 117,
                        "userName": "jg",
                        "tel": "12332155"
                    }, {
                        "Id": 113,
                        "userName": "jgtianhua",
                        "tel": "123321"
                    }, {
                        "Id": 112,
                        "userName": "false",
                        "tel": "false"
                    }, {
                        "Id": 109,
                        "userName": "tianhua",
                        "tel": "1234567904"
                    }, {
                        "Id": 106,
                        "userName": "这个我来",
                        "tel": "1852465852"
                    }, {
                        "Id": 102,
                        "userName": "0000",
                        "tel": "0000"
                    }, {
                        "Id": 100,
                        "userName": "张三",
                        "tel": "0000"
                    }, {
                        "Id": 99,
                        "userName": "张三",
                        "tel": "0000"
                    }, {
                        "Id": 97,
                        "userName": "11111",
                        "tel": "11111"
                    }, {
                        "Id": 96,
                        "userName": "12",
                        "tel": "121212"
                    }, {
                        "Id": 95,
                        "userName": "1111",
                        "tel": "1111"
                    }, {
                        "Id": 94,
                        "userName": "菜鸟",
                        "tel": "18858858"
                    }, {
                        "Id": 84,
                        "userName": "测试",
                        "tel": "123333"
                    }, {
                        "Id": 83,
                        "userName": "测试的",
                        "tel": "1234567889"
                    }, {
                        "Id": 78,
                        "userName": "mlmm",
                        "tel": "4234234"
                    }, {
                        "Id": 68,
                        "userName": "冯·诺伊曼",
                        "tel": "321"
                    }, {
                        "Id": 63,
                        "userName": "韩信",
                        "tel": "15234516781"
                    }, {
                        "Id": 62,
                        "userName": "西施",
                        "tel": "12315617890"
                    }, {
                        "Id": 61,
                        "userName": "貂蝉",
                        "tel": "12345678901"
                    }, {
                        "Id": 58,
                        "userName": "孙尚香",
                        "tel": "12345678890"
                    }, {
                        "Id": 57,
                        "userName": "杨玉环",
                        "tel": "12345678901"
                    }, {
                        "Id": 56,
                        "userName": "蔡文姬",
                        "tel": "12345678902"
                    }, {
                        "Id": 55,
                        "userName": "李白",
                        "tel": "12345678901"
                    }, {
                        "Id": 51,
                        "userName": "刘备",
                        "tel": "15013578231"
                    }, {
                        "Id": 34,
                        "userName": "修改结果",
                        "tel": "1665656565"
                    }]
                },

            })
        </script>
    </body>
</html>

标签绑定_v-once 一次

指令汇总

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBEQHBXF-1649923881720)(Vue.js培训笔记.assets/d39d348e686b449e8931f5a85802e3c6tplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

网络通讯(第三方模块)_Axios_ajax(重点)

axios文档: www.axios-js.com/zh-cn/docs/

CURD案例

CURD create update read delete

95% 代码 都是处理CURD

curd首页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CURD</title>
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .title {
                width: 800px;
                margin: 0 auto;
                text-align: center;
            }

            .content {
                width: 800px;
                margin: 0 auto;

            }

            .btns {
                margin: 5px 0 5px;
            }

            button {
                width: 120px;
                height: 40px;
            }

            .small {
                width: 80px;
                height: 30px;
            }

            table {
                border-collapse: collapse;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #7e7e7e;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="title">
                <h1>{{title}}</h1>
            </div>
            <div class="content">
                <div id="">
                    姓名:<input type="text" v-model="userName" /> <button type="button" @click="getUsersList" >查询</button>
                    <button type="button" @click="reset" >重置</button>
                </div>
                <div class="btns">
                    <button type="button" @click="goAdd">添加</button>
                </div>
                <table>
                    <tr>
                        <th width="30px">Id</th>
                        <th width="120px">姓名</th>
                        <th width="120px">电话</th>
                        <th width="120px">操作</th>
                    </tr>
                    <tr v-for="item in usersList" :key="item.userId">
                        <td>{{item.Id}}</td>
                        <td>{{item.userName}}</td>
                        <td>{{item.tel}}</td>
                        <td>
                            <button type="button" class="small" style="margin-right: 30px;"
                                @click="goEdit(item.Id)">修改</button>
                            <button type="button" class="small" @click="delUser(item.Id)">删除</button>
                        </td>
                    </tr>
                </table>

                <div v-if="this.usersList.length == 0">
                    当前没有记录
                </div>
            </div>
        </div>


        <script type="text/javascript">
            let vm = new Vue({
                el: '#app',
                data: {
                    title: '员工管理',
                    usersList: [],
                    userName:''
                },
                mounted() {
                    this.getUsersList()
                },
                methods: {
                    // axios 的回调函数,不要用普通的匿名函数,用箭头函数.否则this的指向不对.
                    getUsersList() {
                        axios({
                            url: 'http://api.0315e.com/index/users',
                            params:{
                                userName:this.userName
                            }
                        }).then((res) => {
                            this.usersList = res.data.result
                        })
                    },
                    delUser(Id) {
                        let ok = confirm('是否删除Id为' + Id + '的记录?')
                        console.log(ok);
                        if (ok == true) {
                            axios({
                                url: 'http://api.0315e.com/index/users',
                                method: 'DELETE',
                                data: {
                                    // userId:userId 如果键值一致,可以省略后面的:userId
                                    Id: Id
                                }
                            }).then((res) => {
                                alert(res.data.msg)
                                this.getUsersList()
                            })
                        } else {
                            console.log('用户取消了操作');
                        }
                    },
                    goEdit(Id) {
                        axios({
                            url: 'http://api.0315e.com/index/users',
                            method: 'PUT',
                            data: {
                                // userId:userId 如果键值一致,可以省略后面的:userId
                                Id: Id,
                                userName:'王大锤',
                                tel:'110'
                            }
                        }).then((res) => {
                            alert(res.data.msg)
                            this.getUsersList()
                        })
                    },
                    goAdd() {
                        window.location.href = 'add.html'
                    },
                    reset(){
                        this.userName = ''
                        this.getUsersList()
                    }



                }
            })
        </script>
    </body>
</html>

add页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>添加员工</title>
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .title {
                width: 800px;
                margin: 0 auto;
                text-align: center;
            }

            .content {
                width: 800px;
                margin: 0 auto;

            }


        </style>
    </head>
    <body>
        <div id="app">
            <div class="title">
                <h1>{{title}}</h1>
            </div>
            <div class="content">
                姓名:<input type="text" v-model="userName" /><br>
                电话:<input type="number" v-model="tel" /><br>

                <button type="button" @click="addUser()" >提交</button>

            </div>
        </div>


        <script type="text/javascript">
            let vm = new Vue({
                el: '#app',
                data: {
                    title: '添加员工',
                    userName:'',
                    tel:''

                },
                mounted() {

                },
                methods: {
                    addUser(){
                        if (this.userName == '') {
                            alert('请录入姓名')
                        }
                        if (this.tel == '') {
                            alert('请录入电话')
                        }
                        axios({
                            url: 'http://api.0315e.com/index/users',
                            method:'POST',
                            data:{
                                userName:this.userName,
                                tel:this.tel
                            }
                        }).then((res) => {
                            console.log(res);
                            alert(res.data.msg)
                        })

                    }
                }
            })
        </script>
    </body>
</html>

edit 没写完
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>编辑员工</title>
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .title {
                width: 800px;
                margin: 0 auto;
                text-align: center;
            }

            .content {
                width: 800px;
                margin: 0 auto;

            }


        </style>
    </head>
    <body>
        <div id="app">
            <div class="title">
                <h1>{{title}}</h1>
            </div>
            <div class="content">
                姓名:<input type="text" v-model="userName" /><br>
                电话:<input type="number" v-model="tel" /><br>

                <button type="button" @click="addUser()" >提交</button>

            </div>
        </div>


        <script type="text/javascript">
            let vm = new Vue({
                el: '#app',
                data: {
                    title: '添加员工',
                    userName:'',
                    tel:''

                },
                mounted() {

                },
                methods: {
                    addUser(){
                        if (this.userName == '') {
                            alert('请录入姓名')
                        }
                        if (this.tel == '') {
                            alert('请录入电话')
                        }
                        axios({
                            url: 'http://api.0315e.com/index/users',
                            method:'POST',
                            data:{
                                userName:this.userName,
                                tel:this.tel
                            }
                        }).then((res) => {
                            console.log(res);
                            alert(res.data.msg)
                        })
                    }
                }
            })
        </script>
    </body>
</html>

一些概念解释

回调函数 函数一种形式

简单点说,一个函数被作为参数传递给另一个函数(在这里我们把另一个函数叫做“otherFunction”),回调函数在otherFunction中被调用。


getUserList(){
    axios({
        url:"http://api.0315e.com/tsg/projects",
        params:{
            projectName:this.projectName
        }
    }).then((res) => {
        this.projects = res.data.result;
    })
},
    (res) => {
        this.projects = res.data.result;
    }
    // 父级函数
    function parentFun (callback) {
        let user = {
            name:'张三'
        }
        callback(user) // 回调函数
    }
// 子级函数
function childFun (data) {
    alert(data.name)
}

parentFun(childFun);



用途:我们需要等到一个操作结束之后再进行下一个操作。简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数

this

this js都关键字 代表一个对象

全局

函数

方法

匿名函数

箭头函数


var name = "冯锐";
//全局 this 指向是window对象  最高级别的对象
// console.log(this);
// 函数中,this调用的是window对象
function fun() {
    console.log(this);
}
// fun()

// 在方法中,方法是定义在对象里面的函数
// 方法
// 匿名函数 this指向是当前对象
// 箭头函数 this 指向上下文中,谁调用ta 指向谁

let me = {
name: '沈国福',
sayHi: function() {
console.log(this.name + '说 Hi');
},
sayHello: () => {
console.log(this.name + '说 Hello');
}
}

me.sayHi()
me.sayHello()

内置对象

内置对象 BOM DOM

www.runoob.com/jsref/obj-w…

事件对象

事件对象 $event

操作DOM ref

textarea 的双向数据绑定

我们之前讲过 input 的双向数据绑定

textarea 也可以进行双向数据绑定

checkbox 的双向数据绑定

checkbox 也可以双向数据绑定, 不过绑定的值, 最好是布尔值

如果是多个 checkbox, 建议把变量做成数组, 同时一定要有 value 属性和它的值

选中状态:


      <div id="app">
          我的兴趣爱好:
          <br>
          <input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书
          <input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟
          <input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒
          <input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头
          <button type="button" @click="submit">提交</button>
  </div>
  <hr>
  <script>
      let vm = new Vue({
          el: '#app',
          // vd
          data() {
              return {
                  checkboxValue: [],
              }
          },
          mounted() {
              this.getCheck()
          },
          // vm
          methods: {
              getCheck() {
                  this.checkboxValue = ["2", "3"]
              },
              submit() {
                  console.log(this.checkboxValue);
              }
          },
      });
  </script>

radio 的双向数据绑定

单选框也可以做双向数据绑定, 绑定的变量给一个空字符串即可

<div id="app">
            <!-- 复选框 -->
            我的兴趣爱好:
            <br>
            <input type="checkbox" name="fav" v-model="checkboxValue" value="1" /> 看书
            <input type="checkbox" name="fav" v-model="checkboxValue" value="2" /> 抽烟
            <input type="checkbox" name="fav" v-model="checkboxValue" value="3" /> 喝酒
            <input type="checkbox" name="fav" v-model="checkboxValue" value="4" /> 烫头
            <button type="button" @click="submit">提交</button>

            <hr>
            <!-- 单选 -->
            <h1>性别1: {{radioValue}}</h1>

            男:<input v-model="radioValue" type="radio" name="sex" value="男" /> 
            女:<input v-model="radioValue" type="radio"  name="sex" value="女" />
            待定:<input v-model="radioValue" type="radio" name="sex" value="待定" />
        </div>

        <script>
            let vm = new Vue({
                el: '#app',
                // vd
                data() {
                    return {
                        textarea: "",
                        checkboxValue: [],
                        radioValue: ''
                    }
                },

                // vm
                methods: {
                    submit() {
                        console.log(this.radioValue);
                    }
                },

            });
        </script>

下拉框的双向数据绑定

下拉框也可以进行双向数据绑定,变量可以给一个空字符串

如果牵涉到默认选中状态, 可以修改 selectValue 的值

如果想把第一项变成提示信息, 可以这么写

<select v-model="selectValue">
    <option value="" disabled>请选择你的城市</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
</select>

如果 option 的数据不是写死的, 而是从后台传过来的, 我们可以在变量中定义 option 的值

<!DOCTYPE html>

    <body>
        <div id="root">
            <h1>城市: {{selectValue}}</h1>
            <select v-model="selectValue">
                <option value="" disabled>请选择你的城市</option>
                <option v-for="item in ajaxValue" :value="item.value">{{item.text}}</option>
            </select>
        </div>
    </body>

</html>

CURD案例(优化)

1 优化 项目简介 改单击查看按钮 弹出对话框 通过传递数组下标[索引] 来获取数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <style type="text/css">
            html,
            body,
            #app {
                height: 100%;
            }

            .mask {
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .7);
                z-index: 999;
            }

            .mask .intro {
                width: 500px;
                height: 250px;
                background-color: #FFFFFF;
                padding: 10px;
            }

            .mask .header {
                text-align: center;
            }

            .mask .header span {
                float: right;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1>{{title}}</h1>
            <hr>
            <div class="query">
                项目名称:<input type="text" v-model="projectName" />
                <button class="btn" type="button" @click="getUserList()">查询</button>
                <button class="btn" type="button" @click="clearAll()">重置</button>
                <button class="btn green" type="button" @click="goAdd()">增加</button>
            </div>
            <div class="tb">
                <table>
                    <tr>
                        <th style="width: 50px;">项目ID</th>
                        <th style="width: 80px;">项目名称</th>
                        <th style="width: 50px;">项目经理</th>
                        <th style="width: 50px;">建设年份</th>
                        <th style="width: 50px;">建设方式</th>
                        <th style="width: 50px;">使用单位</th>
                        <th style="width: 50px;">开发商</th>
                        <th style="width: 200px;">项目简介</th>
                        <th style="width: 80px;">操作</th>
                    </tr>
                    <tr v-for="item,index in projects" :key="item.projectId">
                        <td class="mid">{{item.projectId}}</td>
                        <td>{{item.projectName}}</td>
                        <td>{{item.projectManager}}</td>
                        <td>{{item.projectYear}}</td>
                        <td>{{item.projectMode}}</td>
                        <td>{{item.projectUser}}</td>
                        <td>{{item.projectDevelopers}}</td>
                        <td><button class="btn" type="button" @click="showIntro(index)">查看</button></td>
                        <td class="mid">
                            <button class="btn" type="button" @click="goEdit(item.projectId)">修改</button>
                            <button class="btn red" type="button" @click="delUser(item.projectId)">删除</button>
                        </td>
                    </tr>

                </table>
                <div v-if="projects.length == 0" class="tishi">
                    未找到任何记录!
                </div>
            </div>
            <!-- 模态框的动态切换 用v-show  -->
            <div class="mask" v-show="isIntroShow" @click="hiddenIntro">
                <div class="intro">
                    <div class="header">
                        {{ maskProjectName }}-简介
                        <span @click="hiddenIntro">
                            ❌
                        </span>
                    </div>
                    <hr>
                    <div class="content">
                        {{ maskProjectIntro }}
                    </div>

                </div>
            </div>
        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    title: '项 目 台 账',
                    projectName: '',
                    projects: [],
                    isIntroShow: false,
                    maskProjectName:'',
                    maskProjectIntro:''
                },
                mounted() {
                    this.getUserList();
                },
                methods: {
                    /**
                     * 弹出介绍模态框
                     */
                    showIntro(index) {
                        this.isIntroShow = true
                        console.log(index);
                        this.maskProjectName = this.projects[index].projectName
                        this.maskProjectIntro = this.projects[index].projectIntro
                    },
                    /**
                     * 隐藏介绍模态框
                     */
                    hiddenIntro() {
                        this.isIntroShow = false
                    },
                    getUserList() {
                        axios({
                            url: "http://api.0315e.com/tsg/projects",
                            params: {
                                projectName: this.projectName
                            }
                        }).then((res) => {
                            this.projects = res.data.result;
                        })
                    },
                    clearAll() {
                        this.projectName = null;
                        this.getUserList();
                    },
                    goAdd() {
                        window.location.href = "addUser.html";
                    },
                    goEdit(projectId) {
                        window.location.href = "editUser.html?" + projectId;
                    },
                    delUser(projectId) {
                        let ok = confirm("确定要删除ID为" + projectId + "的项目吗?");
                        if (ok == true) {
                            axios({
                                url: "http://api.0315e.com/tsg/projects",
                                method: "DELETE",
                                data: {
                                    projectId
                                }
                            }).then((res) => {
                                alert(res.data.msg);
                                if (res.data.code == 200) {
                                    this.getUserList();
                                }
                            })
                        }
                    }
                }
            });
        </script>
    </body>
</html>

2 添加项目总数的显示

<h2>当前项目总数:{{ projects.length}}</h2>

3 新增和修改合并为 单页面

4 新建和修改部分字段采用select 和 radio双向绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="css/add.css" />

    </head>
    <body>
        <div id="app">
            <h1>{{title}}</h1>
            <hr>
            <div class="new">
                项目名称:<input type="text" v-model="projectName" /><br>
                项目经理:
                <select v-model="projectManager">
                    <option value ="" disabled="true">---请选择---</option>
                    <option :value="item.managerId" v-for="(item,index) in projectManagers">{{ item.managerName }}</option>
                </select>

                <br>
                建设年份:<input type="text" v-model="projectYear" /><br>
                <span style="float: left; padding-left: 57px;">
                    建设方式:
                </span>
                <span v-for="(item,index) in projectModes">
                    <input type="radio" name="projectModes" v-model="projectMode" :value="item.typeId"  /> {{item.typeName}}
                </span>

                <br>
                使用单位:<input type="text" v-model="projectUser" /><br>
                开&nbsp;&nbsp;发&nbsp;&nbsp;商:<input type="text" v-model="projectDevelopers" /><br>
                项目简介:<textarea v-model="projectIntro"></textarea><br>
                <button class="btn" type="button" @click="addUser()">确定</button>
                <button class="btn" type="button" @click="clearAll()">重置</button>
                <button class="btn" type="button" @click="goIndex()">返回</button>
            </div>

        </div>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    title: '新 增 项 目',
                    projectName: '',
                    projectManager: '',
                    projectYear: '',
                    projectMode: '',
                    projectUser: '',
                    projectDevelopers: '',
                    projectIntro: '',
                    projectManagers:[],
                    projectModes:[]
                },
                mounted() {
                    this.getManagers()
                    this.getType()
                },
                methods: {
                    /**
                     * 获取项目经理列表
                     */
                    getManagers(){
                        axios({
                            url:'./data/managers.json'
                        }).then((res) => {
                            console.log(res.data.result);
                            this.projectManagers = res.data.result
                        })
                    },
                    /**
                     * 获取项目建设类型列表
                     */
                    getType(){
                        axios({
                            url:'./data/projecttype.json'
                        }).then((res) => {
                            console.log(res.data.result);
                            this.projectModes = res.data.result
                        })
                    },
                    addUser() {
                        axios({
                            url: "http://api.0315e.com/tsg/projects",
                            method: "POST",
                            data: {
                                projectName: this.projectName,
                                projectManager: this.projectManager,
                                projectYear: this.projectYear,
                                projectMode: this.projectMode,
                                projectUser: this.projectUser,
                                projectDevelopers: this.projectDevelopers,
                                projectIntro: this.projectIntro
                            }
                        }).then((res) => {
                            alert(res.data.msg);
                            this.goIndex();
                        })
                    },
                    clearAll() {
                        this.projectName = null;
                        this.projectManager = null;
                        this.projectYear = null;
                        this.projectMode = null;
                        this.projectUser = null;
                        this.projectDevelopers = null;
                        this.projectIntro = null;

                    },
                    goIndex() {
                        window.location.href = "index.html";
                    }
                }
            });
        </script>
    </body>
</html>

5 按id 姓名排序

6 过滤显示

4/41作业要求

1 做项目简介的按钮 项目总数的展示

2 将新建和修改页面中的部分字段采用select 和 radio展示

3 开发方式和开发商 联动 1 当开发方式是自研 开发商只能有科技公司,; 2 当 外委 模式,没有科技公司

select onchange事件-> 当值==自研 开发商列表数组,要去掉其他三个

​ 华东电子
​ 济南洋溢
​ 唐山连拖
​ 科技公司
​

修饰符

1 事件修饰符

v-on

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

2 表单元素修饰符

v-model

3 按键修饰符

比如我们想要在 input 中输入值以后, 按回车触发对应事件, 可以使用@keydown.enter="函数名", 同理, 也可以监听tab, delete, esc, up, down, left, right

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7cOElsi-1649923881722)(Vue.js培训笔记.assets/5a1c911988f74cea91da79af3c6049c2tplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

过滤器_filter

样式处理-class和style

动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div>

动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div>

动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div>

动态style数组:<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

处理高亮

<div class="listCss" v-for="(item,index) in listArr" :key="index" 
@click="activeVar=index" :class="{'activeCss':activeVar==index}">{{item}}</div>

2 Vue.js进阶

生命周期_钩子函数(重点)

在某一时刻, 自动执行的函数

v3.cn.vuejs.org/api/options…

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhoLAkBs-1649923881723)(Vue.js培训笔记.assets/892fde0e56324868921d0e924c84858atplv-k3u1fbpfcp-zoom-in-crop-mark1304000.webp)]

计算属性(重点)

监视数据变化 watch

组件

组件通讯

3 Vue-CLI工程

4 Vue插件-Router路由

5 Vue插件-Vuex 状态管理