vue.js基础知识篇:过渡Method和Vue实例方法

Posted 2020-09-24 陈蒙的技术空间

第8章:过渡

 1.CSS过渡

2.javascript过渡

3.渐进过渡

第9章:method

Vue.js的事件一般通过v-on指令配置在html中，虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听，但并不推荐，因为它并不符合“关注点分离”的设计理念。

使用v-on指令有几点好处:

通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件，ViewModel和DOM完全解耦、易于测试;当一个ViewModel被销毁时，所有的事件处理器都会被自动删除，避免内存泄漏。

1.如何绑定事件

对照着看，js使用onclick注册事件，angularJS使用ng-click指令注册事件。

step1，使用类似的v-on:click指令

它的特点，首先是“一次绑一个”，这种内联的方式只能一次绑定一个方法，要绑定多个方法，还得使用原生的javascript的原生方法addEventListener方法。然后，指令的限定表达式除了是一个方法名还可以是js语句。第三，它有缩写，"@click"。

step2，methods配置

对应的方法需要在Vue实例中的methods属性中进行定义。

step3:使用特殊变量$event访问原生DOM事件(optional，补充了解)

 

2.v-on指令的修饰词

一共提供了4个v-on事件修饰词，".prevent"、".stop"、".capture"、".self"。它们可以串联哦。

3.键盘事件(按键)的别名

键盘事件经常需要检测keyCode，Vue.js非常贴心的为常用的按键提供了别名。

enter、tab、delete、esc、space、up、down、left、right。

第10章:Vue实例方法

Vue所有的实例属性和方法都是以前缀$开头的。

1.组件树访问

一共有4个实例属性:$parent(当前组件实例的父实例)、$root(当前组件的根实例)、$children(当前组件的直接子组件实例)、$refs(用来访问使用了v-ref指令的子组件)。

2.DOM访问

一共有2个实例属性:$el(挂载当前组件的dom元素)、$els(使用了v-el指令的DOM元素)。

3.数据访问

一共有2个实例属性:$data(数据对象)、$options(初始化选项对象)。

4.实例DOM方法的使用

一共有5个实例DOM方法:

$appendTo()用来将el所指的DOM元素或片段插入到目标元素中(内部插入)。对比:jQuery中的appendTo()方法。

$before()用来将el所指的DOM元素或片段插入到目标元素之前(同级插入)。对比:jQuery中的before()方法。

$after()用来将el所指的DOM元素或片段插入到目标元素之后(同级插入)。对比:jQuery中的after()方法。

$remove()用来将el所指的DOM元素或片段从DOM中删除(删除)。对比:jQuery中的remove()方法

$nextTick()用来在下次DOM更新循环后执行指定的回调函数(延迟)。

5.实例Event方法的使用

一共有6个Event方法。

$on()监听自定义事件。对比:jQuery的on()方法。

$once()监听自定义事件，但只触发一次。对比:jQuery的one()方法。

$emit()触发事件。对比:jquery的trigger()方法。

$dispatch()派发事件。对比:jquery的dispatch()。

$broadcast()广播事件。对比:angularjs的$broadcast()。

$off()删除事件监听器。对比:angularjs的off()。