vue 熟悉项目结构 创建第一个自己的组件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

import Vue from ‘vue‘
import Router from ‘vue-router‘
import HelloWorld from ‘@/components/HelloWorld‘
// add router
import cnblog from ‘@/components/cnblog‘
import person from ‘@/components/person‘
 
Vue.use(Router)
 
// configure router
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘HelloWorld‘,
      component: HelloWorld
    },
    {
      path: ‘/cnblog‘,
      name: ‘cnblog‘,
      component: cnblog
    },
    {
      path: ‘/person‘,
      name: ‘person‘,
      component: person
    }
  ]
})

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
 
<script>
export default {
  name: ‘App‘
}
</script>
 
<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
<div class="wrapper">
    <div class="binding">
        <p class="msg">{{msg}}</p>
        <input type="text" v-model="msg" />
    </div>
    <button v-on:click="say(‘Hi‘)">Greeting</button>
</div>
</template>
 
<script>
var exampleData = {
  msg: ‘This is a demo from cnblogs‘
}
 
export default {
  name: ‘cnblog‘,
  data () {
    return {
      msg: exampleData.msg
    }
  },
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
}
</script>
 
<style scoped>
p.msg {
  line-height: 30px;
  height: 30px;
  padding: 10px 0;
}
input {
  width: 200px;
  padding: 2px;
}
.binding {
    margin-bottom: 20px;
}
</style>

npm run dev

import person from ‘@/components/person‘
Vue.use(Router)
 
export default new Router({
  routes: [
// ...
    {
      path: ‘/person‘,
      name: ‘person‘,
      component: person
    }
  ]
})

<template>
<div class="wrapper">
   <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>gender:</label>
                    <select v-model="newPerson.gender">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>gender</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <!-- 循环必须指定key -->
            <tbody>
                <tr v-for="(person) in people" :key="person.id">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.gender }}</td>
                    <td :class="‘text-center‘">
                       <!-- <button @click="deletePerson($index)">Delete</button> -->
                       <button @click="deletePerson(person.id)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
</div>
 
</template>
<style scoped>
p {
  padding: 10px 0;
}
table {
    margin: 20px auto;
}
</style>
<script>
var data = {
  people: [
    {
      id: 1,
      name: "Jack",
      age: 30,
      gender: "Male"
    },
    {
      id: 2,
      name: "Bill",
      age: 26,
      gender: "Male"
    },
    {
      id: 3,
      name: "Tracy",
      age: 22,
      gender: "Female"
    },
    {
      id: 4,
      name: "Chris",
      age: 36,
      gender: "Male"
    }
  ]
};
export default {
  name: "person",
  data() {
    return {
      newPerson: {
        name: "",
        age: 0,
        gender: "Male"
      },
      people: data.people
    };
  },
  methods: {
    createPerson: function () {
      this.people.push(this.newPerson);
      // 添加完newPerson对象后，重置newPerson对象
      this.newPerson = { name: "", age: 0, gender: "Male" };
    },
    deletePerson: function (id) {
      // find index
      var index, person;
      person = this.people.find( function (person, idx) {
        var matchID = person.id === id;
        if (matchID) {
          index = idx
        }
        return matchID
      });
      // 删一个数组元素
      this.people.splice(index, 1);
    }
  }
};
</script>