vue.js的小知识

light 发布于2019-08-20 19:04 / 805人阅读

摘要：对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。这就意味着只要还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

vue.js vue.js 的构造

new Vue({})

new new MyComponent()

属性与方法

vue会代理其data对象里所有的属性
例如
data.a=vn.a
vm.$id vm.$data等

生命周期函数实例 (例如，实例需要配置数据观测(data observer)、编译模板、挂载实例到 DOM ，然后在数据变化时更新 DOM 。)

==钩子函数==
*created（创建后）
*mounted（载入后）
*updated（更新后）d（销毁后）
*estroyed（销毁后）

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log("a is: " + this.a)
  }
})

插值 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值： 为了输出真正的 HTML ，你需要使用 v-html 指令：

v-bind

mustache 语法不能作用在 HTML 特性上所以用v-bind来给HTML属性
v-bind:title="" 等可以缩写为：title

v-bind:href="" 等可以缩写为：href

v-on 用于监听事件

v-on:click="" 缩写为@click=""

过滤器（过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。）

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：


    {{mas|pps|pps1}}

计算属性 vs method 与vs watched 属性的区别

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + " " + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(" ")
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

GPU云服务器云服务器关于网络安全的小知识 Vue.js vue.js 属性 vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85104.html

前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
Java 初学者做的第一个微信小程序总结--关于Java基础

摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。为什么学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点；也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。项目展示本...

mudiyouyou 2019-08-16 14:30 评论0 收藏0
程序员练级攻略（2018）：前端性能优化和框架

摘要：，谷歌给的一份性能指南和最佳实践。目前而言，前端社区有三大框架和。随后重点讲述了和两大前端框架，给出了大量的文章教程和相关资源列表。我认为，使用函数式编程方式，更加符合后端程序员的思路，而是更符合前端工程师习惯的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 这个是我订阅陈皓老师在极客上的专栏《左耳听风》...

VEIGHTZ 2019-08-02 12:04 评论0 收藏0
程序员练级攻略（2018）：前端性能优化和框架

摘要：，谷歌给的一份性能指南和最佳实践。目前而言，前端社区有三大框架和。随后重点讲述了和两大前端框架，给出了大量的文章教程和相关资源列表。我认为，使用函数式编程方式，更加符合后端程序员的思路，而是更符合前端工程师习惯的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 这个是我订阅陈皓老师在极客上的专栏《左耳听风》...

CoffeX 2019-08-26 13:25 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0