vue初学脚手架项目碎片学习整理（有图解析）

本文链接：https://blog.csdn.net/fengtingYan/article/details/87474984

1效果图：
在这里插入图片描述
vue-cli脚手架新建一个count.vue

<template>
    <div>
        <button @click="increment">+</button>
        <button v-on:click="decrement">-</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    props:["num"],//从helloworld组件里面传一个初始值10。父组件到子组件
    data(){
        return{
            num:0
        }  
    },
    methods:{
        increment(){
            this.num++
        },
        decrement(){
            this.num--
        }
    }
}
</script>

helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <!-- <Count num="10" ></Count> -->
    <Count  v-bind:num="num"></Count>
    <p>parent：{{num}}</p>
  </div>
</template>

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

2 从父组件传一个值给子组件绑定
在这里插入图片描述
此时

点加减parent不会变化

3 怎么改变10 。。。。。这个有点小问题

子组件往父组件传用emit触发
父子组件都加减了
在这里插入图片描述

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- <Count num="10" ></Count> -->
    <Count  v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Count>
    <p>parent：{{num}}</p>
  </div>
</template>

<script>
import Count from './shop/Count.vue'
export default {
  name: "HuaXia",
  data() {
    return {
      num:10,
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods:{
        increment(){
            this.num++
        },
        decrement(){
            this.num--
        }
    },
  components:{Count}
};
</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>

4 在app.vue里面添加一个小组件
在这里插入图片描述

5 在这里发现需要导入mui文件
但是放在assets里面还是static里面？