Day_03 Vue学习

最新推荐文章于 2024-07-12 15:14:43 发布
最新推荐文章于 2024-07-12 15:14:43 发布
阅读量271 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209850/article/details/122321957
版权

Day_03 Vue学习

1.计算属性

1.1 定义:

要用的属性不存在，要通过已有属性计算得来。

1.2.原理：

底层借助了Objcet.defineproperty方法提供的getter和setter。

<body>
    <div id="root"> 姓：
        <input type="text" v-model="firstName"><br/> 名：
        <input type="text" v-model="lastName"><br/> 全名：
        <!--这里的fullname是计算属性中的fullName函数中get返回值名称-->
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            //计算属性中，vm会自己去找到这个函数的get属性，
            //然后把返回值给到fullName，不用我们自己去调用get
            computed: {
                fullName: {
                    //get作用？
                    //当有人读取fullname时，get就会被调用，
                    //返回值就是fullName的值
                    get() {
                        //此处的this是vm,函数一定不写箭头函数
                        console.log('get被调用了');
                        return this.firstName + '-' + this.lastName;
                    },
                    //这个set不是必须的，什么时候调动，当fullName被修改的时候
                    set(value) {
                        console.log('set被调用了', value);
                        this.firstName = value.split('-')[0];
                        this.lastName = value.split('-')[1];
                    }
                }
            }
        })
    </script>
</body>
1.3.get函数什么时候执行？
  • 初次读取时会执行一次。
  • 当依赖的数据发生改变时会被再次调用。

在这里插入图片描述

1.4.优势：

与methods实现相比，内部有缓存机制，效率更高，调试方便。

<body>
    <div id="root"> 姓：
        <input type="text" v-model="firstName"><br/> 名：
        <input type="text" v-model="lastName"><br/> 全名：
        <!-- 当函数用作指令去调用的时候括号就是可写可不写的
        但是要是用作模板方法去取值的话，那就必须写括号了，这样才能得到返回值
        -->
        <span>{{fullName()}}</span><br/> 全名：
        <span>{{fullName()}}</span><br/> 全名：
        <span>{{fullName()}}</span><br/> 全名：
        <span>{{fullName()}}</span><br/> 全名：
        <span>{{fullName()}}</span>
        <!-- 只要data中的值发生变化那么vue一定会去重新解析模板 -->
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            methods: {
                // 这个里面没有任何缓存而言调用几次方法，这个方法就执行几次
                fullName() {
                    console.log('函数被调用了')
                    return this.firstName + '-' + this.lastName;
                }
            }
        })
    </script>
</body>

在这里插入图片描述

注意事项

  • 计算属性最终会出现在vm上，直接读取使用即可。
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
1.5计算属性的简写形式
<body>
    <div id="root"> 姓：
        <input type="text" v-model="firstName"><br/> 名：
        <input type="text" v-model="lastName"><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span><br/> 全名：
        <span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                //完整写法
                // fullName: {
                //   get() {
                //         console.log('get被调用了');
                //         return this.firstName + '-' + this.lastName;
                //     },
                //     set(value) {
                //         console.log('set被调用了', value);
                //         this.firstName = value.split('-')[0];
                //         this.lastName = value.split('-')[1];
                //     }
                // }
                //简写形式，只有考虑读取，不考虑修改的前提下才能简写
                fullName() {
                    console.log('get被调用了');
                    return this.firstName + '-' + this.lastName;

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

注意事项

  • 在用插值语法的时候一定要看清楚所取得的数据在哪里
  • data中的直接拿
  • 指令中的函数，可以加括号或不加括号，那就代表调用函数的时候传不传参数
  • 计算属性中的函数，一定不带括号，因为vue实例会自动去调用函数生成返回值，我们直接写函数名就可以取到值

2.监视属性:

2.1 监视属性watch

  1. 当被监视的属性变化时，回调函数自动调用，进行相关操作

  2. 监视的属性必须存在，才能进行监视！！
    记算属性不存在也不报错，只是新旧值都是undefined

  3. 监视的两种写法：

    (1).new Vue时传入watch配置

    (2).通过vm.$watch监视

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click='changeWeather'>切换天气</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true

        },
        //计算属性
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        //配置监视第一种方式
        // watch: {
        //      isHot: {
        //          //什么时候调用呢，当ishot发生改变时
        //          handler(newValue, oldValue) {
        //              console.log('ishot修改了', newValue, oldValue)
        //          },
        //          //默认是false，初始化时handler调用一下
        //          immediate: true
        //      },
        //监视info和isHot都是一样的
        //     info: {
        //         handler(newValue, oldValue) {
        //             console.log('info修改了', newValue, oldValue)
        //         },
        //     }
        // }
    })
    //配置监视第二种方式
    vm.$watch('isHot', {
        handler(newValue, oldValue) {
            console.log('ishot修改了', newValue, oldValue)
        }
    })
