Vue 的属性、方法和生命周期

实例

<!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里面不仅可以定义字符串，我们还可以定义numbermessage: '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）。
计算属性有一个好处在于它有一个缓存机制，因此它不需要每次都重新计算。
监听属性（监听器），它可以监听一个函数或者是一个变量。

方法（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>

更多学习参考：https://www.9xkd.com/site/search.html?key=vue

Vue 的属性、方法和生命周期相关推荐

【Vue】实例对象的生命周期（方法详解）
通过前面的学习,我们知道使用Vue的时候必须创建一个Vue实例对象:var vm = new Vue({...}),那么这个Vue实例的生命周期是怎么样的呢?本文我们就来详细的介绍下. 上图是Vue官 ...
Vue基础进阶之实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
vue实例、指令、生命周期
vue实例.指令.生命周期本章重点 1.生命周期 2.插值 3.指令一.创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue实例开始的语法: ver vm = new V ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
[vue] 跟keep-alive有关的生命周期是哪些？描述下这些生命周期
[vue] 跟keep-alive有关的生命周期是哪些?描述下这些生命周期 activated和deactivatedkeep-alive的生命周期1.activated: 页面第一次进入的时候,钩子 ...
vue脚手架的安装、生命周期、文件导入格式、局部组件和全局组件、动态添加属性和方法、插槽、传值
----------------------------------- DOS命令进入dos: win+r 切换盘符: d: 查看: dir 打开文件夹: cd 文件夹的名字返回上一级目录 ...
【SSM - Spring篇01】spring详细概述，Spring体系结构，bean、property属性，Spring生命周期方法
文章目录 1. Spring介绍 2. Spring体系架构 2.1 Spring核心容器(Core Container) 2.2 数据访问/集成(Data Access/Integration) 2 ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
vue笔记（三）生命周期、组件（嵌套）、数据传递
生命周期文档一.生命周期 1.参考一 2.参考二二.自定义组件 1. 使用:<组件名></组件名> 2. 定义组件: (1)方法一:官网 let 组件变量名 = Vue.e ...

Vue 的属性、方法和生命周期

实例

属性

方法（methods）

生命周期（钩子函数）

Vue 的属性、方法和生命周期相关推荐

最新文章

热门文章