Vue基础语法

 

 

 

组件的创建和定义

定义html之后,在data,之后定义方法,然后在另一个页面里引用,首先在js里引入这个组件,然后在components里声明这个组件,然后在template里引入这个组件.

这个是定义的组件
<template>
  <div >
        <button @click="increment">+</button>
        <button v-on:click="decrement">-</button>
        <p><span>{{num}}</span></p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      num:0
    }
  },
  methods:{
    increment(){
      this.num++;
    },
    decrement(){
      this.num--;
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

这个是组件的引用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
<Counter></Counter>
  </div>
</template>

<script>
import Counter from './Counter'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
      Counter
  }
}
</script>

如何从父组件里把数值传输到子组件里呢(也就是传递一个默认值)

在父组件里,引用的组件里设置变量num=10,然后在子组件里用

props:["num"],来传递num这个数

.如何动态的传递数值呢

需要在引用的组件里用v-bind:来动态绑定num这个数,

另外在父组件里显示增加的数值.

 <Counter v-bind:num="num"></Counter>
<p>parentnum:{{num}}</p>

data () {

  return {
    num:10,这个是从父组件向子组件传递的默认值
    msg: 'Welcome to Your Vue.js App'
  }
},

如何每单击一步就让子组件里增加后的数字回显到父组件里呢?

需要在子组件里用$emit来触发点击事件,而且还要再父组件里声明点击事件,事件内容要父组件里写

<Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>

<p>parentnum:{{num}}</p>

methods:{
  increment(){
  this.num++;
  },
  decrement(){
  this.num--;
  }
}

在子组件里

methods:{
  increment(){
    this.$emit("incre");
  },
  decrement(){
   this.$emit("decre");
  }