你不知道的vue——vue不常用的知识点的整理

你不知道的vue——vue不常用的知识点的整理

1. v-cloak: 使用 v-cloak 指令可以有效解决屏幕闪动。

   有时候，页面没渲染之前就会出现vue代码块，例如下图。使用v-cloak可以很好解决这种问题。
   

   <template>
       <div class="hello">
           <span v-cloak>{{ content }}</span>
       </div>
   </template>
   
   <script>
   export default {
       name: "hello",
       data() {
           return {
               content: "测试"
           };
       }
   };
   </script>
   
   <style scoped>
   /* v-cloak这个属性会在页面渲染前作用于对应dom 在渲染完毕这个里面的样式将被移除 */
   [v-cloak] {
       display: none;
   }
   </style>
   

2. keep-alive

   官网是这么解释的:

   

   例如：可以实现页面缓存，比如从编辑页切出去再切进来，页面还是处于编辑状态.

   1. 需要在router.js中设置meta属性，meta下的keepAlive属性设置为true，代表这个页面需要进行缓存。

      import Vue from 'vue'
      import Router from 'vue-router'
      import HelloWorld from '@/components/HelloWorld'
      import is from '@/view/is'
      import list from '@/view/list'
      import detail from '@/view/detail'
      
      Vue.use(Router)
      
      export default new Router({
          routes: [
              {
                  path: '/',
                  name: 'HelloWorld',
                  component: HelloWorld,
                  meta: {
                      keepAlive: false,
                      title: 'HelloWorld'
                  }
              },
              {
                  path: '/is',
                  name: 'is',
                  component: is,
                  meta: {
                      keepAlive: false,
                      title: 'is'
                  }
              },
              {
                  path: '/list',
                  name: 'list',
                  component: list,
                  meta: {
                      keepAlive: true,
                      title: 'list'
                  }
              },
              {
                  path: '/detail',
                  name: 'detail',
                  component: detail,
                  meta: {
                      keepAlive: true,
                      title: 'detail'
                  }
              }
          ]
      })
      

   2. 在app.vue中修改一下代码<router-view />

      <template>
          <div id="app">
              <keep-alive>
                  <!--缓存组件-->
                  <router-view v-if="$route.meta.keepAlive" />
              </keep-alive>
              <!--非缓存组件-->
              <router-view v-if="!$route.meta.keepAlive" />
          </div>
      </template>
      
      <script>
      export default {
          name: "App"
      };
      </script>
      
      <style>
      #app {
          font-family: "Avenir", Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          
      }
      </style>
      

   3. 在详情页detail.vue中，注意beforeRouteEnter和beforeRouteLeave两个方法。

      <template>
          <div class="detail">
              <!-- form表单，用于测试是否缓存 -->
              <Form ref="formCustom" :model="formItem" :label-width="80">
                  <FormItem label="Input">
                      <Input v-model="formItem.input" placeholder="Enter something..."></Input>
                  </FormItem>
                  <FormItem label="Select">
                      <Select v-model="formItem.select">
                          <Option value="beijing">New York</Option>
                          <Option value="shanghai">London</Option>
                          <Option value="shenzhen">Sydney</Option>
                      </Select>
                  </FormItem>
                  <FormItem label="DatePicker">
                      <Row>
                          <Col span="11">
                              <DatePicker type="date" placeholder="Select date" v-model="formItem.date"></DatePicker>
                          </Col>
                          <Col span="2" style="text-align: center">-</Col>
                          <Col span="11">
                              <TimePicker type="time" placeholder="Select time" v-model="formItem.time"></TimePicker>
                          </Col>
                      </Row>
                  </FormItem>
                  <FormItem label="Radio">
                      <RadioGroup v-model="formItem.radio">
                          <Radio label="male">Male</Radio>
                          <Radio label="female">Female</Radio>
                      </RadioGroup>
                  </FormItem>
                  <FormItem label="Checkbox">
                      <CheckboxGroup v-model="formItem.checkbox">
                          <Checkbox label="Eat"></Checkbox>
                          <Checkbox label="Sleep"></Checkbox>
                          <Checkbox label="Run"></Checkbox>
                          <Checkbox label="Movie"></Checkbox>
                      </CheckboxGroup>
                  </FormItem>
                  <FormItem label="Switch">
                      <i-switch v-model="formItem.switch" size="large">
                          <span slot="open">On</span>
                          <span slot="close">Off</span>
                      </i-switch>
                  </FormItem>
                  <FormItem label="Slider">
                      <Slider v-model="formItem.slider" range></Slider>
                  </FormItem>
                  <FormItem label="Text">
                      <Input
                          v-model="formItem.textarea"
                          type="textarea"
                          :autosize="{minRows: 2,maxRows: 5}"
                          placeholder="Enter something..."
                      ></Input>
                  </FormItem>
                  <FormItem>
                      <Button type="primary">Submit</Button>
                      <Button style="margin-left: 8px">Cancel</Button>
                  </FormItem>
                  <FormItem>
                      <router-link :to="{name:'list'}">
                          <Button size="small" type="primary">跳转到列表页</Button>
                      </router-link>
                      <router-link :to="{name:'is'}">
                          <Button size="small" type="primary">跳转到is页</Button>
                      </router-link>
                  </FormItem>
              </Form>
          </div>
      </template>
      
      <script>
      export default {
          name: "detail",
          mixins: [],
          components: {},
          filters: {},
          props: [],
          computed: {},
          data() {
              return {
                  formItem: {
                      input: "",
                      select: "",
                      radio: "male",
                      checkbox: [],
                      switch: true,
                      date: "",
                      time: "",
                      slider: [20, 50],
                      textarea: ""
                  }
              };
          },
          watch: {},
          created() {
          },
          mounted() {
          },
          methods: {
              // 重置表单
              init() {
                  this.$refs[formCustom].resetFields();
              }
          },
          // 路由进来之前，判断是从哪个页面过来的，设置不同的keepAlive属性
          beforeRouteEnter(to, from, next) {
              if (from.name === "list") {
                  to.meta.keepAlive = true;
              } else {
                  to.meta.keepAlive = false;
              }
              next();
              // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例（刚开始错误写法）
              // next(vm => {
              //     if (from.name === "list") {
              //         // 在这里修改keepAlive值，是不能缓存数据的，因为在next()里面的代码，是在vue挂载之后执行，处于activated之后，此时activated中keepAlive还是false
              //         vm.$route.meta.keepAlive = true;
              //     } else {
              //         vm.$route.meta.keepAlive = false;
              //     }
              // });
          },
          // 路由离开之前，判断去往哪个页面，设置不同的keepAlive属性
          beforeRouteLeave(to, from, next) {
              if (to.name === "list") {
                  this.$route.meta.keepAlive = true;
              } else {
                  this.$route.meta.keepAlive = false;
              }
              next();
          },
          activated() {
              // 此方法在页面缓存时会被调用(this.$route.meta.keepAlive为true时)，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
              // console.log(this.$route.meta.keepAlive);
          }
      };
      </script>
      
      <style scoped lang="less">
      .detail {
          position: relative;
          height: 100%;
          width: 100%;
      }
      </style>
      

