【Vue】Vue2.0+Vue3.0学习笔记day03

最新推荐文章于 2024-09-28 17:32:53 发布

西西歪歪西歪

最新推荐文章于 2024-09-28 17:32:53 发布

阅读量616

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122286699

版权

Vue 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

025.watch（监视）对比computed（计算）

026.绑定class样式

027.绑定style样式

018.姓名案例

1.插值语法实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
                  
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        姓名: <span>{{firstName}}-{{lastName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:'张',
                lastName:'三'
            },          
        })
    </script>
</body>

</html>

2.methods实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_methods实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
                  
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        姓名: <span>{{fullName()}}</span>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:'张',
                lastName:'三'
            },  
            methods:{
                fullName(){
                    return this.firstName + '-' + this.lastName
                }
            }        
        })
    </script>
</body>

</html>

019.计算属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性的实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
         计算属性：
           1.定义：要用的属性不存在，要通过已有属性计算得来
           2.原理：底层借助了Object.defineproperty方法提供的getter和setter
           3.get函数什么时候执行
              1 初次读取时会执行一次
              2 当依赖的数据发生改变时会被再次调用
           4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调式方便
           5.备注：
              1 计算属性最终会出现在VM上，直接读取使用即可
              2 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变            
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        姓名: <span>{{fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    // get有什么用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用？1.初次读取fullName时 2.所依赖的数据发生变化时
                    get(){
                        console.log('get被调用了',this); //此处this是VM
                        return this.firstName+'-'+this.lastName
                    },
                    // set什么时候调用？当fullName被修改时
                    set(value){
                        console.log('set',value);
                        const arr =value.split('-')
                        this.firstName=arr[0]
                        this.lastName=arr[1]
                    }
                }
            }       
        })
    </script>
</body>

</html>

020.计算属性的简写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性的简写</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        当只读不改时才可以简写          
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        姓名: <span>{{fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName(){
                    console.log('get被调用了',this); //此处this是VM
                    return this.firstName+'-'+this.lastName
                }
            }       
        })
    </script>
</body>

</html>

021.天气案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy",yyy可以写一些简单的语句 -->
        <!-- <button @click="isHot=!isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },      
        })
    </script>
</body>

</html>

022.监视属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性的实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        监视属性watch：
          1.当被监视的属性变化时，回调函数自动调用进行相关操作
          2.监视的属性必须存在才能进行监视
          3.监视的两种写法：
             1 new Vue时传入watch配置
             2 通过vm.$watch监视
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                isHot:true
            },
            computed:{
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            // watch:{
            //     isHot:{
            //         // 初始化时让handler调用一下
            //         immediate:true,
            //         // 当isHot发生改变时handler被调用
            //         handler(newValue,oldValue){
            //             console.log('isHot被修改了',newValue,oldValue);
            //         }
            //     }
            // }      
        })

        vm.$watch('isHot',{
                    // 初始化时让handler调用一下
                    immediate:true,
                    // 当isHot发生改变时handler被调用
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                })
    </script>
</body>

</html>

023.深度监视

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度监视</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        深度监视：
          1 vue中的watch默认不监测对象内部值的改变（一层）
          2 配置deep：true可以监测对象内部值改变（多层）
        备注：
          1 vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
          2 使用watch时根据数据的具体结构决定是否采用深度监视
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr/>
        <h3>a的值是:{{Numbers.a}}</h3>
        <button @click="Numbers.a++">点我让a+1</button>
        <h3>b的值是:{{Numbers.b}}</h3>
        <button @click="Numbers.b++">点我让b+1</button>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                isHot:true,
                Numbers:{
                    a:1,
                    b:2
                }
            },
            computed:{
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                isHot:{
                    // 初始化时让handler调用一下
                    // immediate:true,
                    // 当isHot发生改变时handler被调用
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue);
                    }
                },
                // 监视多级结构中某属性的变化
             /*    'Numbers.a':{
                    handler(){
                        console.log('a被改变了');
                    }
                } */
                // 监视多级结构中的所有属性的变化
                Numbers:{
                    deep:true,
                    handler(){
                        console.log('Numbers改变了');
                    }
                }
            }      
        })
    </script>
