“Vue 姓名案例”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
 
（未显示同一用户的4个中间版本）
第1行： 第1行：
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18
  
−
=== 插值语法实现 ===
+
=== 姓名案例 ===
 +
一个输入框输入姓，一个输入框输入名，然后要在页面上显示“姓-名”
 +
 
 +
==== 插值语法实现 ====
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
第35行： 第38行：
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
=== methods 实现 ===
 +
<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="zh-CN">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>姓名案例_methods实现</title>
 +
    <!-- 引入 Vue -->
 +
    <script type="text/javascript" src="../js/vue.js"></script>
 +
</head>
 +
<body>
 +
    <!-- 准备好一个容器 -->
 +
    <div id="root">
 +
        姓：<input type="text" name="" id="" v-model="firstName"><br>
 +
        名：<input type="text" name="" id="" v-model="lastName"><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
        全名：<span>{{fullName()}}</span><br>
 +
    </div>
 +
</body>
 +
<script type="text/javascript">
 +
new Vue({
 +
    el:'#root',
 +
    data:{
 +
        firstName:'张',
 +
        lastName:'三'
 +
    },
 +
    methods:{
 +
        fullName(){
 +
            console.log('fullName……');
 +
            return this.firstName + '-' + this.lastName
 +
        }
 +
    }
 +
})
 +
</script>
 +
</html>
 +
</syntaxhighlight>注意：从这个案例里，证明只要 data 中的数据发生改变，Vue 一定会重新解析模板
 +
 +
另外：可以这么写，但效率不高（页面上有多少处使用了 fullName 的插值表达式，methods 里的 fullName 方法就会调用多少次），下一节会介绍更好的实现方式。

2024年8月11日 (日) 08:52的最新版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18

姓名案例

一个输入框输入姓，一个输入框输入名，然后要在页面上显示“姓-名”

插值语法实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_插值语法实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        姓：<input type="text" name="" id="" v-model="firstName"><br>
        名：<input type="text" name="" id="" v-model="lastName"><br>
        姓名：<span>{{firstName}}-{{lastName}}</span><br>
        需求一：不管输入几位，只要三位：<span>{{firstName.slice(0, 3)}}-{{lastName.slice(0, 3)}}</span>
        <!-- 上面这种也可以实现，但如果要求对输入值进行更复杂的操作后再回显到页面上的情况下，这种写法就违反了官方风格指南中提到的 
         模板中简单的表达式
         https://v2.cn.vuejs.org/v2/style-guide/#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90
         -->
     </div>
</body>
<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三'
    }
})
</script>
</html>

methods 实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_methods实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        姓：<input type="text" name="" id="" v-model="firstName"><br>
        名：<input type="text" name="" id="" v-model="lastName"><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
        全名：<span>{{fullName()}}</span><br>
     </div>
</body>
<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三'
    },
    methods:{
        fullName(){
            console.log('fullName……');
            return this.firstName + '-' + this.lastName
        }
    }
})
</script>
</html>

注意：从这个案例里，证明只要 data 中的数据发生改变，Vue 一定会重新解析模板

另外：可以这么写，但效率不高（页面上有多少处使用了 fullName 的插值表达式，methods 里的 fullName 方法就会调用多少次），下一节会介绍更好的实现方式。

取自“https://www.jihongchang.top/index.php?title=Vue_姓名案例&oldid=8198”