3. 插槽slot
   解构插槽 Prop：可以传递子组件的变量

   // 子组件
   <template>
       <div class="isComponent">
           <slot name='one' :childStr='childStr'></slot>
           <slot name='two'></slot>
           <slot></slot>
       </div>
   </template>
   
   <script>
   export default {
       name: "isComponent",
       data() {
           return {
               childStr: 'i am a child',
           };
       }
   };
   </script>
   
   <style scoped>
   </style>
   
   // 父组件
   <is-component>
       <template #one="{childStr}">{{childStr}}</template>
       <template v-slot:two>
           two
       </template>
       <template>
           default
       </template>
   </is-component>
   

   效果：// i am a child two default

4. 强制刷新某个div

   vue实现F5刷新整个页面无空白无间隔时间

5. 修饰符
   事件修饰符：

   1. .stop：相当于原生JS中event.stopPropagation()，阻止事件冒泡。

   2. .prevent：相当于原生JS中event.preventDefault()，阻止默认事件的发生。

   3. .capture：事件冒泡的方向相反，事件捕获由外到内。即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行。

   4. .self：只会触发自己范围内的事件，不包含子元素。
      

   5. .once：事件只能触发一次。

   6. .passive：事件会执行默认方法。

      注：

      1. 每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
      2. passive和prevent冲突，不能同时绑定在一个监听器上

   按键修饰符： 去官网查看即可，这里不过多解释。Vue.js-修饰符

6. :is: 动态组件

   优点：使代码更符合HTML语法验证

   官网是这么解释的：
   

   // 父组件：
   <template>
       <div class="is">
           <table>
               <tr :is='is'></tr>
           </table>
       </div>
   </template>
   
   <script>
   import isComponent from '../components/isComponent'
   export default {
       name: "is",
       components: {
           isComponent
       },
       data() {
           return {
               is: 'isComponent'
           };
       }
   };
   </script>
   
   <style scoped>
   </style>
   
   // 子组件：
   <template>
       <div class="isComponent">
           <span>我是tr</span>
       </div>
   </template>
   
   <script>
   export default {
       name: "isComponent",
       data() {
           return {};
       }
   };
   </script>
   
   <style scoped>
   </style>
   
   

7. @click.native: 在封装好的组件上使用，要加上.native才能click。

   1. router-link 加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件，你可以试试只用click不用native,事件是不会触发的。此时加上.native，才会触发事件。
   2. 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

   // router-link 
   <router-link :to="{name:'detail'}" @click.native="handleNative">
       <Button size="small" type="primary">测试native</Button>
   </router-link>
   // 自己封装的组件
   <is-component @click.native="handleNative"></is-component>