Vue学习笔记

kaikai_sk

已于 2024-08-26 13:27:26 修改

阅读量983

点赞数 14

文章标签： vue.js 学习笔记

于 2024-08-26 13:26:44 首次发布

本文链接：https://blog.csdn.net/kaikai_sk/article/details/141560422

版权

01_初识Vue

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识Vue</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>Hello, {{name}}, {{address}}, {{Date.now()}}.</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            // 创建vue实例
            const x = new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                // data中用于存储数据，数据供el所指定的容器使用。值的类型暂时可以先用一个对象。
                data:{
                    name:'shankai111',
                    address:'wuhan'
                }
            })
        </script>
    </body>
</html>

02_Vue模板语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Vue模板语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr/>

            <h1>指令语法</h1>
            <a v-bind:href="school.url">点我去{{school.name}}学习1</a>
            <a :href="school.url">点我去{{school.name}}学习2</a>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            // 创建vue实例
            const x = new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                // data中用于存储数据，数据供el所指定的容器使用。值的类型暂时可以先用一个对象。
                data:{
                    name:'shankai111',
                    school:{
                        name:'atguigu',
                        url:'http://www.atguigu.com'
                    }
                    
                }
            })
        </script>
    </body>
</html>

03_Vue数据绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Vue数据绑定</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <!-- 正常普通写法 -->
            <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
            双向数据绑定：<input type="text" v-model:value="name"> -->

            <!-- 简写 -->
            单向数据绑定：<input type="text" :value="name"><br/>
            双向数据绑定：<input type="text" v-model="name">
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            // 创建vue实例
            const x = new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                // data中用于存储数据，数据供el所指定的容器使用。值的类型暂时可以先用一个对象。
                data:{
                    name:'shankai111',
                    school:{
                        name:'atguigu',
                        url:'http://www.atguigu.com'
                    }
                    
                }
            })
        </script>
    </body>
</html>

04_el与data的两种写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>el与data的两种写法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>hello, {{name}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            /* el的两种写法 */
            // 创建vue实例
            // const v = new Vue({
            //     // el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串     第一种写法：直接的构造的时候就指定。
            //     // data中用于存储数据，数据供el所指定的容器使用。值的类型暂时可以先用一个对象。
            //     data:{
            //         name:'shankai111'
            //     }
            // })
            // console.log(v)
            // setTimeout(() => {
            //     v.$mount('#root') // 第二种写法
            // }, 1000)

            /* data的两种写法 */
            const v = new Vue({
                el:'#root', 

                // // data的第一种写法： 对象式
                // data:{
                //     name:'shankai111'
                // }

                // data的第二种写法： 函数式
                // data:function() {
                data() {
                    // 此处的this是Vue实例
                    console.log('######skkk######', this)
                    return {
                        name:'shankai1114'
                    }
                }
            })
        </script>
    </body>
</html>

05_MVVM模型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>el与data的两种写法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>
            <h1>测试一下1：{{$options}}</h1>
            <h1>测试一下2：{{$emit}}</h1>
            <h1>测试一下3：{{_c}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                }
            })
            console.log(vm)
        </script>
    </body>
</html>

06_数据代理

1.回顾Object.defineProperty方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>回顾Object.defineProperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
       
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            let number = 18
            let person = {
                name:'zhangsan',
                sex:'male'
            }
            Object.defineProperty(person, 'age', {
                // value: 18,
                // 控制属性是否可以枚举，默认值是false
                // enumerable:true, 
                // 控制属性是否可以被修改，默认值是false
                // writable:true,
                // 控制属性是否可以被删除，默认值是false
                // configurable:true,

                get:function() {
                    return number
                }
            })
            console.log(person)
            console.log(Object.keys(person))

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                }
            })
        </script>
    </body>
</html>

2.何为数据代理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>回顾Object.defineProperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
       
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            let obj = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2, 'x', {
                get() {
                    return obj.x
                },
                set(value) {
                    obj.x = value
                }
            })

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                }
            })
        </script>
    </body>
