beforeCreate 在创造实例之前
created 创造实例以后
beforeMount 在挂载前
render 渲染节点到页面上 //将虚拟dom数组渲染出来
mounted 挂载以后
beforeUpdate 修改之前
updated 修改以后 在这里不要进行数据的持续修改类似 +=类似的操作会引起死循环
beforeDestory 销毁之前 //用来释放非vue引起的资源。如setInterval();
destroyed 销毁之后 在组件激活 <keep-alive></keep-alive>时可以调用的钩子函数
activated
在组件卸载 <keep-alive></keep-alive>时调用的钩子函数
deactivated 在watch中可以深度监听 wacth:{ //深度监听是用来监听

但只是浅监听,只监听数据第一层或者第二层,

何为第二层?

let obj = {name: 'xx', child: {age: 11}};

    "obj.child.age":{
handler(newValue,OldValue)=>{
immediate:true,
deep:true //深度监听
}
}
}
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
Vue API
全局配置(Vue.config)
silent
类型: Boolean
取消Vue所有的日志和警告
Vue.config.silent = false
=================
optionMergeStrategies
类型:Function
自定义合并策略的选项。
合并策略选项分别接受第一个参数作为父实例,第二个参数为子实例,Vue实例上下文被作为第三个参数传入。 Vue.config.optionMergeStrategies._my_option = function(parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
=================
Vue.directive(id, [definition])
注册或获取全局指令。 // 注册
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 注册(传入一个简单的指令函数)
Vue.directive('my-directive', function () {
// 这里将会被 `bind` 和 `update` 调用
})
// getter,返回已注册的指令
var myDirective = Vue.directive('my-directive')
后端路由:根据用户的不同的请求返回不同的内容。
vue-router 是根据hash值实现的。
根据监听hashchange事件。
npm i vue-router --save
1)import VueRouter from "vue-router"
2) Vue.use(VueRouter)
3) new VueRouter

生命周期函数以及vue的全局注册的更多相关文章

  1. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  2. Vue 全局注册逐渐 和 局部注册组件

    //定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...

  3. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  4. vuejs生命周期函数

    生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...

  5. keep-alive与生命周期函数

    理解keep-alive keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 router-view也是一个组件,如果直接被keep-alive包在里面,所有路径匹 ...

  6. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  7. Vue定义组件和生命周期函数及实例演示!

    定义全局组件 Vue.component("name",{...}) 定义局部组件 let Com = {....} new Vue({ data : ..., ..., comp ...

  8. Vue过滤器、生命周期函数和vue-resource

    一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. Vue之生命周期函数和钩子函数详解

    在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...

随机推荐

  1. February 14th, 2018 Week 7th Wednesday

    Love does not dominate, it culitvates. 爱不是羁绊,而是成就. Love should not wipe out everything you are, love ...

  2. 如何使用微信web开发者工具调试企业微信

    最近因工作需要围绕着企业微信来进行调试,从而掏出了我的微信web开发者工具,在进行授权的时候微信web开发者工具成功的提示了我:“您未绑定企业微信开发者权限”.那么关键来了,因为我也百度过,发现也有很 ...

  3. 《Java大学教程》—第10章 图形和事件驱动程序

    10.2 Swing程序包AWT(Abstract Window Toolkit): 抽象窗口工具集.依赖于本地操作系统的组件被称为重量级(Heavy Weight)组件,因为它们都会大量使用系统资源 ...

  4. InfluxDB部署

    InfluxDB介绍 官网:https://www.influxdata.com/ 文档:https://docs.influxdata.com/influxdb/v1.2/introduction/ ...

  5. Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式

    定义数据: <script> new Vue({ el:"#test", data:{ message:"infor", list:["a ...

  6. jq stop()和:is(":animated")用法区别

    stop(true,true): 表示停止匹配元素正在进行的动画并跳转到末状态,清空未执行完的动画队列.常用于”解决光标移入移出得过快导致的动画效果与光标动作不一致“问题! jQuery stop() ...

  7. 用惯图形界面的SVNer,如何突破Git----简单教程

    1.使用Git,首先安装好Git,它会赠送一个Git Bash给你 2.接下来,踩第一个坑----SSH连接,我们知道用Git关联本地仓库可以用SSH和HTTP两种方式,为什么不用HTTP,因为 不! ...

  8. 【HNOI2013】切糕

    [HNOI2013]切糕 Sample Input 2 2 2 1 6 1 6 1 2 6 2 6 Sample Output 6 \(P,Q,R≤40,0≤D≤R\) 参考:https://blog ...

  9. 2.04-proxy-handler

    import urllib.request def create_proxy_handler(): url = "https://blog.csdn.net/m0_37499059/arti ...

  10. Rancher3----安装部署rancher

    官方说:Rancher是使用一系列的Docker容器进行部署的.运行Rancher跟启动两个容器一样简单.一个容器作为管理服务器部署,另外一个作为集群节点的Agent部署 官方的意思是:学好docke ...