Vue小白学习笔记

常用四个属性

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组件时，必须与

1. 条件渲染（使用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指定标签的类型

• 菜单

• 3：可以动态绑定 to的值，使用v-bind标签在

  web网站设计：先写结构 后写内容

  动手！动手！动手！