vue 熟悉項目結構 建立第一個本身的組件

* vue開發環境搭建

* 項目入口文件 ./src/main.js

// 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/>'
})

入口文件不須要改動　　

 

* 項目路由文件 ./src/router/index.js

  指定url對應哪些組件

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
    }
  ]
})

 

* 項目入口模板./src/App.vue

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

　　

 路由的模板頁面都在 <router-view />中，這個文件也不須要改動
 

* 建立一個組件模板文件 ./src/components/cnblog.vue

  組件都放在./src/components/路徑下

 注意

** 整個模板文件只能是一個根dom節點 <div class="wrapper"></div>

** 文件結尾須要一個空行

** <style scoped> scoped表示只在這一個組件中有效

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

　　Run:

npm run dev

　　

* 再建立一個組件person

先添加路由 ./router/index.js

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

建立模板./components/person.vue

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

　　

 

一些分享的教程

Angular5.X+Ionic3.X仿京東商城項目實戰視頻教程免費下載地址：http://pan.baidu.com/s/1skETGa5

Angular5完整版地址：https://www.itying.com/goods-232.html

Ionic3仿京東商城項目實戰完整版地址：https://www.itying.com/goods-460.html

Angular5 Koa2無人點餐無人收銀項目實戰視頻教程免費下載地址：https://pan.baidu.com/s/1Hn-iHvDaRxqjmOZCEIrZZQ

2018年6月最新Mpvue視頻教程免費下載地址：
https://www.itying.com/goods-897.html

最新Node.js基礎視頻教程完整版及Koa2入門實戰視頻教程免費下載地址：https://www.itying.com/goods-240.html

2018年最新Vue入門實戰視頻教程免費下載地址：https://www.itying.com/goods-864.html