【前端开发】一文带你精通Vue.js框架(六)

简介: 【前端开发】一文带你精通Vue.js框架(六)


前言

上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.,现在让我们接着Vue系列的学习。

Vue中属性与样式绑定在开发中的作用不可或缺。例如实现单位的换算、监听和响应数据的变化及输入事件等,本文将基于实例进行以上知识点的讲解。


计算属性

Vue.js计算属性是一种便捷的声明式方式来定义一个与模板数据绑定相关联的属性。它们可以用于处理和转换数据,并且只有在其依赖的数据发生改变时才会重新求值。

计算属性的定义格式为:

computed: {
  // 计算属性名称
  propertyName: {
    // 计算函数/方法
    get () { /* 计算函数体 */ }
  }
}

其中,propertyName 是计算属性的名称,get() 方法是计算属性的计算函数,它会自动监听数据变化,并在需要时重新计算。

在模板中使用计算属性时,只需像访问普通属性一样访问即可,如:

<div>{{ reversedMessage }}</div>

下面是一个简单的示例,展示了如何定义一个计算属性:

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

上述代码中,我们定义了一个名为reversedMessage的计算属性。它使用split函数分割message属性中的字母,并使用reverse函数将它们反转,最后使用join函数将它们重新连接成一个字符串。

我们举一个实例,试图将缺无花反转为花无缺:

由上图可知,我们用计算属性成功实现了字符串的反转

在Vue.js中,计算属性是基于它们的依赖进行缓存的。也就是说,当依赖的数据发生改变时,才会重新求值。这样在多次访问计算属性时,它不需要每次都重新计算,而是直接返回之前缓存的值。


监听属性

除了计算属性,Vue.js还提供了一个类似的实例方法watch,用于监听和响应数据的变化。

而用于监听和响应数据变化的属性,就称为监听属性。

watch可以监听一个或多个属性的变化,并在变化发生后执行相应的操作。

下面是一个使用watch方法的示例:

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

在HTML中,有一个id为"app"的容器元素,用于挂载Vue应用。

在Vue实例中,定义了一个名为"counter"的数据属性,初始值为1。

通过双花括号插值语法{{ counter }},将计数器的值渲染到页面上的一个<p>标签中。

通过@click指令绑定到按钮上,当按钮被点击时,计数器的值会自增1。

使用vm.$watch方法监视"counter"属性的变化,并在每次变化时弹出一个警告框,显示计数器的旧值和新值。

回显如下:

我们也可以用watch实现千米与米的换算:

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一个实例方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 这个回调将在 vm.kilometers 改变后调用
    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>

由下图看到,Vue中监听属性的使用是十分快捷高效的:


样式绑定

Vue.js 提供了多种方式来实现样式绑定。下面是几种常用的样式绑定方法:

1.对象语法:使用对象语法可以根据条件动态地绑定样式。你可以在data中定义一个样式对象,然后将其绑定到元素上。例如,假设有一个名为isActive的数据属性,用于表示元素是否应该处于活跃状态。可以像这样绑定样式:

<div :class="{ active: isActive }"></div>

在上述例子中,如果isActivetrue,则会给div元素添加active类。

2.数组语法:使用数组语法可以根据多个条件同时绑定样式。你可以在data中定义一个包含多个类名的数组,然后将其绑定到元素上。例如,假设有一个名为classNames的数据属性,它是一个包含多个类名的数组。可以像这样绑定样式:

<div :class="classNames"></div>

在上述例子中,classNames数组中的类名都会被添加到div元素上。

3.绑定内联样式对象:我们也可以使用对象语法来绑定内联样式。可以在data中定义一个样式对象,然后将其绑定到元素的style属性上。例如,假设有一个名为customStyle的数据属性,它是一个包含多个样式属性的对象。可以像这样绑定样式:

<div :style="customStyle"></div>

在上述例子中,customStyle对象中的样式属性会应用到div元素的内联样式上。

举个例子:

<div id="app">
    <template>
      <div :style="{ color: textColor, fontSize: fontSize + 'px' }">绑定内联样式对象的实例</div>
    </template>
  </div>
  <script>
    new Vue({
      el: "#app",
      template: `![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/a59efc156f194dcd9139d8ff447660ce.png)
        <div :style="{ color: textColor, fontSize: fontSize + 'px' }">绑定内联样式对象的实例</div>
      `,
      data() {
        return {
          textColor: "blue",
          fontSize: 20
        };
      }
    });
  </script>

在这个例子中,div元素的文本颜色将设置为蓝色(由textColor属性控制),字体大小将根据fontSize属性的值动态计算。

我们来看看页面的回显:

通过回显可以看到,我们完成了样式绑定。


总结

以上为前端开发:一文带你精通Vue.js前端框架系列(六),带领读者掌握计算属性、监听属性及样式绑定。

前端开发系列将持续更新,读者可订阅专栏持续学习。


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
27天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
42 5
|
28天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
28天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
36 2
|
29天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
28天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
68 1
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
31 9
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
36 4