Vue表单、计算属性computed、vue深浅监听、vue组件的简单使用

已于 2022-05-21 12:58:42 修改
阅读量807 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-05-20 00:09:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51066068/article/details/124874363
版权
本文详细介绍了Vue.js的基础知识，包括如何使用v-model进行表单数据绑定，实现即时更新、延迟更新、格式化输入及多选处理。接着讲解了计算属性的使用，通过计算属性实现简单的加法运算。然后讨论了监听器，展示了如何监听数据变化并作出响应。最后，探讨了Vue组件的概念，通过创建和注册组件实现了代码的复用。
摘要由CSDN通过智能技术生成

目录

Vue表单

 Vue计算属性

Vue 监听

Vue深度监听

Vue组件

Vue表单

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}} {{form}}
      <hr />

      <!--vue使用v-model进行数据绑定  如果有这些，则忽略value、checked、selected等等默认的值 ,则就是下面的value="你好"-->
      <!-- 即时跟新 -->
      <!-- 用户名:<input type="text" v-model="form.username" value="你好" /> -->
      <!-- lazy修饰符作用，失去焦点才跟新 -->
      用户名:<input type="text" v-model.lazy="form.username" value="你好" />

      <br />
      <!-- 即时更新 -->
      <!-- 年龄:<input type="text" v-model="form.age" /> -->
      <!-- 不完整规则校验number -->
      <!-- 年龄:<input type="number" v-model.number="form.age" /> -->
      <!-- 去掉两端空格trim ,无论两端多长空格后有数据，都只显示一个空格 -->
      年龄:<input type="text" v-model.trim="form.age" />

      <br />
      <!-- 选什么传递什么，互斥事件 -->
      性别:<input type="radio" value="male" v-model="form.gender" />男
      <input type="radio" value="female" v-model="form.gender" />女
      <br />
      爱好:<input type="checkbox" value="篮球" v-model="form.hobby" />篮球
      <input type="checkbox" value="足球" v-model="form.hobby" />足球
      <input type="checkbox" value="游泳" v-model="form.hobby" />游泳
      <input type="checkbox" value="跳舞" v-model="form.hobby" />跳舞
      <br />
      城市:
      <select v-model="form.city">
        <option value="南京">南京</option>
        <option value="西安">西安</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
      </select>
    </div>

    <script>
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          form: {
            username: "不好",
            gender: "male",
            //多选框必须加一个数组框 []:即声明为空数组
            hobby: [],
            //hobby: ["篮球"], //默认选中
            city: "上海", //默认选中
          },
        },
        methods: {},
      });
    </script>
  </body>
</html>

 Vue计算属性

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
        {{msg}}
        <hr>
        a: <input type="number" v-model.number="a"></input>
    <br>
    +
    <br>
        b:<input type="number" v-model.number="b"></input>
    <br>
    =
    <br>
        <div style="border: 1px solid red; width: 50px;height: 30px;">{{total}}</div>

    </div>

    <script>
    
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          a:'',
          b:'',
        },
        methods: {},
        //计算属性
        computed:{
            total(){
                return this.a+this.b;
            }
        }
      });
    </script>
  </body>
</html>

Vue 监听

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
        {{msg}}
        <hr>
        a: <input type="number" v-model.number="a"></input>
    <br>
    +
    <br>
        b:<input type="number" v-model.number="b"></input>
    <br>
    =
    <br>
        <div style="border: 1px solid red; width: 50px;height: 30px;">{{total}}</div>

    </div>

    <script>
    
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          a:'',
          b:'',
          total:''
        },
        methods: {},
        watch:{
            a(newValue,oldValue){
                console.log(newValue,oldValue);
                this.total=newValue+this.b;
            },
            b(newValue,oldValue){
                console.log(newValue,oldValue);
                this.total=newValue+this.a;
            }
        }
      });
    </script>
  </body>
</html>

  

