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 相关文章推荐
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python多进程实现进程间通信实例
2017/11/24 Python
设置python3为默认python的方法
2018/10/31 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
放弃继承权公证书
2015/01/23 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书