</body>

</html>

024.监视的简写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监视属性的简写</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        当配置项只有handler的时候才可以简写
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                isHot:true,
             },
            computed:{
                info(){
                    return this.isHot?'炎热':'凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
           /*  watch:{
                isHot(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }
            }       */
        })

        vm.$watch('isHot',function(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue);
        })
    </script>
</body>

</html>

025.watch（监视）对比computed（计算）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_watch实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- computed和watch之间的的区别：
           1 computed能完成的功能watch都可以完成
           2 watch能完成的功能computed不一定能完成，例如：watch可以进行异步操作
        两个重要原则：
           1 所有被vue管理的函数最好写成普通函数，这样this的指向才是VM或组件实例对象
           2 所有不被vue管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数等）最好写成箭头函数，
           这样this指向的才是VM或组件实例对象          
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        姓: <input type="text" v-model="firstName"><br/>
        名: <input type="text" v-model="lastName"><br/>
        姓名: <span>{{fullName}}</span>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:'张',
                lastName:'三',
                fullName:'张-三'
            },
            watch:{
                firstName(val){
                    setTimeout(() => {
                        this.fullName=val+'-'+this.lastName
                    }, 1000);
                },
                lastName(val){
                    this.fullName=this.firstName+'-'+val
                }
            }     
        })
    </script>
</body>

</html>

026.绑定class样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <style>
       .basic{
           width: 400px;
           height: 100px;
           border: 1px solid #000;
       }
       .happy{
           border: 4px solid red;
           background-color: rgba(255,255,0,0.644);
           background: linear-gradient(30deg,yellow,pink,orange,yellow);
       }
       .sad{
        border: 4px solid green;
        background-color: #666;
       }
       .normal{
           border: 1px solid red;
           background-color: skyblue;
       }
       .atguigu1{
           background-color: olive;
       }
       .atguigu2{
        font-size: 60px;
        font-weight: 800;
       }
       .atguigu3{
        border-radius: 30px;
       }
    </style>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        class样式
           写法:class="xxx" xxx可以是字符串，对象，数组
              字符串写法适用于：类名不确定，需要动态获取
              对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
              数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
     -->
     
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 绑定class样式-字符串写法，适用于类名不确定需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/>

        <!-- 绑定class样式-数组写法，适用于要绑定的个数不确定、名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br/>

        <!-- 绑定class样式-对象写法，适用于要绑定的个数确定、名字也确定,但动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false
                }
            }, 
            methods: {
                changeMood(){
                    // 随机绑定一种样式
                    const arr=['happy','sad','normal']
                    // Math.random()表示0-1之间的值不包含1， Math.floor()表示向下取整
                    Math.floor(Math.random()*3)
                    // 获取arr数组的索引
                    const index= Math.floor(Math.random()*3)
                    this.mood=arr[index]
                }
            },  
        })
    </script>
</body>

</html>

027.绑定style样式


<body>
    <!-- 
        style样式
          :style="{fontSize:xxx}"其中xxx是动态值
          :style="[a,b]"其中a、b是样式对象
    -->
     
    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 绑定style样式-数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div><br/>

        <!-- 绑定style样式-对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
    </div>

    <script>
        Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
        // 创建Vue实例
        const vm=new Vue({
            el:'#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
            data:{ // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:'西西歪',
                styleArr:[
                    {
                        fontSize:'40px',
                        color:'blue' 
                    },
                    {
                        backgroundColor:'gray'
                    }
                ],
                styleObj:{
                    fontSize:'40px',
                    color:'orange',
                    backgroundColor:'red'
                }
            }  
        })
    </script>
</body>