常用四个属性
filters:过滤器 属性
computed:计算属性
methods:方法属性
用{{}}调用方法时要带 ‘()’
watch:观察属性
写代码要细心 不然会耽搁好多时间
点击事件、监听键盘事件都用 v-on指令
v-bind:属性绑定 可以简写为 “ :” v-bind与prop连用 v-bind:prop=""
v-on和v-bind指令写法不同
v-on的值是方法 @dblclick="" 双击按钮实现
事件修饰符stop prevent once
v-model 重点掌握 双向数据绑定
v-model 才需要data:function(){
}
补充:组件的定义中,data必须是一个函数,以保证每个实例可以维护一份被返回对象的独立的拷贝
v-if 和 v-show 的区别使用: 切换频繁的用v-show 不频繁的 用v-if
Prop:单项数据流
##使用transition组件时,必须与
- 条件渲染(使用v-if)
2. 条件展示(使用了v-show)
3. 动态组件
4. 组件根节点 同时使用
注意:(这些是vue自动提供的,我们只需要给这些类class块添加css效果即可)
1.v-enter:进入过渡效果(enter)刚刚开始那一刻。在元素被插入或者show的时候生效,在下一个帧就会立刻移除,一瞬间的事
2.v-enter-active: 表示进入过渡(entering)的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
3.v-leave: 离开过渡(leave)的开始那一刻。在离开过渡被触发时生效,在下一个帧移除,也是一瞬间的事。
4.v-leave-active:离开过渡(leaving)的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。
组件嵌套:
全局引用、局部应用
全局引用在main.js中注册全局
局部引用在App.vue中用import导入,用components调用组件
导入时需要三步:只有一步是使用组件的Id 其它两个是使用组件名
vue-router
关于使用路由细节:
1: 可以给组件自定义名称:
写在routes数组中 {path:"/",name:“menuLink”,component:Menu"} 注意是component 没有s
在组件中使用name属性:<router-link to="{name:‘menuLink’}"
2:可以用tag指定标签的类型