</script>

2.2深度监视：

  • Vue中的watch默认不监测对象内部值的改变（一层）。
  • 配置deep:true可以监测对象内部值改变（多层）。
<body>
    <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>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true,
            numbers: {
                a: 1,
                b: 1
            }
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        //配置监视
        watch: {
            isHot: {
                handler(newValue, oldValue) {
                    console.log('ishot修改了', newValue, oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            // 'numbers.a': {
            //     handler() {
            //         console.log('a被改变了')
            //     }
            // }
            //监视多级结构中所有的属性的变化
            numbers: {
                deep: true,//深度监测
                handler() {
                    console.log('numbers被改变了')
                }
            }
        }
    })
</script>

注意事项：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watchI时根据数据的具体结构，决定是否采用深度监视。

2.3监视属性的简写

<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click='changeWeather'>切换天气</button>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            isHot: true
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽';
            }
        },
        methods: {
            changeWeather() {
                this.isHot = !this.isHot;
            }
        },
        watch: {
            // 完整写法
            // isHot: {
            //     // immediate: true, //初始化时让hander调用一下
            //     // deep: true, //深度监视
            //     handler(newValue, oldValue) {
            //         console.log('ishot修改了', newValue, oldValue)
            //     },
            // },

            //简写，只有当配置项只有handler的时候才能用
            isHot(newValue, oldValue) {
                console.log('ishot修改了', newValue, oldValue);
            }
        }
    })

    // //完整写法
    // vm.$watch('isHot', {
    //     immediate: true, //初始化时让hander调用一下
    //     deep: true, //深度监视
    //     handler(newValue, oldValue) {
    //         console.log('ishot修改了', newValue, oldValue)
    //     },
    // })

    //简写

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

注意事项：

所有vue管理的函数都要写成普通函数，否则vue中的this就是window了

2.4计算属性和监听属性比较

<!--姓名案例_computed实现：-->
<body>
    <div id="root"> 姓：
        <input type="text" v-model="firstName"><br/> 名：
        <input type="text" v-model="lastName"><br/> 全名：
        <span>{{fullName}}</span>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三'
            },
            computed: {
                fullName() {
                    console.log('get被调用了');
                    return this.firstName + '-' + this.lastName;
                }
            }
        })
    </script>
</body>
<!--姓名案例_watch实现：-->
<body>
    <div id="root"> 姓：
        <input type="text" v-model="firstName"><br/> 名：
        <input type="text" v-model="lastName"><br/> 全名：
        <span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName: '三',
                fullName: '张-三'
            },
            //可以开启一个异步任务
            watch: {
                firstName(val) {
                    setTimeout(() => {
                        this.fullName = val + '-' + this.lastName
                    }, 1000)
                },
                lastName(val) {
                    this.fullName = this.firstName + '-' + val
                }
            }
        })
    </script>
</body>

注意事项：

这个时候很明显计算属性比监测属性好用的多

需求：如果想当姓改变之后，全名1秒之后才改变

//计算属性只能这样写，那问题是：
//1.这样的话计算属性就没有返回值了，所以fullName就没有值啦
//2.这里的return相当于是箭头函数的返回值了
fullName() {
    console.log('get被调用了');
    setTimeout(() => {
        return this.firstName + '-' + this.lastName;
    }, 1000)

}

