热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue构造器

构造器每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:varvmnewVum({选项})Vue.js组件都是被扩展的Vue实

构造器

每个Vue.js 应用都是通过构造函数Vue 创建一个Vue 的根实例启动的:

<script> var vm=new Vum({ // 选项 }) script>

Vue.js 组件都是被扩展的Vue 实例。
可扩展Vue 构造器,从而用与定义选项可复用的组建构造期:

<script> var myCompOnent=Vue.extend({ //扩展选项 }) //所有的‘myComponet’ 实例都将以预定义的扩展选项被创建 var myCompOnentInstance= new myComponent() script>

属性和方法

每个Vue 实例都会代理其data 对象里所有的属性:
注:只有被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染。

<script>
var data={a:1}
var vm=new Vue({
data:data
})
vm.a === data.a //1
vm.a =2
console.log(data.a) //2
</script>

添加前缀 $ ,以便与代理的data 属性区分

<script> var data = {a:1} var vm = new Vue({ el: '#example', data: data }) vm.$data === data vm.$el === document.getElementById('example') vm.$swatch('a',function(newVal,oldVal){ // 这个回调将在‘vm.a’ 改变后调用 }) script>

实例声明周期

每个Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模板、挂载实例到DOM,然后在数据变化是更新DOM。

计算属性

计算属性 vs Methods

computed: { reversedMessage:function(){ return this.message.split('').reverse().join('') }
}
methods:{ reverseMessage:function(){ return this.message.split('').reverse().join('') }
}

计算属性与method 两种方法得到的结果相同。不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。也就意味着只要message 没有发生改变,多次访问reversedMessage 计算属性会立刻返回之前的计算结果,而不必再执行函数


推荐阅读
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 视觉Transformer综述
    本文综述了视觉Transformer在计算机视觉领域的应用,从原始Transformer出发,详细介绍了其在图像分类、目标检测和图像分割等任务中的最新进展。文章不仅涵盖了基础的Transformer架构,还深入探讨了各类增强版Transformer模型的设计思路和技术细节。 ... [详细]
  • Asynchronous JavaScript and XML (AJAX) 的流行很大程度上得益于 Google 在其产品如 Google Suggest 和 Google Maps 中的应用。本文将深入探讨 AJAX 在 .NET 环境下的工作原理及其实现方法。 ... [详细]
  • 本文介绍了SIP(Session Initiation Protocol,会话发起协议)的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]
  • 本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ... [详细]
  • 入门指南:使用FastRPC技术连接Qualcomm Hexagon DSP
    本文旨在为初学者提供关于如何使用FastRPC技术连接Qualcomm Hexagon DSP的基础知识。FastRPC技术允许开发者在本地客户端实现远程调用,从而简化Hexagon DSP的开发和调试过程。 ... [详细]
  • Web动态服务器Python基本实现
    Web动态服务器Python基本实现 ... [详细]
  • 本文探讨了如何通过Service Locator模式来简化和优化在B/S架构中的服务命名访问,特别是对于需要频繁访问的服务,如JNDI和XMLNS。该模式通过缓存机制减少了重复查找的成本,并提供了对多种服务的统一访问接口。 ... [详细]
  • D17:C#设计模式之十六观察者模式(Observer Pattern)【行为型】
    一、引言今天是2017年11月份的最后一天,也就是2017年11月30日,利用今天再写一个模式,争取下个月(也就是12月份& ... [详细]
  • 本文详细介绍了 JavaScript 中 Split 方法的使用方式和一些实用技巧。通过示例,我们将探讨如何利用 Split 方法有效地分割字符串,并获取所需的数据。 ... [详细]
  • Zabbix自定义监控与邮件告警配置实践
    本文详细介绍了如何在Zabbix中添加自定义监控项目,配置邮件告警功能,并解决测试告警时遇到的邮件不发送问题。 ... [详细]
  • 本文将从基础概念入手,详细探讨SpringMVC框架中DispatcherServlet如何通过HandlerMapping进行请求分发,以及其背后的源码实现细节。 ... [详细]
  • 小编给大家分享一下Vue3中如何提高开发效率,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获, ... [详细]
  • 在尝试通过自定义端口部署Spring Cloud Eureka时遇到了连接失败的问题。本文详细描述了问题的现象,并提供了有效的解决方案,以帮助遇到类似情况的开发者。 ... [详细]
author-avatar
冫Eva
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有