Vue.jsを使用する際の注意点は何ですか？

今回は、Vue.jsを使用する際の注意事項についてお届けします。以下は実際のケースです。

1. パラメータを渡すときは、2 番目のパラメータとその前のカンマの間にスペースが必要です

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

2. スペースに注意してください

正しい形式

<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. 親はパラメータを子コンポーネントに渡します

コンポーネント

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

子コンポーネント内で

<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. 息子は親コンポーネントにパラメータを渡します

息子は、イベントをトリガーしてイベントをリッスンするために vm.$emit と vm.$on を使用する必要があることを父親に伝えます

子コンポーネント内

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

親コンポーネント内

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

Except このメソッド以外にもメソッドはあります、詳しくはVue.js公式サイトをご覧ください

自己定義コンポーネント属性を指定するデータ型

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

@mouseover="xxxx" マウス入力(イベント実行)、@mouseout="xxxx" マウスアウト(イベント実行)

アニメーション効果を実現したい場合は、 x 軸のみを使用できます。

slot スロット

this.abc = false は this ['abc'] = false と同等です

親コンポーネントのスタイルはスコープを追加しないので、その子コンポーネントはそのスタイルを共有できます。 style、つまり、子コンポーネントのスタイルを親コンポーネントに記述することができます。

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

&は親を表します要素

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

1ピクセルボーダー

の実装は、次のようにしてPC側で実現できます設定、

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JavaScript での JS の動きを深く理解する

JavaScript での DOM の高度なアプリケーションを詳細に理解する

JavaScript のちょっとした知識ポイントを理解する

以上がVue.jsを使用する際の注意点は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。