//可以开启一个异步任务
watch: {
    firstName(val) {
        //vue里面的只要是vue不监管的函数一定要写成箭头函数
        //定时器的回调是js引擎帮我们调用的所以这里的this就是window
        setTimeout(() => {
            this.fullName = val + '-' + this.lastName
        }, 1000)
    },
    lastName(val) {
        this.fullName = this.firstName + '-' + val
    }
}

那这样的话监视属性就比计算属性好用

computed和watch之间的区别：

  1. computed能完成的功能，watch都可以完成。

  2. watch能完成的功能，computed不一定能完成，

    例如：watch可以进行异步操作。

两个重要的小原则：

  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数。
  3. 这样this的指向才是vm 或 组件实例对象。

3 绑定样式

<body>
    <!-- 绑定class样式，--字符串写法，
        适用于：样式的类名不确定需要动态指定 
    -->
    <div id="root">
        <div class="basic" :class='mood' @click='changeMood'>
            {{name}}</div>
        <hr>

        <!-- 绑定class样式，--数组写法，
            适用于：要绑定的样式个数不确定，样式不确定 
        -->
        <div class="basic" :class='arr'>{{name}}</div>
        <hr>
        <!--  绑定class样式，--对象写法，
            适用于：要绑定的样式个数确定，名字确定 ，要动态决定用不用
        -->
        <div class="basic" :class='classObj'>{{name}}</div>
        <hr>
        <!-- 内联绑定样式 -->
        <div class="basic" :style="styleObj">{{name}}</div>
        <hr>
        <!-- 内联绑定数组对象 -->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}
          </div>
        <hr>
        <!-- 内联绑定数组对象2 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            mood: 'normal',
            arr: ['atguigu1', 'atguigu2', 'atguigu3'],
            classObj: {
                atguigu1: false,
                atguigu2: false
            },
            styleObj: {
                // 这里的key不能瞎写，就是css属性的小驼峰
                fontSize: '40px'
            },
            styleObj2: {
                color: 'red'
            },
            styleArr: [{
                // 这里的key不能瞎写，就是css属性的小驼峰
                fontSize: '40px'
            }, {
        // 没必要这样写,虽然也可以实现
        // methods: {
        //     changeMood() {
        //         const arr = ['happy', 'sad', 'normal'];
        //         const index = Math.floor(Math.random() * 3);
        //         this.mood = arr[index];
        //     }
        // },         this.mood = arr[index];
            }
        },
    })
</script>

绑定样式：
1．class样式
写法：class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2．style样式
:style="{fontSize：xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

3.条件渲染

3.1v-if 写法：

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else=“表达式” 适用于：切换频率较低的场景。

<body>
    <div id='root'>
        <h2>当前的n值是{{n}}</h2>
        <button @click='n++'>点我n+1</button>
        <!-- 使用v-show做条件渲染,如果东西变化的频率高，那就用-->
        <h2 v-show="false"> 欢迎来到{{name}}</h2> 
        <h2 v-show="1===3"> 欢迎来到{{name}}</h2>

        <!--使用v-if做条件渲染，元素直接会不见了，频率低的用  -->
        <h2 v-if="false"> 欢迎来到{{name}}</h2> 
        <h2 v-if="1==1"> 欢迎来到{{name}}</h2> 
        <div v-if="n===1">Angular</div>
        <div v-else-if="n===1">你管我</div>
        <div v-if="n===2">React</div>
        <div v-if="n===3">Vue</div>
        <div v-else>哈哈哈</div>

        <!-- template只能配合v-if，不能配合v-show -->
        <template v-if='n===1'>
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>


    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            // a: false,
            n: 1
        }
    })
</script>

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能断掉

3.2.v-show 写法：

（1）v-show=“表达式” 适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<body>
    <div id='root'>
        <h2>当前的n值是{{n}}</h2>
        <button @click='n++'>点我n+1</button>
        <!-- 使用v-show做条件渲染,如果东西变化的频率高，那就用-->
        <h2 v-show="false"> 欢迎来到{{name}}</h2> 
        <h2 v-show="1===3"> 欢迎来到{{name}}</h2> 
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#root',
        data: {
            name: '尚硅谷',
            // a: false,
            n: 1
        }
    })