</html>

3.Vue中的数据代理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>回顾Object.defineProperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
       
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            let obj = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2, 'x', {
                get() {
                    return obj.x
                },
                set(value) {
                    obj.x = value
                }
            })

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                }
            })
        </script>
    </body>
</html>

07_事件处理

1.事件的基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>回顾Object.defineProperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <button v-on:click="showInfo">点我提示信息</button>
            <button @click="showInfo">点我提示信息1</button>
            <button @click="showInfo2($event, 66)">点我提示信息2</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                },
                methods:{
                    showInfo(event){
                        // console.log(event.target.innerText)
                        // 此处的this就是vm
                        // console.log(this)
                        alert('Hello, 同学')
                    },
                    showInfo2(event, number){
                        console.log(event, number)
                        alert('Hello, 同学!!')
                    }
                }
            })
        </script>
    </body>
</html>

2.事件修饰符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>事件修饰符</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            *{
                margin-top: 20px;
            }
            .demo1{
                height: 50px;
                background-color: skyblue;
            }
            .box1{
                padding: 5px;
                background-color: skyblue;
            }
            .box2{
                padding: 5px;
                background-color: orange;
            }
            .list{
                width: 200px;
                height: 200px;
                background-color: peru;   
                overflow: auto;
            }
            li{
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <a href="www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
            
            
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
            </div>

            <button @click.once="showInfo">点我提示信息</button>

            <!-- 在捕获阶段处理事件 -->
            <div class="box1" @click.capture="showMsg(1)">
                box1

                <div class = "box2" @click="showMsg(2)">
                    box2

                </div>
            </div>

            <!-- 只有当event.target是当前操作的元素时才会触发事件 -->
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息</button>
            </div>

            <!-- 事件的默认行为立即执行，无需等待事件响应函数执行完毕 -->
            <ul class="list" @wheel.passive="demo">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            let obj = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2, 'x', {
                get() {
                    return obj.x
                },
                set(value) {
                    obj.x = value
                }
            })

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                },
                methods:{
                    showInfo(event) {
                        // 阻止事件冒泡
                        // event.stopPropagation()
                        // 阻止默认的事件
                        // event.preventDefault()
                        alert('Hello, 同学')
                    },
                    showMsg(msg) {
                        console.log(msg)
                    },
                    demo() {
                        for(let i = 0; i < 10000; i++) {
                            console.log('#')
                        }
                        console.log('I am tired.')
                    }
                }
            })
        </script>
    </body>
</html>

3.键盘事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>键盘事件</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>欢迎来到{{name}}</h2>
            <!-- 按键别名 -->
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></input>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            let obj = {x:100}
            let obj2 = {y:200}

            Object.defineProperty(obj2, 'x', {
                get() {
                    return obj.x
                },
                set(value) {
                    obj.x = value
                }
            })

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        name:'尚硅谷',
                        address:'beijing'
                    }
                },
                methods: {
                    showInfo(e) {
                        console.log(e.target.value)
                    }
                }
            
            })
        </script>
    </body>
</html>

08_计算属性

1.姓名案例_插值语法实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>回顾Object.defineProperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model:value="firstName"> <br/><br/>
            名：<input type="text" v-model:value="lastName"> <br/><br/>
            姓名：<span>{{firstName}}-{{lastName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        firstName:'张',
                        lastName:'三'
                    }
                }
            })
        </script>
    </body>
</html>

2.姓名案例_methods实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2.姓名案例_methods实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model:value="firstName"> <br/><br/>
            名：<input type="text" v-model:value="lastName"> <br/><br/>
            姓名：<span>{{fullName()}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        firstName:'张',
                        lastName:'三'
                    }
                },
                methods:{
                    fullName() {
                        return this.firstName + '-' + this.lastName        
                    }
                }
            })
        </script>
    </body>
</html>

