집 > 기사 > 웹 프론트엔드 > Vue.js 사용 시 주의사항은 무엇인가요?

Vue.js 사용 시 주의사항은 무엇인가요?

php中世界最好的语言원래의: 2018-03-13 13:55:371771검색

이번에는 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. 부모가 자식 구성 요소에 매개 변수를 전달합니다

component

//模板中<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" 마우스 아웃(이벤트 실행)

전환 애니메이션은 왼쪽과 오른쪽에 유효하지 않습니다. x축만 사용할 수 있습니다.

슬롯 슬롯

this.abc = false는 ['abc'] = false

상위 구성 요소 스타일은 범위를 추가하지 않으므로 하위 구성 요소는 스타일, 즉 하위 구성 요소의 스타일을 상위 구성 요소에 작성할 수 있습니다.

<!-- 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!