</script>

</html>
龍妞馨宁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue的基本语法、插值表达式、基础指令笔记
qq_38304572的博客
12-04 1693
一、Vue的基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入vue.js，官网下载开发者版本 --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </...
Day_06 Vue学习
qq_43209850的博客
01-26 748
1.自定义指令 1.1函数式 指令与元素成功绑定时（一上来） 指令所在的模板被重新解析时 <body> <div id="root"> <h2>当前的n值是： <span v-text="n"></span> </h2> <h2>放大10倍后的n值是： <span v-big="n"></span&g
Vue(三)
Bella.的博客
12-31 101
111
vue中管理的函数
Canace_Xyxjjcaw的博客
01-13 535
1.被vue所管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。 2.不被vue所管理的函数，比如：定时器的回调函数、ajax的回调函数、Promise的回调函数，最好写成箭头函数，这样的this指向才是vm或组件实例对象。 ...
VUe的绑定样式
Web_South_Bay的博客
09-05 118
一、class样式 写法：:class="xxx"xxx可以是字符串、对象、数组。 1.字符串写法适用于：类名不确定，要动态获取。 HTML代码： <div class="basic" :class='mood' @click='changeMood'>{{name}}</div><br><br> JavaScript代码： <script> Vue.config.productionTip = false...
02..VUE详细整理（二）--VUE核心功能--尚硅谷最新课程
a2274001782的博客
12-08 367
02..VUE详细整理（二）--VUE核心功能--尚硅谷最新课程
Day_05 Vue学习
qq_43209850的博客
01-25 445
1. Vue监视数据的原理： vue会监视data中所有层次的数据。 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 对象中后追加的属性，Vue默认不做响应式处理 如需给后添加的属性做响应式， 请使用如下API： Vue.set(target，propertyName/index，value）或 vm.$set(target, propertyName/index, value) Vue.set(target，key，val)或者vm.$set(tar
vue 学习日志 day03
weixin_65423052的博客
03-27 465
键盘修饰符，过滤器，自定义指令
vue学习笔记01day_01Vue的基本代码
xinpz的博客
09-10 229
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
Vue基础day3学习资料.zip
03-31
首先，让我们来看看"day03_Vue01-基础语法3.ppt"。这份PPT可能详细介绍了Vue的基础语法，包括如何创建Vue实例、数据绑定、计算属性、指令系统（如v-if、v-for）、事件处理（v-on）以及组件化等核心概念。Vue实例是...
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
Vue学习Day9案例
04-30
在这个"Vue学习Day9案例"中，我们重点关注`Src`目录及其子目录`Src_ajax_user`，这通常代表了一个Vue应用的数据获取和用户管理模块。在这个案例中，我们将学习如何通过Ajax技术，尤其是使用Vue.js的内置HTTP接口`...
Vue基础day4学习资料.zip
03-31
在"Vue基础day4学习资料.zip"中，我们可以找到一系列资源来深入理解和掌握Vue的基础知识，特别是Vue全家桶（包括Vuex状态管理、Vue Router路由管理等）的基础内容。 首先，"day04_Vue01-基础语法3.ppt"很可能包含了...
Vue基础day1学习资料.zip
03-31
"Vue基础day1学习资料.zip"这个压缩包包含了丰富的资源，适合初学者系统地学习Vue的基础知识。让我们逐一解析其中包含的内容。 首先，"2-案例"文件夹可能包含了一些实际的Vue应用示例，这些案例可以帮助你理解Vue的...
vue详解
m0_46702681的博客
07-08 1168
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1179
vue切换主题
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 181
解决页面放大，图片模糊的问题
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 732
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 753
模糊搜索功能 每个网站都要用得到
vue大型电商项目尚品汇（后台篇）day01.doc
07-09
尚品汇是一个采用Vue开发的大型电商项目，本文是后台篇的第一天内容。在前面的内容中，我们进行了一些必要的准备工作，如参加学校的授位仪式...在后续的学习中，我们还将继续深入学习和实践，不断提升自己的技术水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值