Vue响应式声明渲染机制

1.onclick响应式渲染

<div id="#app"><p>{{message}}</p><input v-model="message"></input><button onclick="alert('message='+app.message)">点击看看</button>
</div>

<script>var maDate = {message:'HELLO ZMR'}var app = new Vue({el:"#app",data:myDate})
</script>

现在的数据和DOM是绑定在一起的，所有的元素都是响应式的

直接修改app.message是可以直观的看到其中的变化的

onclick可以替换成@click来简写，效果一样

2.Vue属性绑定

如果页面需要超链接，那么直接<a href={{url}}></a>,然后下面data数据里面url一个地址很明显是不可以的，这个时候就需要使用v-bind来进行属性值的绑定

<a v-bind:href="url">点击跳转</a>

当然，还可以使用缩写

<a:href="url">点击跳转</a>

3.Vue计算属性

一般情况下计算属性用法的话是为了便于维护和利用代码的可重复开发性而生的，比如当购物车的数据需要经常改变的时候，每一次活动优惠券的减免还有免单的属性更是需要计算属性的加持才可以更大程度的完善代码的可复用性。

<div id="app"><h2>张某人图书</h2><div>您购买了{{book.name}}共{{book.num}}本===￥{{book.price}}/本</div><div>总价:{{totalprice}}元</div>
</div>

<script>var vm = new Vue({el:"#app",data:{book:{id:1,name:"Vue.js",num:1,price:10},discount:0.8,deliver:12},computend:{totalprice(){return (this.book.price*this.book.num)*this.discount+this.deliver;}}})
</script>

4.计算属性中的getter和setter

计算属性中一般有一个getter和一个setter，一般计算属性的默认设置是getter，然后当计算属性里面的值发生变化的时候，那个setter就开始触发了。

computed:{fullName:{get:function(){return this.name},set:function(name){this.lastName}}
}

5.计算属性与methods的区别

计算属性是数据处理结构清晰
依赖于数据，若数据更新，则自动处理更新
计算属性内部this指向vm实例
不需要缓存功能就用methods，需要就用计算属性
在模板调用时，直接写计算属性名即可
常用的是getter方法，用于获取数据，也可以使用setter方法改变数据
相比较而言，不管依赖的数据是否改变，methods都会重新计算，依赖的数据不变的时候，computend从缓存中获取，不会重新计算

Vue响应式声明渲染机制相关推荐

深入浅出 Vue 响应式原理！
作者 | 浪里行舟责编 | 胡巍巍 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
Vue响应式原理的简单模型
1.前言最近在梳理vue响应式的原理,有一些心得,值得写一篇博客出来看看. 其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理.以往学习这 ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
VUE 响应式原理源码：带你一步精通 VUE | 原力计划
作者 | 爱编程的小和尚责编 | 王晓曼出品 | CSDN博客学过 VUE 如果不了解响应式的原理,怎么能说自己熟练使用 VUE,要是没有写过一个简易版的 VUE 怎么能说自己精通 VUE,这篇 ...
Vue响应式实现原理
Vue响应式原理 Vue是数据驱动视图实现双向绑定的一种前端框架,采用的是非入侵性的响应式系统,不需要采用新的语法(扩展语法或者新的数据结构)实现对象(model)和视图(view)的自动更新,数据层 ...
Vue响应式原理 vue源码(十一)
前言看过很多讲响应式的文章,大多都是告诉你们,有Observer,Dep,Wathcer类,Object.definePorperty,先会触发get中的dep.depend收集依赖,然后数据改变时 ...
模拟Vue响应式原理
模拟Vue响应式原理设计模式发布订阅模式我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向 ...
深入浅出Vue响应式原理
前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样重要,这 ...
Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

Vue响应式声明渲染机制

Vue响应式声明渲染机制相关推荐

最新文章

热门文章