What are the precautions for using Vue.js?-JS Tutorial-php.cn

What are the precautions for using Vue.js?

php中世界最好的语言

Release： 2018-03-13 13:55:37

Original

1767 people have browsed it

This time I will bring you what are the precautions for using Vue.js, what are the precautions for using Vue.js, the following is a practical case, let's take a look.

1. When passing parameters, there must be a space between the second parameter and the preceding comma

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

Copy after login

2. Pay attention to the space

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

Copy after login

3. The parent passes parameters to the child component

In the parent component

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

Copy after login

In the child component

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

Copy after login

4. The child passes parameters to the parent component

The son tells The father needs to use vm.$emit and vm.$on to trigger events and listen for events

In child components

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

Copy after login

In parent components

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

Copy after login

In addition to this method, there are For other methods, please see the Vue.js official website

Self-defining componentSpecify attributesData type

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

Copy after login

@mouseover="xxxx" Mouse enter ( Execute an event), @mouseout="xxxx" The mouse moves out (execute an event);

Transiotions animation is invalid for left and right, etc. To achieve animation effects, you can only use the x-axis;

slot slot

this.abc = false is equivalent to this['abc'] = false

The parent component style does not add scoped, so that its child components can share it The style, that is to say, the style of the child component can be written in the parent component.

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

Copy after login

& represents the parent element

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

Copy after login

1 pixel border implementation

can be used on the PC Through the following settings, it is achieved.

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!