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 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
微信小程序websocket实现即时聊天功能
May 21 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
小程序的上传文件接口的注意要点解析
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
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
文本加密解密
2006/06/23 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
JS跨域代码片段
2012/08/30 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
浅析vue中的MVVM实现原理
2019/03/04 Javascript
js尾调用优化的实现
2019/05/23 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
利用Python获取操作系统信息实例
2016/09/02 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python内建模块struct实例详解
2018/02/02 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Ref与out有什么不同
2012/11/24 面试题
函授本科自我鉴定
2013/11/03 职场文书
个人授权委托书模板
2014/09/14 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
大学团日活动总结书
2015/05/11 职场文书
大学生暑期实践报告
2015/07/13 职场文书
初一军训感言
2015/08/01 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL