生命周期函数以及vue的全局注册
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的全局注册的更多相关文章
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- Vue 全局注册逐渐 和 局部注册组件
//定义一个名为 button-counter 的新组件 Script: Vue.component('button-counter',{//button-counter 这个是组件的名字 data: ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- vuejs生命周期函数
生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...
- keep-alive与生命周期函数
理解keep-alive keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染 router-view也是一个组件,如果直接被keep-alive包在里面,所有路径匹 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- Vue定义组件和生命周期函数及实例演示!
定义全局组件 Vue.component("name",{...}) 定义局部组件 let Com = {....} new Vue({ data : ..., ..., comp ...
- Vue过滤器、生命周期函数和vue-resource
一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Vue之生命周期函数和钩子函数详解
在学习vue几天后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
随机推荐
- vue原理简介
写vue也有一段时间了,对vue的底层原理虽然有一些了解,这里总结一下. vue.js中有两个核心功能:响应式数据绑定,组件系统.主流的mvc框架都实现了单向数据绑定,而双向绑定无非是在单向绑定基础上 ...
- 数据结构【查找】—平衡二叉树AVL
/*自己看了半天也没看懂代码,下次再补充说明*/ 解释: 平衡二叉树(Self-Balancing Binary Search Tree 或Height-Balanced Binary Search ...
- Socket引子
=== ''' Socket网络编程: --应用层:http smtp dns ftp ssh snmp dhcp... 无论协议是什么本质上都是数据交换,总结为两种方式:收和发 --传输层(端口Po ...
- How to get Pycharm
PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如:代码跳转.智能提示.自动完成.单元测试.版本控制.此外,该IDE提供了一些高级功能, ...
- jmeter(二十四)dubbo接口测试
最近工作中接到一个需求,需要对一个MQ消息队列进行性能测试,测试其消费能力,开发提供了一个dubbo服务来供我调用发送消息. 这篇博客,介绍下如何利用jmeter来测试dubbo接口,并进行性能测试. ...
- __attribute__ 机制详解(一)
GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute).变量属性(Variable Attribute)和类型 ...
- C#_IO操作_查询指定文件夹下的每个子文件夹占空间的大小
1.前言 磁盘内存用掉太多,想查那些文件夹占的内存比较大,再找出没有用的文件去删除. 2.代码 static void Main(string[] args) { while (true) { //指 ...
- 网络应用简记(4):DNS使用
dns,domain name system,域名系统,把域名转化成ip的系统. 先来看几上工具的使用,这几个工具都能把域名转换成ip,都使用了dns.dns就好比数据库,通过对它的查询,能给url找 ...
- 使用 OpenSSL 创建私有 CA:1 根证书
OpenSSL 创建私有 CA 三部曲:使用 OpenSSL 创建私有 CA:1 根证书使用 OpenSSL 创建私有 CA:2 中间证书使用 OpenSSL 创建私有 CA:3 用户证书 OpenS ...
- Linux 下RPM打包制作流程
原文地址:https://www.cnblogs.com/postgres/p/5726339.html 开始前的准备 安装rpmbuild软件包 yum -y install rpm-build 生 ...
