Vue的属性、方法、生命周期实例代码详解


Posted in Javascript onSeptember 17, 2019

实例

<!DOCTYPE html>
  <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue的属性、方法和生命周期</title>
    <script src="Vue.min.js"></script>
   </head>
  
   <body>
    <div id="main">
     <span>{{ message }}</span>
     <br/>
     <span>{{ number }}</span>
     <br/>
     <button v-on:click="add">add</button>
    </div>
   </body>
  </html>
  
  <script>
   const App = new Vue({
    // 选择器
    el: '#main',
    // 数据
    data: {
     // 在data里面不仅可以定义字符串,我们还可以定义number
     message: 'Welcome to Chivalrous Island!',
     number: 85,
    },
    // 如果我们从服务器得到的数据并不是我们需要的,可能是上面数据的结合,这时我们可以用到一个Vue提供的一个属性:计算属性
    // 计算属性:可以把data里面的数据计算一下,然后返回一个新的数据,它被叫做computed。
    computed: {
     // 可以定义函数,然后返回需要的数据,比如下面我们要得到上面number的平方,计算结果为:
     getSqure: function () {
       return this.number * this.number;
     }
    },
    // 定义函数
    methods: {
     add: function() {
      this.number++;
     }
    },
    // 监听属性(监听器),它可以监听一个函数或者是一个变量
    watch: {
     // 函数接收两个参数值,afterVal代表改变之后的值,beforeVal表示改变之前的值
     number: function(afterVal,beforeVal) {
      console.log('beforeVal',beforeVal);
      console.log('afterVal',afterVal);
     }
    }
   });
  
   // 打印出来的结果
   console.log(App.getSqure);
  </script>

属性

从上面的案例可以知道,属性可以分为计算属性(computed)和监听属性(watch)。

计算属性有一个好处在于它有一个缓存机制,因此它不需要每次都重新计算。

监听属性(监听器),它可以监听一个函数或者是一个变量。

Vue的属性、方法、生命周期实例代码详解 

方法(methods)

methods常调用的函数。

上面的示例中,getSqure,add,number,像这些都是我们自定义的方法。

生命周期(钩子函数)

生命周期就是从它开始创建到销毁经历的过程。

这个生命周期也就是Vue的实例,从开始创建,到创建完成,到挂载,再到更新,然后再销毁的一系列过程,这个官方有一个说法也叫作钩子函数。

<script>
  window.onload = () => {
    const App = new Vue({
      ......
    
      // 生命周期第一步:创建前(vue实例还未创建)
       beforeCreate() {
         // %c 相当于给输出结果定义一个样式
        console.log('%cbeforeCreate','color:green', this.$el);
        console.log('%cbeforeCreate','color:green', this.message);
       },
      // 创建完成
      created() {
         console.log('%ccreated','color:red', this.$el);
         console.log('%ccreated','color:red', this.message);
      },  
      // 挂载之前
      beforeMount() {
        console.log('%cbeforeMount','color:blue', this.$el);
        console.log('%cbeforeMount','color:blue', this.message);
      },
      // 已经挂载但是methods里面的方法还没有执行,从创建到挂载全部完成
      mounted() {
        console.log('%cmounted','color:orange', this.$el);
        console.log('%cmounted','color:orange', this.message);
      },
       // 创建完之后,数据更新前
      beforeUpdate() {
        console.log('%cbeforeUpdate','color:#f44586', this.$el);
        console.log('%cbeforeUpdate','color:#f44586', this.number);
      },
      // 数据全部更新完成
      updated() {
        console.log('%cupdated','color:olive', this.$el);
        console.log('%cupdated','color:olive', this.number);
      },
      // 销毁
      beforeDestroy() {
        console.log('%cbeforeDestroy','color:gray', this.$el);
        console.log('%cbeforeDestroy','color:gray', this.number);
      },
      destroyed() {
        console.log('%cdestroyed','color:yellow', this.$el);
        console.log('%cdestroyed','color:yellow', this.number);
      }
    });
  // 打印出来的结果
    console.log(App.getSqure);
    window.App = App;
  };
  
  // 销毁vue实例
  function destroy() {
    App.$destroy();
  }
  </script>

html:

<body>
    <div id="main">
     <span>{{ message }}</span>
     <br/>
     <span>{{ number }}</span>
     <br/>
     <button v-on:click="add">add</button>
      <br />
     <button Onclick="destroy()">destroy</button>
    </div>
  </body>

Vue的属性、方法、生命周期实例代码详解

Vue的属性、方法、生命周期实例代码详解

总结

以上所述是小编给大家介绍的Vue的属性、方法、生命周期实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
JSONP基础知识详解
Mar 19 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 #Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 #Javascript
ionic2.0双击返回键退出应用
Sep 17 #Javascript
三步实现ionic3点击退出app程序
Sep 17 #Javascript
ionic3双击返回退出应用的方法
Sep 17 #Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 #Javascript
You might like
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
document.compatMode介绍
2009/05/21 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python类装饰器实现方法详解
2018/12/21 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
高考考python编程是真的吗
2020/07/20 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
小露珠教学反思
2014/04/30 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
财务整改报告范文
2014/11/05 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang