Welche Vorsichtsmaßnahmen sind bei der Verwendung von Vue.js zu beachten?

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen und die Vorsichtsmaßnahmen bei der Verwendung von Vue.js vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Bei der Übergabe von Parametern muss zwischen dem zweiten Parameter und dem vorangehenden Komma ein Leerzeichen stehen

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

2. Achten Sie auf das Leerzeichen

Richtiges Format

<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. Übergeordnetes Element übergibt Parameter an untergeordnete Komponente

In übergeordneter Komponente

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

In untergeordneter Komponente

<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 Parameter für die übergeordnete Komponente

Der Sohn sagte seinem Vater, dass er vm.$emit und vm.$on verwenden muss, um Ereignisse auszulösen und auf Ereignisse zu warten

In untergeordneten Komponenten

<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>

In übergeordneten Komponenten

<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>

Zusätzlich zu dieser Methode gibt es noch andere Methoden. Einzelheiten finden Sie auf der offiziellen Website von Vue.js

SelbstKomponente definierenAttribute angebenDatentyp

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

@mouseover="xxxx" Die Maus kommt herein (führt ein Ereignis aus), @mouseout="xxxx" die Maus bewegt sich heraus (führt ein Ereignis aus) ;

Übergangsanimation ist für links und rechts usw. ungültig. Um Animationseffekte zu erzielen, können Sie nur den

Slot-Slot

this.abc = verwenden false entspricht this['abc'] = false

parent Der Komponentenstil hat keinen Gültigkeitsbereich, sodass seine Unterkomponenten seinen Stil teilen können, dh der Stil der Unterkomponente

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

& stellt das übergeordnete Element dar

<!--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>

Implementierung eines 1-Pixel-Rahmens
Auf der PC-Seite kann dies wie folgt erreicht werden Einstellungen,

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tief in die Bewegung von JS in JavaScript

Tief in die fortgeschrittene Anwendung von DOM in JavaScript

Tiefgründige Kenntnisse in JavaScript

Das obige ist der detaillierte Inhalt vonWelche Vorsichtsmaßnahmen sind bei der Verwendung von Vue.js zu beachten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!