vue路由----将完整的vue元件作為模版

1.在idea中建立vue項目

2.src檔案夾建立transition.vue，src/components下建立HelloWorld.vue

檔案位置：

transition.vue

<template>
    <div>    <!--模版中必須有一個這樣的根元素-->
        <button v-on:click="show =! show">show/hide content</button>
        <transition name="fade">
            <p v-if="show">I love vue!!!</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'demo',
        data () {
          return{
            show:true
          }
        }
    }
</script>

<style scoped>   /*scoped作用域，表示隻允許vue檔案使用，否則便是全局*/
    .fade-enter-active , .fade-leave-active{
      transition: opacity .5s
    }
  .fade-enter , .fade-leave-active{
      opacity: 0
  }
</style>

           

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>vue動态添加删除資料</h3>
    <input class="addWord" v-model.lazy="name" @focus="" @blur="nameVertify" @keyup.enter="$event.target.blur" type="text" placeholder="姓名"/>
    <input class="addWord" v-model.lazy="age" @blur="ageVertify" @keyup.enter="$event.target.blur" type="number" placeholder="年齡"/>
    <input class="addWord" v-model.lazy="sex" @blur="sexVertify" @keyup.enter="$event.target.blur" type="text" placeholder="性别"/>
    <input class="addWord" v-model.lazy="tel" @blur="telVertify" @keyup.enter="$event.target.blur" type="number" placeholder="聯系方式"/>
    <input class="addWord" v-model.lazy="id" @blur="idVertify" @keyup.enter="$event.target.blur" type="number" placeholder="工号"/>
    <button @click="addUser">添加</button>
    <span class="unshow" :class="{show:show}" v-model="alertWord">{{alertWord}}</span>
    <hr>
    <table>
      <caption>使用者資訊表</caption>
      <tr>
        <th class="center">序号</th>
        <th class="center">姓名</th>
        <th class="center">年齡</th>
        <th class="center">性别</th>
        <th class="center">聯系方式</th>
        <th class="center">工号</th>
        <th class="center">操作</th>
      </tr>
      <tr v-for="(user,index) in users">
        <th class="center">{{index+1}}</th>
        <th class="center">{{user.name}}</th>
        <th class="center">{{user.age}}</th>
        <th class="center">{{user.sex}}</th>
        <th class="center">{{user.tel}}</th>
        <th class="center">{{user.id}}</th>
        <th class="center">
          <button @click="deleteUser(index)">删除</button>
        </th>
      </tr>
      <tr v-show="users.length!=0">
        <td colspan="7" class="right">
          <button @click="deleteUser('-2')">删除全部</button>
        </td>
      </tr>
      <tr v-show="users.length==0">
        <td colspan="7"  class="center">
          <p>暫無資料...</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'vue 屬性練習',
      users:[],
      name:'',
      age:'',
      sex:'',
      tel:'',
      id:'',
      alertWord:'',
      show:false
    }
  },
  methods:{
    addUser:function(){
      var name = this.name.trim();
      var age = this.age;
      var sex = this.sex.trim();
      var tel = this.tel;
      var id = this.id;
      if(name!=""&&age!=""&&sex!=""&&tel!=""&&id!=""){
        this.users.push({
          name:name,
          age:age,
          sex:sex,
          tel:tel,
          id:id
        })
        this.name = "";
        this.age = "";
        this.sex = "";
        this.tel = "";
        this.id = "";
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '請輸入完整的使用者資訊';
      }
    },
    deleteUser:function(index){
      if(index == "-1"){
        this.users = [];
      }else{
        this.users.splice(index,1);
      }
    },
    nameVertify:function(){
      var name = this.name.trim();
      if(name != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '姓名輸入有誤，請重新輸入';
      }
    },
    ageVertify:function(){
      var age = this.age;
      if(age != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '年齡輸入有誤，請重新輸入';
      }
    },
    sexVertify:function(){
      var sex = this.sex.trim();
      if(sex != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '性别輸入有誤，請重新輸入';
      }
    },
    telVertify:function(){
      var tel = this.tel;
      if(tel != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '電話輸入有誤，請重新輸入';
      }
    },
    idVertify:function(){
      var id = this.id;
      if(id != ""){
        this.show = false;
        this.alertWord = '';
      }else{
        this.show = true;
        this.alertWord = '工号輸入有誤，請重新輸入';
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-weight: normal;
}
th{
  width: 80px;
}
a {
  color: #42b983;
}
.unshow{
  opacity: 0;
}
  .show{
    opacity: 1;
    color: red;
  }
  .right{
    text-align: right;
  }
  .center{
    text-align: center;
  }
</style>

           

3.main.js中修改

import Vue from 'vue'
import Router from './importRouter'
           

4.SRC下建立檔案importRouter.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from './transition.vue'
import Users from './components/HelloWorld.vue'
Vue.use(VueRouter)

const Home = {
  template:`
    <div>
      <h2>Home</h2>
      <p>this is Home</p>
</div>
  `
}

const router = new VueRouter({
  mode:'history',     /* 兩個參數 history, hash  JavaScript中原始用法,比正常路徑多了一層#   http://localhost:8080/#/Users*/
  data(){
    return{
      aaa:'fade'
    }
  },
  base: __dirname,
  routes:[
    {path:'/',component:Home},
    {path:'/Parent',component:Parent},
    {path:'/Users',component:Users}
  ]
})

new Vue({
  router,
  template:`
  <div id="app">
    <h1>this is transition</h1>
    <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/Parent">/Parent</router-link></li>
        <li><router-link to="/Users">/Users</router-link></li>
    </ul>
    <transition :name="aaa" mode="out-in">
        <router-view></router-view>
    </transition>
</div>
  `
}).$mount('#app')

           

注意兩個引用的位置不一樣

運作結果：