Quelles sont les précautions à prendre pour utiliser Vue.js ?

Cette fois, je vais vous apporter quelles précautions et quelles sont les précautions lors de l'utilisation de Vue.js Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Lors du passage des paramètres, il doit y avoir un espace entre le deuxième paramètre et la virgule précédente

window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))

2 Faites attention à l'espace

Format correct<.>

<script>import Store from &#39;./store&#39;console.log(Store)export default {   ... }</script>
错误格式
<script>  import Store from &#39;./store&#39;  console.log(Store)export default {   ... }</script>

3. Le parent transmet les paramètres au composant enfant

Dans le composant parent

//模板中<template>
  <div id="app">
    //之前老版本  <conponent-a msgfromfather="父亲传给儿子!"></conponent-a>
    <ConponentA msgfromfather="父亲传给儿子!"></ConponentA>
  </div></template>//Js<script>export default {  //注册ConponentA
  components: {ConponentA},
}</script>

Dans le composant enfant

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="onClickMe()">点我啊,小样儿</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;hello from component A!&#39;
      }
    },    //props 可以是数组或对象，用于接收来自父组件的数据
    props: [&#39;msgfromfather&#39;],    methods: {      onClickMe: function () {         //打印从父组件传过来的值
        console.log(this.msgfromfather)
      }
    }
  }</script><style scoped>
  h1 {    font-weight: normal;
  }</style>

4. paramètres du composant parent

Le fils a dit à son père qu'il devait utiliser vm.$emit et vm.$on pour déclencher des événements et écouter les événements

Dans les composants enfants

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{msgfromfather}}</h1>
    <button v-on:click="onClickMe()">点我啊,小样儿</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;hello from component A!&#39;
      }
    },    methods: {      onClickMe: function () {//        子传父 触发当前实例上的事件
        this.$emit(&#39;child-tell-me-something&#39;, this.msg)
      }
    }
  }</script><style scoped>
  h1 {    font-weight: normal;
  }</style>

Dans les composants parents

<template>
  <div id="app">
    <p>child tells me: {{childWorlds}}</p>
    <ConponentA msgfromfather="父亲传给儿子!" v-on:child-tell-me-something="listenToMyBoy"></ConponentA>
  </div></template><script>import ConponentA from &#39;./components/componentA.vue&#39;export default {  data: function () {    return {      childWorlds: &#39;&#39;
    }
  },  components: {ConponentA},  watch: {    items: {      handler: function (items) {
        Store.save(items)
      },      deep: true
    }
  },  methods: {    //监听
    listenToMyBoy: function (msg) {      console.log(msg)      this.childWorlds = msg
    }
  }
}</script>

En plus de cette méthode, il existe d'autres méthodes, veuillez consulter le site officiel de Vue.js pour plus de détails

Self

Définir le composantSpécifier les attributsType de données

export default {  props: {    slides: {      type: Array,     //数组      default: []      //默认值    }  },
在加载完毕执行某个方法
 mounted () {    this.loadxxx()  }

@mouseover="xxxx" La souris entre (exécute un événement), @mouseout="xxxx" la souris sort (exécute un événement) ;

L'animation des transitions n'est pas valide pour la gauche et la droite, etc. Pour obtenir des effets d'animation, vous ne pouvez utiliser que l'axe des x

slot

this.abc = ; false est équivalent à this['abc'] = false

parent Le style du composant n'est pas scope, afin que ses sous-composants puissent partager son style, c'est-à-dire que le style du sous-composant peut être écrit dans le composant parent.

<!-- Add "scoped" attribute to limit CSS to this component only --><style>......</style>

& représente l'élément parent

<!--css书写规范 可被继承的写在前面,不让继承的的写在后面--><style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%      height: 40px
      line-height: 40px
      .tab-item
        flex: 1        text-align: center
        /* & > a & 代表父元素 tab-item 子元素选择器 */
        & > a
          display: block
          font-style: 14px
          color: rgb(77,85,93)
          &.active
            color: rgb(240,20,20)</style>

Mise en place d'une bordure de 1 pixel

Côté PC, cela peut être réalisé grâce aux éléments suivants paramètres,

border-bottom: 1px solid rgba(7,17,27,0.1)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

En profondeur dans le mouvement de JS en JavaScript

En profondeur dans l'application avancée de DOM en JavaScript

Connaissance approfondie de JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!