Vue learning experience
一、内置指令[v-ref]
Official-document-expression:
父组件在子组件上注册的索引,便于直接访问。不需要表达式,必须提供参数ID,可以通过父组件的$ref对象访问子组件。当v-ref和v-for一起使用时,注册的值将是一个数组,包含所有的子组件,对应与绑定数组。如果v-for使用在一个对象上,注册的值将是一个对象,它包含所有的子组件,对应于绑定对象。
example:
v-ref一般而言,用于组件引用,比如:
<el-input v-ref="myinput"></el-input>
这样你可以在JS里使用this.$refs.myinput
直接指向这个组件实例,并且这个值直接指向组件本身的this。比如这个组件有一个方法aaa( ),你就可以用this.$refs.myinput.aaa()
直接调用这个组件的方法。
Re-expression:
在组件上添加v-ref指令,内传值为参数值,而非表达式。在父组件中可以通过
document.getelement
方式获取要操作的dom对象,而且可以获取此对象里的this,对象的属性以及绑定的事件等等。与v-for一起使用时,循环出一个数组或对象,具体情况看v-for循环的是什么参数。
二、内置指令[v-repeat、v-for]
My-expression:
ES5时,v-for不允许对对象做循环遍历,所以增加了v-repeat,v-repeat可循环数组及对象。ES6时,v-for也可以对对象做遍历了。
另:v-repeat可做无数据自定义变量循环,比如<ul v-repeat=" n in 10 ">{{n}}</ul>
三、内置指令[v-pre]
Official-document-expression:
添加v-pre内置指令的元素,编译时会跳过它和它的子元素,可以用来显示原始的Mustache标签。跳过大量没有指令的节点编译会加快。
四、自定义指令及钩子函数
Official-document-expression:
除了内置指令之外,Vue允许注册自定义指令。虽然代码复用和抽象的主要形式依然是组件,但是某些情况下,仍然需要对DOM元素进行底层操作,此时会用到自定义指令。一个指令对象可以提供如下几个钩子函数。
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
updated
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind
:只调用一次,指令与元素解绑时调用。
钩子函数参数[el、binding、vnode、oldVnode],除el其他参数只读。
若指令需要传入多个参数,可使用字面量形式。
Re-expression:
自定义指令用于对DOM元素做底层操作,语法结构如下example。钩子函数为Vue提供的用于被绑定自定义指令的元素的各个生命周期可供调用的函数。钩子函数的参数可用于获取元素,操控节点。
example:
当页面加载时,该元素获得焦点。
全局指令:
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
}
})
局部指令:
directives:{
focus:{
inserted (el) {
el.focus();
}
}
}
使用
<input v-focus />
属性
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
//字面量形式传入参数
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
五、Vuex
Internet-expression:
Vuex 就是前端为了方便数据的操作而建立的一个” 前端数据库“。
state:数据库——共享数据
getters:取数据的API
mutations:存数据的API
actions:处理数据,若不处理就是直接mutations
getters
export function getPage(state){
return state.ctrl.showPage;
}
mutations
[SHOW_PAGE](state){
state.ctrl.showPage = true
}
[NEW_DATA](state,payload,id){
const newData = {id,data:payload}
state.meta = Object.assign({},{currentData:id})
state.datas = Object.assign({},newData)
}
actions
export const updateData = function({dispatch,state},data){
const payload = data
const id = state.meta.currentData
if(id==='initial'){
const id = createDataId()
dispatch('NEW_DATA',payload,id)
}else{
dispatch('UPDATE_DATA',payload)
}
}
生命周期:
deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
https://www.cnblogs.com/webbest/p/6722780.html
BUG Point:
实测在进入 keepAlive: false 的组件后再重新进入 keepAlive: true 的组件时原来的状态丢失了,如果切换路由一直是 keepAlive: true 则没问题。
Vue learning experience的更多相关文章
- Vue Learning Paths
Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...
- Learning Experience of Big Data: Learn to install CentOs 6.5 on my laptop
I have learnt some experience about Big Data during my summer vocation,I was told that The first thi ...
- Learning Experience of Big Data: Deploying Tomcat 8.0 and connect ssh without password
This mission seems to be easier--we can just decompression Tomcat to our virtural machine and deploy ...
- Learning Experience of Big Data: Connect CentOs to Xshell and set Java environment on CentOS
1.set up connections between vitural machine and Xshell: After we connect the virtural machine to ne ...
- Learning Experience of Big Data:The First Day-Try to set up a network connection on my virtural machine
After we install our virtual machine,the first thing we should do is to set up a network connection ...
- What are some good books/papers for learning deep learning?
What's the most effective way to get started with deep learning? 29 Answers Yoshua Bengio, ...
- [Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...
- [C5] Andrew Ng - Structuring Machine Learning Projects
About this Course You will learn how to build a successful machine learning project. If you aspire t ...
- [C3] Andrew Ng - Neural Networks and Deep Learning
About this Course If you want to break into cutting-edge AI, this course will help you do so. Deep l ...
随机推荐
- 比特币钱包Armory使用指南
转自:http://news.yibite.com/application/2014/0525/21603.shtml 比特币钱包Armory(https://bitcoinarmory.com/)是 ...
- jq扩展
方法一(不常用)$.myjq = function(){alert("hello myjQuery);}方法二声明:$.fn.myjq=function(){$(this).text(&qu ...
- vscode环境配置
"go.goroot": "/home/ken/go", "go.gopath": "/home/ken/gopath" ...
- C/C++ 合法整数与字符
一.C语言中的合法整型 首先C语言中的整型有三种表示方式:十进制.八进制和十六进制.(C语言中没有表示二进制的整型) 十进制: 如 int a = 63; //一个正常的整型 八进制: 如果想用8进制 ...
- 【设计模式最终总结】桥接模式 VS 外观模式
差异点 外观模式,是把功能通过一个接口提供出来,方便日后更换实现,或者这种实现可以由多方提供,但同时只用一个.典型例子:@Slf4j 桥接模式,多个维度,每个维度提供一个接口,这些接口集中在一个类中, ...
- mvc 从客户端 中检测到有潜在危险的 Request 值
往MVC中加入了一个富文本编辑框,在提交信息的时候报了如下的错误: 从客户端(Content="<EM ><STRONG ><U >这是测试这...&qu ...
- 小技巧:Mac下Metasploit渗透Oracle环境的搭建
Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全风险情报.这些功能包括智能开发,密码审计, ...
- 10个出色的NoSQL数据库(转)
随着大数据的不断发展,非关系型的数据库现在成了一个极其热门的新领域,非关系数据库产品的发展非常迅速.现今的计算机体系结构在数据存储方面要有庞大的水平扩展性,而NoSQL也正是致力于改变这一现状.目前G ...
- mongoDB 创建数据库、删除数据库
创建数据库 use 命令 MongoDB 用 use + 数据库名称 的方式来创建数据库.use 会创建一个新的数据库,如果该数据库存在,则返回这个数据库. 语法格式 use 语句的基本格式如下: u ...
- UVa 10820 - Send a Table(欧拉函数)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...