(7)打鸡儿教你Vue.js
计算属性
computed
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
计算属性的实例:
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'dashu!'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
computer 属性“依赖缓存”的概念
method 的概念
有缓存,不会发生改变,于是界面渲染就直接用这个值,不再重复执行代码
没有缓存,只要用一次,函数代码就执行一次
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(7)打鸡儿教你Vue.js的更多相关文章
- (29)打鸡儿教你Vue.js
web阅读器开发 epub格式的解析原理 Vue.js+epub.js实现一个简单的阅读器 实现阅读器的基础功能 字号选择,背景颜色 有上一页,下一页的功能 设置字号,切换主题,进度按钮 电子书目录 ...
- (26)打鸡儿教你Vue.js
weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...
- (22)打鸡儿教你Vue.js
vue.js 单页面,多页面 Vue cli工具 复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代码实现,线上测试 git clone,git int 创建分支,推送分支,合并分支 ...
- (21)打鸡儿教你Vue.js
组件化思想: 组件化实现功能模块的复用 高执行效率 开发单页面复杂应用 组件状态管理(vuex) 多组件的混合使用 vue-router 代码规范 vue-router <template> ...
- (19)打鸡儿教你Vue.js
了解vue2.x的核心技术 建立前端组件化的思想 常用的vue语法 vue-router,vuex,vue-cli 使用vue-cli工具 Vue框架常用知识点 vue核心技术 集成Vue 重点看,重 ...
- (18)打鸡儿教你Vue.js
介绍一下怎么安装Vue.js vue.js Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性. Vue.js是一个渐进的,可逐步采用的Jav ...
- (17)打鸡儿教你Vue.js
vue-router <a class="list-group-item" v-link="{ path: '/home'}">Home</a ...
- (15)打鸡儿教你Vue.js
组件化vue.js 组件单向绑定 组件双向绑定 组件单次绑定 创建组件构造器 注册组件 使用组件 Vue.extend() Vue.component() 使用组件 <div id=" ...
- (13)打鸡儿教你Vue.js
一小时复习 vue.js是一个JavaScriptmvvm库,是以数据驱动和组件化的思想构建的,相比angular.js,vue.js提供了更加简洁,更加容易理解的api,如果习惯了jquery操作d ...
- (12)打鸡儿教你Vue.js
组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...
随机推荐
- Spring全框架讲解
Day 01: https://blog.csdn.net/sinat_29211659/article/details/81335229
- Linux修改主机名方法
[root@lyx ~]# vim /etc/hosts vim代表修改,进入hosts文件进行添加192.168.10.128 hadoop128 [root@lyx ~]# hostname ...
- List、dictionary、hashtable、ArrayList集合
集合的引用命名空间在 system.Collections下 1.为什么引入集合 因为数组长度是固定的,为了建立一个动态的"数组",所以引入了集合. 2.为什么引入ArrayLis ...
- springboot笔记03——quickstart程序原理
一.前言 一个quickstart程序仅仅让我们初步了解一个框架,我们还需要透过现象看本质才能学好一个框架.所以这篇文章分析一下我上次写的springboot的入门程序. 二.原理分析 1.依赖分析 ...
- rabbitmd
一.前期准备 (1)条件:准备3台linux系统,确保能连到download.yunwei.edu (2)编写yum源下载脚本: vim yum-repo.sh wget -O /etc/yu ...
- 基于【 springBoot +springCloud+vue 项目】一 || 项目架构简介
一.前言 基于前期学习以及工作经验积累,持续更新基于springboot+springcloud+vue的demo项目.
- 13 个 JS 数组精简技巧
来自 https://juejin.im/post/5db62f1bf265da4d560906ab 侵删 数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮 ...
- 关于QPS、TPS、PV、UV、GMV、IP、RPS的名词解释!
名词解释链接:https://blog.csdn.net/jackyrongvip/article/details/98839519
- CEIWEI CommTone串口调试精灵7.1 串口调试 串口工具
CEIWEI CommTone串口调试精灵 是一款功能强大的串行端口通信调试软件,内嵌超过100种标准的CRC校验功能,并支校验结果高低位字节前导转换:支持批量协议调试,并支持文件.16进制.UN ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs