首页 >web前端 >js教程 >使用Vue.js有哪些注意事项

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

php中世界最好的语言原创: 2018-03-13 13:55:371863浏览

这次给大家带来使用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中文网其它相关文章！