3.姓名案例_计算属性实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2.姓名案例_计算属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model:value="firstName"> <br/><br/>
            名：<input type="text" v-model:value="lastName"> <br/><br/>
            姓名：<span>{{fullName()}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        firstName:'张',
                        lastName:'三'
                    }
                },
                methods:{
                    fullName() {
                        return this.firstName + '-' + this.lastName        
                    }
                }
            })
        </script>
    </body>
</html>

4.姓名案例_计算属性简写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2.姓名案例_计算属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            姓：<input type="text" v-model:value="firstName"> <br/><br/>
            名：<input type="text" v-model:value="lastName"> <br/><br/>
            姓名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        firstName:'张',
                        lastName:'三'
                    }
                },
                computed:{
                    fullName() {
                        return this.firstName + '-' + this.lastName
                    }
                }
            })
        </script>
    </body>
</html>

09_监视属性

1.天气案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2.姓名案例_计算属性实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        isHot:true
                    }
                },
                computed:{
                    info() {
                        return this.isHot ? '炎热' : '凉爽'
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot
                    }
                },
                watch: {
                    isHot: {
                        // 初始化时让handler调用一次。
                        immediate:true,
                        handler(newValue, oldValue) {
                            console.log('isHot is modified.', newValue, oldValue)
                        }
                    }
                }
            })

            vm.$watch('info', {
                // 初始化时让handler调用一次。
                immediate:true,
                handler(newValue, oldValue) {
                    console.log('info is modified.', newValue, oldValue)
                }
            })
        </script>
    </body>
</html>

2.天气案例_深度监视

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>2.天气案例_深度监视</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <hr/>
            <h3>a的值是：{{numbers.a}}</h3>
            <button @click="numbers.a++">点我让a+1</button>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        isHot:true,
                        numbers:{
                            a:1,
                            b:1
                        }
                    }
                },
                computed:{
                    info() {
                        return this.isHot ? '炎热' : '凉爽'
                    }
                },
                methods: {
                    changeWeather() {
                        this.isHot = !this.isHot
                    }
                },
                watch: {
                    isHot: {
                        // 初始化时让handler调用一次。
                        immediate:true,
                        handler(newValue, oldValue) {
                            console.log('isHot is modified.', newValue, oldValue)
                        }
                    },
                    'numbers.a':{
                        handler(newValue, oldValue) {
                            console.log('a was changed.', newValue, oldValue)
                        }
                    }
                }
            })

            vm.$watch('info', {
                // 初始化时让handler调用一次。
                immediate:true,
                handler(newValue, oldValue) {
                    console.log('info is modified.', newValue, oldValue)
                }
            })
        </script>
    </body>
</html>

12_列表渲染

1.基本列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <ul>
                <li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        persons:[
                            {id:'001', name:'zhangsan', age:18},
                            {id:'002', name:'lis', age:19},
                            {id:'003', name:'wangwu', age:20}
                        ]
                    }
                },
            })
        </script>
    </body>
</html>

2.key的原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>人员列表</h2>
            <input placeholder="请输入名字" v-model="keyWords"></input>
            <ul>
                <li v-for="person in filteredPersons" :key="person.id">
                    {{person.name}}-{{person.age}}-{{person.sex}}
                 </li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            // watch来实现列表过滤
            // const vm = new Vue({
            //     el:'#root', 

            //     data() {
            //         return {
            //             keyWords:'',
            //             persons:[
            //                 {id:'001', name:'马冬梅', age:18, sex:'女'},
            //                 {id:'002', name:'周冬雨', age:19, sex:'女'},
            //                 {id:'003', name:'温兆伦', age:20, sex:'男'},
            //                 {id:'004', name:'周杰伦', age:20, sex:'男'},
            //             ],
            //             filteredPersons:[]
            //         }
            //     },

            //     watch:{
            //         keyWords:{
            //             immediate:true,
            //             handler(newValue) {
            //                 // console.log(newValue)    
            //                 this.filteredPersons = this.persons.filter((person)=>{
            //                     return person.name.indexOf(newValue) > -1
            //                 })
            //             }
            //         }
            //     }
            // })

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        keyWords:'',
                        persons:[
                            {id:'001', name:'马冬梅', age:18, sex:'女'},
                            {id:'002', name:'周冬雨', age:19, sex:'女'},
                            {id:'003', name:'温兆伦', age:20, sex:'男'},
                            {id:'004', name:'周杰伦', age:20, sex:'男'},
                        ]
                    }
                },
                computed:{
                    filteredPersons() {
                        return this.persons.filter((person)=>{
                            return person.name.indexOf(this.keyWords) > -1
                        })
                    }
                }
            })
        </script>
    </body>
