Hank's Blog

耕种思考的自留地

0%

利用css3的动画属性可以实现很多有趣的动画效果。

animation 循环动画

animation-iteration-count 属性设置为 infinite 可以使动画循环播放。

loading效果

demo1
定义一个垂直伸缩的 keyframes ,然后绑定在每个条子上,设置不同的animation-delay,就可以使每个条子运动起来,整体成波浪线运动。当网页中有需要等待的请求时,我们就可以插入这段动画,优化用户体验。

Read more »

CSS3中有三个属性:transform、transition、animation,一直容易搞混,今天特意拎出来理一理。

transform 转换

transform 能够对元素进行移动、缩放、转动、拉长或拉伸。transform 分为2D转换和3D转换,由于目前浏览器对3D转换的支持度还不好,所以以下主要讲解2D转换。

Read more »

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。注册全局指令的关键方法是directive(),注册局部指令的关键方法是directives()

钩子函数

指令定义函数提供了几个钩子函数(可选):

  • bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
    Read more »

继续组件的内容,接下来是 vue 组件的重要内容。

父子组件

子组件只能在父组件中只用,写在html中的是父组件的标签。使用组件有三步:定义,注册,创建根实例。以下代码是很好的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="example">
<my-component></my-component>
</div>
<script>
//定义组件
var child = Vue.extend({
template: "<div>this is a child component!</div>"
})
var parent = Vue.extend({
template: "<div>this is a parent component! <child></child></div>",
components: {
'child': child
}
})
//注册组件
Vue.component('my-component', parent)
//创建根实例
new Vue({
el:'#example'
})
</script>
Read more »

引言

一开始接触vue的时候老实说我是一脸懵逼的,一下子还没从jQuery的思维中解脱出来,因此研究了好久的,过了一段时间后,再翻开vue的文档,总算是有些眉目了,现在记录下自己的理解吧,有写的不对的地方欢迎指正。这里只记录了我个人的理解,要详细的推荐Vue官方文档

我理解的vue核心思想

1.视图参数化,数据驱动视图
view(DOM节点)的属性被参数化,参数化的值被记录在Vue实例的data属性中,当通过methods中的函数改变data中的数据时,view也会发生变化,从而达到数据驱动视图的作用。

Read more »