Vue深度监听

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}} {{obj}}
      <br />
      <button @click="changeObj">更改obj数据</button>
    </div>

    <script>
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          obj: {
            name: "张三",
            age: "24",
          },
        },
        methods: {
          changeObj() {
            this.msg = "123";
            this.obj.name = "lisi";

            //因为obj对象是复杂数据类型,只能是浅监听监听不到
            //需要进行解构才能监听到
            // this.obj = {
            //   ...this.obj,
            //   name: "lisi",
            // };
          },
        },
        watch: {
          msg(newValue, oldValue) {
            console.log("msg数据发生变化");
          },
          //浅监听
          //   obj(newValue, oldValue) {
          //     console.log("obj数值发生变化");
          //   },

          //对于复杂数据类型，内部属性的改变，普通监听监听不到，如果要监听，使用深度监听
          //应用数据类型的监听(浅度监听)，这是监听引用地址有没有变化
          //引用数据类型深度监听，内部属性发生变化时，才能监听到
          //深度监听
          obj: {
            handler(newValue, oldValue) {
              console.log("深度监听,obj数据发生改变");
            },
            deep: true,
          },
        },
      });
    </script>
  </body>
</html>

Vue组件

<!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>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <!-- 重复代码片段的复用：组件的封装：就是把这片重复的代码片段封装起来 -->
      <!-- <div>
        <span></span>
        <div></div>
      </div> -->
      <my-com></my-com>
      <hr />
      <my-com></my-com>

      <!-- <div @click="const++">按钮{{comMsg}}</div> -->
      <!-- <div>按钮{{comMsg}}</div> -->
    </div>

    <script>
      //1.创建组件  组件声明  对象
      let myCom = {
        //组件的配置信息
        data() {
          return {
            comMsg: "组件内的msg",
            const: 1,
          };
        },
        methods: {},
        template: `
        <div>
            <span>hello Vue</span>
            <div>Hello Vue</div>
            <div>按钮{{comMsg}}</div>
        </div>
        `,
      };

      //2.组件注册
      //全局注册
      Vue.component("my-com", myCom);

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        //局部注册组件
        /* components: {
          "my-com": myCom,
        }, */
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