</html>

3.列表排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>3.列表排序</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>人员列表</h2>
            <input placeholder="请输入名字" v-model="keyWords"></input>
            <button @click="sortType=0">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=2">原顺序</button>
            <ul>
                <li v-for="person in filteredPersons" :key="person.id">
                    {{person.name}}-{{person.age}}-{{person.sex}}
                 </li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        keyWords:'',
                        // 0 原顺序 1 降序 2 升序
                        sortType: 0, 
                        persons:[
                            {id:'001', name:'马冬梅', age:18, sex:'女'},
                            {id:'002', name:'周冬雨', age:19, sex:'女'},
                            {id:'003', name:'温兆伦', age:20, sex:'男'},
                            {id:'004', name:'周杰伦', age:20, sex:'男'},
                        ]
                    }
                },
                computed:{
                    filteredPersons() {
                        const arr = this.persons.filter((person)=>{
                            return person.name.indexOf(this.keyWords) > -1
                        })

                        if (this.sortType) {
                            arr.sort((person1, person2)=>{
                                return this.sortType === 1 ? person2.age - person1.age : person1.age - person2.age
                            })
                        }
                        return arr
                    }
                }
            })
        </script>
    </body>
</html>

4.更新时的一个问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>3.列表排序</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>人员列表</h2>
            <input placeholder="请输入名字" v-model="keyWords"></input>
            <button @click="sortType=0">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=2">原顺序</button>
            <ul>
                <li v-for="person in filteredPersons" :key="person.id">
                    {{person.name}}-{{person.age}}-{{person.sex}}
                 </li>
            </ul>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        keyWords:'',
                        // 0 原顺序 1 降序 2 升序
                        sortType: 0, 
                        persons:[
                            {id:'001', name:'马冬梅', age:18, sex:'女'},
                            {id:'002', name:'周冬雨', age:19, sex:'女'},
                            {id:'003', name:'温兆伦', age:20, sex:'男'},
                            {id:'004', name:'周杰伦', age:20, sex:'男'},
                        ]
                    }
                },
                computed:{
                    filteredPersons() {
                        const arr = this.persons.filter((person)=>{
                            return person.name.indexOf(this.keyWords) > -1
                        })

                        if (this.sortType) {
                            arr.sort((person1, person2)=>{
                                return this.sortType === 1 ? person2.age - person1.age : person1.age - person2.age
                            })
                        }
                        return arr
                    }
                }
            })
        </script>
    </body>
</html>

