生命周期函数以及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的生命周期不甚了解.只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的.因为我们有时候会在几个钩子函 ...
随机推荐
- 聚类——WKFCM
聚类——认识WKFCM算法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 参考文献:Shen H, Yang J, Wang S, et al. At ...
- 让python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE等请求(新方法)
通过上篇博文的方法处理后,进入代码调试后发现ajax获取不了服务器端返回的数据,度娘后发现原来AJAX的OPTIONS请求方式是状态类型查询,即向服务器提交信息后不返回任何信息,只将执行状态(200状 ...
- python 基本数据类型--字符串实例详解
字符串(str) :把字符连成串. 在python中⽤', ", ''', """引起来的内容被称为字符串 . 注意:python中没有单一字符说法,统一称叫字 ...
- tomcat的webapps目录中的abc.war
1 在tomcat的webapps目录中,会有类似abc.war类型的文件,在tomcat启动时会自动解压为abc目录. 2 如果tomcat在运行中,不要直接删除abc.war文件,删除后,ab ...
- 前端使用 Nginx 反向代理彻底解决跨域问题
引入网址https://blog.csdn.net/larger5/article/details/81286324 1.请求后端数据失败 代码: <!DOCTYPE html> < ...
- oracle SQL 执行进度
SELECT SS.USERNAME, SS.SID, SS.SERIAL#, SS.MACHINE, SS.PROGRAM, SL.OPNAME, SL.TARGET, SL.START_TIME, ...
- 【LOJ 3049】「十二省联考 2019」字符串问题
这个D1T2绝对有毒... 首先我们构造一把反串的后缀自动机. 然后我们就需要找到每一个子串在SAM上的节点. 这个可以通过扫描线+树上倍增处理. 首先我们把所有的子串按照左端点排序, 然后从右往左扫 ...
- [Spark][kafka]kafka 生产者,消费者 互动例子
[Spark][kafka]kafka 生产者,消费者 互动例子 # pwd/usr/local/kafka_2.11-0.10.0.1/bin 创建topic:# ./kafka-topics.sh ...
- 使用Windows Live Writer撰写的第一篇博文
一直没有时间,在自己的电脑上配置起来Windows Live Writer. 今天抽时间搞起来后,感觉果然比在Web版写作不知道爽多少倍哦. 还安装了代码插件,上传代码和图片也方便了很多,霸气. 先上 ...
- Java类的加载及实例的创建
java中class.forName()和classLoader都可用来对类进行加载.class.forName()前者除了将类的.class文件加载到jvm中之外,还会对类进行解释,执行类中的sta ...