The..Fuir
关注
专栏目录
vue计算属性computed、事件、监听器watch的使用讲解
10-17
在Vue.js框架中，计算属性(computed)、方法(methods)、监听器(watch)是三种常用的功能，它们分别用于处理模板中的数据响应式问题。以下将详细介绍这三种功能的使用方法和区别。 ### 计算属性(computed) 计算属性是...
Vue表单自动计算（computed）
xigua_qy的博客
09-04 5497
项目中需要通过实时计算出表单值，作为vue小白记录下 参考博文 前辈们的博文： watch和computed用法. 过滤NaN值. js代码： computed: { c: function () { // 定义并且给c赋值 return parseInt(this.form.a) + parseInt(this.form.b) } } 数据 form: { a: '', b: '' }, 计算c=a+b 这里可以
computed 和 watch 区别 ， 数据 深拷贝 ，浅拷贝两个重点知识总结
m0_61603704的博客
02-21 239
computed 和 watch 区别 ， 数据 深拷贝 ，浅拷贝两个重点知识总结
Vue.js中的深度监听：理解其工作原理及应用
最新发布
你若盛开，清风自来
07-28 832
本文将介绍Vue.js中深度监听的概念、作用及其在实际项目中的应用，帮助读者更好地理解深度监听的重要性，提高前端开发的效率。深度监听是Vue.js中的一种数据绑定方式，它允许开发者监听对象和数组中的数据变化。监听对象和数组：深度监听可以监听对象和数组中的数据变化，而不仅仅是原始数据类型。实时更新：当监听的数据发生变化时，Vue.js会实时更新视图，确保数据和视图的一致性。简洁的语法：深度监听使用简洁的语法，使得代码更加简洁和易于阅读。
在computed中定义了el-form规则，使用validator验证，获取mounted返回的数据是，总是获取不到 -- 解决方法
m0_60907575的博客
12-11 303
【代码】在computed中定义了el-form规则，使用validator验证，获取mounted返回的数据是，总是获取不到 -- 解决方法。
vue学习之computed:计算属性的使用示例
kilig
07-08 711
computed计算属性 : 数据依赖项改变之后进行重新计算 使用示例： 显示包含检索项关键字的内容项 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <div id="app"> <div class="panel panel-info">
vue中computed计算属性应用
qq_27474555的博客
04-30 801
vue中computed计算属性应用 1、html页面 <template> <div> <el-form> <el-form-item v-model="count"> <el-input v-model="count.count1"></el-input> </el-form-item> ...
Vue中计算属性computed的示例解读
08-29
通过合理使用计算属性，我们可以将模板保持简洁，将复杂的逻辑移至组件的`computed`部分，使得代码更加易于理解和维护。在开发Vue应用时，理解并充分利用计算属性是提升开发效率和应用性能的关键。
vue计算属性computed的使用方法示例
10-17
在Vue中，`computed`属性是一种特殊的数据属性，用于定义基于其他数据属性动态计算的值。这种特性允许开发者将复杂的逻辑从模板中移出，使得模板更加简洁，同时也优化了性能，因为Vue会自动缓存`computed`属性的结果...
Vue 计算属性（Computed）案例精粹
07-18
Vue 计算属性（Computed）案例精粹
Vue中的computed属性
weixin_34097242的博客
08-16 1954
2019独角兽企业重金招聘Python工程师标准>>> ...
计算属性computed使用
没时间
12-23 606
计算属性：当计算属性内绑定的值改变了，内部set会自动计算改变的值（想当与这里的phoneNo） 当手机号输入超过4位数字即显示获取验证码的按钮，否则禁用 <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']"> <view class="title"><text class="cuIcon-mobile margin-right-xs"></
【vue计算属性】 computed，动态计算值，具体业务场景详细分析讲解
花椒和蕊的博客
04-27 2486
一直都知道计算属性大概是个什么，但是之前项目里用的不多，甚至是基本上用不到，学习过，但是不去用的话始终不会有深刻的印象。 今天用到了，打算好好记录一下，多做笔记，以后找起来也方便 ** 计算属性是通过一系列的运算，最终得到一个属性值 动态计算出来的属性值可以被模板结构或methods方法使用 ** 模板内的表达式如果过于复杂，会让模板过重且难以维护，因为代码太难读懂了呀，尤其是换人开发后，要花很多的时间去理解一长串代码，想想都觉得把时间花在这上面也太让人生气了。 所以计算属性的价值就体现出来了，通过一系列运
Vue 计算属性computed的用法
清風明月_xf 的博客
06-02 599
Vue组件中，计算属性computed函数的用法
Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例
SteveRocket's-Blog
12-17 6601
Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。
computed计算属性
tiantian_02的博客
06-10 156
2）computed计算属性依赖于浏览器缓存，只用于当其依赖的数据发生改变时才会重新调用。1）methods方法依赖于页面渲染，只要页面发生渲染methods就会重新调用。2）当计算属性所依赖的数据发生改变时，就会自动调用。3）computed必须要有return值。3）使用时和data中的属性使用方法一样。2.mothods方法和computed计算属性的区别。1）必须要有return值。1.计算属性 computed有两个特点。4）可以定义多种计算属性。
第十六篇 Computed 计算属性的应用
灵魂学者的博客
10-23 1471
讲述Computed计算属性的运用以及computed与methods的区别，通过对先前案例的编写进行computed计算属性的调整修改，感兴趣的和正在学习的读者可以了解一下，如果问题，还请斧正！
HMVue3.2【计算属性】
yubaby
11-19 145
1 计算属性及其特点 2 使用计算属性改造案例 2-1案例-原版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...
Vue之计算属性（computed）
热门推荐
浩泽学编程的博客
06-30 2万+
计算属性以上就是计算属性的大致讲解。
Vue.js深入浅出：计算属性computed与监听器watch实战解析
"Vue.js 中的计算属性 computed、事件处理及监听器 watch 的使用方法" 在 Vue.js 中，计算属性 (computed)、事件处理和监听器 (watch) 是非常重要的概念，它们帮助我们处理数据的动态变化以及响应用户交互。下面将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值