13_收集表单数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <form @submit.prevent="submitForm">
                账号：<input type="text" v-model.trim="userInfo.account"> <br/>
                密码：<input type="password" v-model="userInfo.password"><br/>
                年龄：<input type="number" v-model.number="userInfo.age"><br/>
                性别：男<input type="radio" name = "sex" v-model="userInfo.sex" value="male">女<input type="radio" name = "sex" v-model="userInfo.sex" value="female"><br/>
                爱好：抽烟<input type="checkbox" v-model="userInfo.hobby" value="smoke">喝酒<input type="checkbox" v-model="userInfo.hobby" value="drink">烫头<input type="checkbox" v-model="userInfo.hobby" value="head"><br/>
                所属校区：
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select><br/>
                其他信息：
                <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/>
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.atguigu.com">《用户协议》</a><br/>
                <button>提交</button>
            </form>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        userInfo:{
                            account:'',
                            password:'',
                            age:18,
                            sex:'female',
                            hobby:[],
                            city:'',
                            other:'',
                            agree:false
                        }
                    }
                },

                methods: {
                    submitForm() {

                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>
    </body>
</html>

15_内置指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <form @submit.prevent="submitForm">
                账号：<input type="text" v-model.trim="userInfo.account"> <br/>
                密码：<input type="password" v-model="userInfo.password"><br/>
                年龄：<input type="number" v-model.number="userInfo.age"><br/>
                性别：男<input type="radio" name = "sex" v-model="userInfo.sex" value="male">女<input type="radio" name = "sex" v-model="userInfo.sex" value="female"><br/>
                爱好：抽烟<input type="checkbox" v-model="userInfo.hobby" value="smoke">喝酒<input type="checkbox" v-model="userInfo.hobby" value="drink">烫头<input type="checkbox" v-model="userInfo.hobby" value="head"><br/>
                所属校区：
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="shenzhen">深圳</option>
                    <option value="wuhan">武汉</option>
                </select><br/>
                其他信息：
                <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br/>
                <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.atguigu.com">《用户协议》</a><br/>
                <button>提交</button>
            </form>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        userInfo:{
                            account:'',
                            password:'',
                            age:18,
                            sex:'female',
                            hobby:[],
                            city:'',
                            other:'',
                            agree:false
                        }
                    }
                },

                methods: {
                    submitForm() {

                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>
    </body>
</html>

16_自定义指令

1.自定义指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2>当前的n值是：<span v-text="n"></span></h2>
            <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
            <button @click="n++">点我n+1</button>

            <hr/>

            <input type="text" v-fbind:value="n">

        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        n:1,
                        userInfo:{
                            account:'',
                            password:'',
                            age:18,
                            sex:'female',
                            hobby:[],
                            city:'',
                            other:'',
                            agree:false
                        }
                    }
                },

                directives:{
                    // big函数的调用时机：1. 指令与元素成功绑定 2. 指令所在模板被重新解析时
                    big(element, binding) {
                        // console.log(element, binding.value)
                        element.innerText = binding.value * 10;
                    },
                    fbind:{
                        bind(element, binding) {
                            element.value = binding.value        
                        },
                        inserted(element, binding) {
                            element.focus()    
                        },
                        update(element, binding) {
                            element.value = binding.value    
                        }
                    }
                    // fbind(element, binding) {
                    //     element.value = binding.value
                    //     element.focus()

                    // }


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

2.回顾一个DOM操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document</title>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>

    <body>
        <button id="btn">click me will create a input box</button>
        <script type="text/javascript">
            const btn = document.getElementById("btn");
            btn.onclick = () => {
                const input = document.createElement("input")

                input.className = 'demo'
                input.value = 99
                input.onclick = () => {alert(1)}

                document.body.appendChild(input)
                input.focus()
                input.parentElement.style.backgroundColor = 'skyblue'
            }

        </script>
    </body>

</html>

17_生命周期

1.引出生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2 :style="{opacity: opacity}">欢迎学习Vue</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        opacity: 1
                    }
                },

                methods: {
                },

                // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
                mounted() {
                    setInterval(() => {
                            this.opacity -= 0.01
                            if (this.opacity <= 0) {
                                this.opacity = 1
                            }
                        }, 16);
                },
            })
        </script>
    </body>
</html>

2.分析生命周期

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>1.基本列表</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <h2 :style="{opacity: opacity}">欢迎学习Vue</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

            const vm = new Vue({
                el:'#root', 

                data() {
                    return {
                        opacity: 1
                    }
                },

                methods: {
                },

                // Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
                mounted() {
                    setInterval(() => {
                            this.opacity -= 0.01
                            if (this.opacity <= 0) {
                                this.opacity = 1
                            }
                        }, 16);
                },
            })
        </script>
    </body>
</html>