使用Vue.js有哪些注意事項

這次帶給大家使用Vue.js有哪些注意事項，使用Vue.js的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.傳遞參數時,第二個參數要與前面的逗號有一個空格

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>

除了這個方法外,還有其他方法,詳見Vue.js官網

自定義元件指定屬性資料型別

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

@mouseover="xxxx" 滑鼠進入(執行某個事件), @mouseout="xxxx" 滑鼠移出(執行某個事件);

transiotions動畫對left和right等無效,要想實現動畫效果,只能用x軸了;

slot 插槽

this.abc = false 等同於this['abc'] = false

父組件style不添加scoped,這樣他的子組件可以共用他的樣式,也就是說,可以把子元件的樣式,寫在父元件中.

<!-- 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中文網其它相關文章！

推薦閱讀：

深入JavaScript之JS的運動

#深入JavaScript之DOM的高階應用程式

深入JavaScript之小知識點

以上是使用Vue.js有哪些注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！