理理Vue细节-白红宇

1. 动态属性名：可使用表达式来设置动态属性名或方法名：


     ... 
      
    data: {    name: 'href',    sss: 'src'}复制代码

注意：要避免空格和引号等，且需要小写，可使用计算属性来应对复杂表达式，都需要使用[]

2. computed/methods/watch

computed可使用get/set

computed: {       top() {           return 'top'       },       name: {           get () {               return this.name           },           set (val) {               this.name = val           }       }   }复制代码

computed可缓存，但不可传参，会根据data中的属性变化而变化，即是根据响应式依赖来变化，而Date不是响应式依赖，即不会变化；method则每次都会进行计算，但可传参。

watch用于处理异步或开销较大的操作，如输入搜索时。

3. style绑定

直接对象或变量对象

计算属性

直接style或style对象


    
    
     样式3
    
复制代码

数组结合三目/数组结合对象

data: {  isActive: true,  activeClass: 'active'}
    
    
    
    
复制代码

4. v-if条件渲染

可使用template包裹元素，template会被当成不可见的包裹元素


    复制代码

多条件判断

5. key

添加key防止vue重复利用不想被重复利用的元素，如下的input如果不添加key，则vue会重复使用key，进而input的value值在切换后还会被保留，因为vue仅仅替换了placeholder


    
    复制代码

6. v-if和v-show

v-if是组件的销毁和重建，如果初始条件为false，则什么都不做，直到变为真，所以切换开销高，运行条件很少改变时适用

v-show是display:none和block之间的CSS切换，基于渲染，不管初始条件如何都会渲染，所以初始渲染开销高，切换频率高时适用

7. v-for

可使用in或者of

也可遍历对象：v-for="(value, key, index) in obj"

可根据template渲染多个组合元素：

8. v-for和v-if

v-for优先级更高，所以v-if会重复运行于每个v-for循环中，所以尽量不要一起使用，可先使用计算属性对数据进行过滤再遍历。

9. 更改响应式数据

Vue.set(object, key, value)

this.$set(object, key, value)

this.items.splice(index, 1, newValue)

批量添加属性：

// 不要直接Object.assign(this.items, {age: 18}this.items = Object.assign({}, this.items, {  age: 18,  favoriteColor: 'Vue Green'})复制代码

10. 事件修饰符

.passive：滚动的默认事件会立即出发，即告诉浏览器不想阻止默认事件的触发，可提升移动端性能


    
     ...
    
复制代码

.capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理

.self：只当在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的

.once：点击事件只会触发一次

键盘修饰符：<input @keyup.enter="submit">

11. v-model

选择框


    
    
    复制代码

修饰符.lazy：在change时而非input时更新 <input v-model.lazy="msg" >

注：change事件是在input失去焦点时触发，即用于单选、多选框和选择框，而input事件是在value值变化时触发，但脚本改变value值时不会触发，即用于text和textarea

修饰符.number：输入值转为数值

修饰符.trim：过滤收尾空白字符

12. Prop

使用v-bind="obj"会将对象的每个属性都作为一个独立的prop传入进去，所以接受时也需要逐个属性接收。


    复制代码

props虽然是单向数据流，但对于引用类型，子组件还是可以改变父组件的状态。

props会在组件实例创建之前进行验证，所以实例的属性再default或validator中是不可用的。

13. 自定义事件

自定义事件需要注意事件名为小写或-分隔，因为$emit('BaseEvent')虽然事件名不会变，但在html中该事件名会被转化为小写，不会监听到。

14. slot

具名插槽

作用域插槽


      
     
          {
   { user.lastName }}  
     
    
      
     
    
    
      
     
    复制代码

15. 组件通信

vuex/eventBus

prop/$emit

$children/$parent

provide/inject

$refs

// 父或祖先级provide: function () {  return {    getMap: this.getMap  }}// 后代级inject: ['getMap']复制代码

16. scope

scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

17. 路由

区分：this.$router指路由器，this.$route指当前路由

通配符：捕获所有路由或 404 Not found路由

// 含通配符的路由都要放在最后，因为优先级由定义顺序决定{  // 会匹配所有路径  path: '*'}{  // 会匹配以 `/user-` 开头的任意路径  path: '/user-*'}复制代码

当使用一个通配符时，$route.params内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }this.$router.push('/user-admin')this.$route.params.pathMatch // 'admin'// 给出一个路由 { path: '*' }this.$router.push('/non-existing')this.$route.params.pathMatch // '/non-existing'复制代码

点击 <router-link :to="..."> 等同于调用 router.push(...)方法，因为<router-link>会在内部调用该方法，进而在history栈添加一个新的记录

使用了push时，如果提供的path不完整，则params会被忽略，需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'router.push({ name: 'user', params: { userId }})  // -> /user/123router.push({ path: `/user/${userId}` })          // -> /user/123// 这里的 params 不生效router.push({ path: '/user', params: { userId }}) // -> /user复制代码

router.push/router.replace/router.go 效仿于 window.history.pushState/window.history.replaceState/window.history.go

命名视图：router-view可设置名字，如果router-view没有设置名字，那么默认为 default


    
    
    const router = new VueRouter({  routes: [    {      path: '/',      components: {        default: Foo,        a: Bar,        b: Baz      }     }  ]})复制代码

路由使用props：可将路由参数设置为组件属性

const User = {  props: ['id'],  template: '
    
     User {
    { id }}
    
'}// 通过布尔值设置const router = new VueRouter({  routes: [    { path: '/user/:id', component: User, props: true },    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：    {      path: '/user/:id',      components: { default: User, sidebar: Sidebar },      props: { default: true, sidebar: false }    }  ]})// 通过函数设置query // URL /search?q=vue 会将 {name: 'vue'} 作为属性传递给 SearchUser 组件const router = new VueRouter({  routes: [    { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }  ]})复制代码

beforeRouteEnter：可使用beforeRouteEnter来提前获取接口数据，同时需要在next后才能访问到实例：

beforeRouteEnter(to, from, next) {  axios('/text.json').then(res => {    next(vm => {      vm.datas = res    })  })}复制代码

路由设置有参数时，如果跳转页面后再通过返回键返回时，路由会保留有参数，如果通过push跳转返回，则不会保留该参数，这在第三方调用模块传参时需要注意。

18. loader

Vue Loader编译单文件的template块时，会将所有遇到的URL资源转为webpack模块请求：

// 将会被编译成为：createElement('img', {  attrs: {    src: require('../image.png') // 现在这是一个模块的请求了  }})复制代码

资源URL转换规则

如果是绝对路径，例如 /images/foo.png)，则会原样保留。

如果路径以.开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

如果路径以~开头，其后的部分将会被看作模块依赖。

如果路径以 @ 开头，也会被看作模块依赖。

1. 动态属性名：可使用表达式来设置动态属性名或方法名：

2. computed/methods/watch

3. style绑定

4. v-if条件渲染

Title

5. key

6. v-if和v-show

7. v-for

8. v-for和v-if

9. 更改响应式数据

10. 事件修饰符

11. v-model

12. Prop

13. 自定义事件

14. slot

Here might be a page title

15. 组件通信

16. scope

17. 路由

18. loader

后续会持续更新，欢迎关注！