试着用Vue做了一个小东西,总结一下,很多都是官网有的,只是记录下了作为一个学习笔记吧。
Vuejs 组件
组件的使用,需要先注册再使用。
1 | Vue.component('componentName',{ /*component*/ }); |
1 | Vue.component('mine',{ |
指令
指令是指带有v-前缀的特殊属性,当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM,指令可以有参数(指令只有以冒号表示)和修饰符(以.修饰)
1 | var myHeader = { |
指令keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
1 | <component :is='curremtView' keep-alive></component> |
属性
计算属性
computed计算属性 选项会被缓存
也可以通过调用方法来计算属性,使得每次的属性都是重新调用生成的
watch–监听属性变化
1 | <input type = "text" v-model = "myVal"> |
事件绑定
1 | <button @click="addItem">addItem</button> |
css只在当前组件中起作用
在每一个vue组件中都可以定义各自的css,js,如果希望组件内写的css只对当前组件起作用,只需要在style中写入scoped,即
1 | <style scoped></style> |
vuejs循环插入图片
1 | <div class="bio-slide" v-for="item in items"> |
vuejs中过渡动画
1 | .zoom-transition { |
就这样吧,有时间把Vuex Vue Router 一起写一篇详细的。