一、内置指令[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的更多相关文章

  1. Vue Learning Paths

    Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...

  2. 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 ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. 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, ...

  7. [Angular2] @Ngrx/store and @Ngrx/effects learning note

    Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. 十九、CSS如何引入字体

    将相应的字体放入新建的文件夹,然后在Css文件里面如下图引入 @font-face { font-family: FZLTCXHJW; src: url(../font/FZYouHJW_Xian_a ...

  2. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  3. SSIS ->> 管理和维护SSISDB

    Comming soon!!! 参考文献: Setup and Performance Issues with the Integration Services (SSIS) 2012 Catalog ...

  4. windows常用快捷命令

    打开控制面板 control.exe 1.操作中心 wscui.cpl 2.Windows防火墙 Firewall.cpl 3.设备管理器 hdwwiz.cpl 4.Internet属性 inetcp ...

  5. MySQL案例之Timestamp和Datetime

    mysql数据库常用的时间类型有timestamp和datetime,两者主要区别是占用存储空间长度不一致.可存储的时间也有限制,但针对不同版本下,timestamp字段类型的设置需要慎重,因为不注意 ...

  6. SQL计算上下两行某列的差

    SELECT * FROM #TempHuDong SELECT * FROM #TempHuDong SELECT TOP 1 ABS(a.num -b.num) '差' FROM (select ...

  7. 使用Powershell 管理 Windows 2012 hyper-v复制

    HyperV复制相关命令 Suspend-VMReplication Suspends replication of a virtual machine. 暂停复制虚拟机. Resume-VMRepl ...

  8. 【Leetcode】【Easy】Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...

  9. RabbitMq ack 与 nack

    1.ack 移除 2.nack 移除再次发送队列

  10. linux系统参数

    vm.swappiness = 清理掉cache给新的程序用当然可以, 但也带来了新的问题, 也就是如果这些(原来cache里的)数据还要使用, 又得重新cache. 产生了新的IO, 新的wait. ...