【Vue 快速入门系列】姓名案例几种实现方法(插值语法、函数语法、计算属性的使用、计算属性原理剖析)

简介: 【Vue 快速入门系列】姓名案例几种实现方法(插值语法、函数语法、计算属性的使用、计算属性原理剖析)

前言


本篇案例由插值语法,methods中的函数引出Vue中一个非常重要的概念:计算属性。案例实现的是有两个输入框,一个是名,一个是姓,经过计算将姓名连接起来展示在dom元素上,并且在input框内的数据改变时dom展示也进行相应的改变。实现的结果如下:


8d439f7206a3445cad230a6a27667d18.gif


插值语法实现


使用之前介绍过的双向数据绑定,在收集到数据之后将其展示在dom元素内。

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname">
        <hr>
        <input v-model="lastname">
        <hr>
        <p>{{fontname}}-{{lastname}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        }
    })
</script>
</html>


methods实现


这里的话是在插值语法处调用函数,实现的具体逻辑在函数内部。相对于前一种方法,

简化了dom元素内的逻辑(实际生产过程中一定不要dom元素内的逻辑过于复杂)


<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname"><hr>
        <input v-model="lastname"><hr>
        <!-- 插值语法在使用函数的时候必须显式的调用,否则将会打印函数的信息 -->
        <p>不加括号的效果:{{pick}}</p><hr>
        <!-- 这里得到的是正常的返回值 -->
        <p>加括号的效果:{{pick()}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        },
        methods:{
            pick(){
                // 这里的this指向的是vm
                return this.fontname+"-"+this.lastname
            }
        }
    })
</script>
</html>


计算属性实现

计算属性:


1.定义:要用的属性不存在,要通过已有属性计算得来。
2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。
     必须要实现getter函数,否则找不到计算属性的值
3.get函数什么时候执行?
        (1).初次读取时会执行一次。
        (2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
5.备注:
     1.计算属性最终会出现在vm上,直接读取使用即可。
     2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="demo">
        <input v-model="fontname"><hr>
        <input v-model="lastname"><hr>
        <p>{{fullname}}</p>
    </div>
</body>
<script>
    let vm= new Vue({
        el:"#demo",
        data:{
            fontname:"张",
            lastname:"三"
        },
        computed:{
          //这是最完整的写法,实际的写法应该比这个简单的多。(往下看)
            fullname:{
                //get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
                //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    return this.fontname+"-"+this.lastname
                },
                set(value){
                    const arr=value.split("-")
                    if (arr.length!=2){
                        alert("不合规范")
                        return 
                    }
                    this.fontname=arr[0]
                    this.lastname=arr[1]
                    alert("属性值修改")
                }
            }
            //简写
            //fullname(){
            //   return this.fontname+"-"+this.lastname
            //}
        }
    })
</script>
</html>


计算属性的原理剖析


刷新机制


在进行属性计算的时候,每当涉及到计算的属性有修改的时候,
系统就会扫描vue实例,并将容器内涉及到计算属性的位置进行更改


缓存机制


计算属性与方法不一样,计算属性有缓存机制,如果在同一页有5处地方用到计算属性
则这5处的值一样(直接在缓存内取值即可),并且只会触发一次属性计算,而如果是函数的话会触发5次



注意点:计算属性的简写方式没有办法对计算属性进行直接修改,因为简写方法只实现了他的getter方法。而完整的写法可以自定义一些规则,实现对计算属性的修改。

目录
相关文章
|
1月前
|
设计模式 JavaScript 前端开发
深入理解 Vue3 中的 setup 函数
深入理解 Vue3 中的 setup 函数
|
1月前
|
JavaScript
详解Vue文件结构+实现一个简单案例
详解Vue文件结构+实现一个简单案例
|
1月前
|
JavaScript 前端开发 API
2024轻松学会 Vue 框架:Vue 框架快速入门指南(五)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(五)
|
1月前
|
资源调度 JavaScript 网络架构
2024轻松学会 Vue 框架:Vue 框架快速入门指南(三)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(三)
|
1月前
|
存储 监控 JavaScript
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)
|
1月前
|
存储 缓存 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(七)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(七)
|
1月前
|
传感器 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(六)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(六)
|
1月前
|
存储 资源调度 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)
|
6天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
32 3
|
1天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0