第1章 初识视图文件（*.vue）

1 根视图文件：App.vue

    在vue前台渲染显示项目中，App.vue视图文件是其它vue视图文件根视图文件，或者也可以称为父视图文件，即其它视图文件的渲染显示都必须需要直接或都间接依赖于App.vue视图文件。其它vue视图文件按照功能可分为：1、页面视图文件('../views/*.vue')。2、局部页面视图文件('../ components/*.vue')。页面视图文件一般被定义在views文件夹中；局部页面视图文件一般被定义在components文件夹中。但这不是绝对的，页面视图文件能被定义在components文件夹中，同样局部页面视图文件也能被定义在views文件夹中，但虽然影响项目的正常执行，但它破坏的vue项目默认约定定义规则。

1.1 通过路由定义页面视图文件的渲染显示。

    页面视图文件，直接依赖或间依赖接关系构建1、首先在“\src\router\index.js”文件中定义相应路由，

2、在App.vue视图文件中通过“router-link”标签(控件) 构建相对应的赖接关系，从而实现通过App.vue视图文件来显示渲染指定的页面视图文件。

1.1.1 页面视图文件的路由定义“\src\router\index.js”

    页面视图文件有两种路由定义方式:1、先把页面视图文件定义导入变量，然后为其构建相应的路由。2、在路由定义中通过路由定义调用委托参数方法“import”，直接为页面视图文件构建相应的路由。

import { createRouter, createWebHashHistory } from 'vue-router'

//把“HomeView.vue”页面视图文件定义为导入变量：“HomeView”。

import HomeView from '../views/HomeView.vue'

const routes = [

  //第1个被构建的路由页面视图文件，是依赖于App.vue视图文件进行渲染显示的默认“首页”。

  {

    path: '/',

    name: 'home',

    component: HomeView//通过导入变量“HomeView”，为“HomeView.vue”页面视图文件构建相应的路由。

  },

  {

    path: '/about',

    name: 'about',

    //在路由定义中通过路由定义调用委托参数方法“import”，直接为“AboutView.vue”页面视图文件构建相应的路由。

    component: () => import('../views/AboutView.vue')

  }

]

const router = createRouter({

  history: createWebHashHistory(),

  routes

})

export default router

1.1.2.1 HelloWorld.vue(\src\components\HelloWorld.vue)

<template>

  <div class="hello">

    <!--通过<h1>HTML标签渲染显示局部页面视图文件输入参数-->

    <h1>{{ msg }}</h1>  

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {

    //msg:局部页面视图文件输入参数.

    //String:msg参数的数据类型。

    msg: String

  }

}

</script>

1.1.2.2 HomeView.vue(\src\views\HomeView.vue)

<template>

  <div class="home">

    <img alt="Vue logo" src="../assets/logo.png">

    <!-- 2、把“HelloWorld.vue”局部页面视图文件定义为指定标签（控件）：“ <HelloWorld/>”，把输入参数msg实例化为："Welcome to Your Vue.js App"。 -->

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

<script>

//1、把“HelloWorld.vue”局部页面视图文件定义为导入变量：“HelloWorld”。

import HelloWorld from '@/components/HelloWorld.vue'

//3、把“HelloWorld.vue”局部页面视图文件构建指定标签（控件）：“ <HelloWorld/>”的关联映射，即把“HelloWorld.vue”局部页面视图文件，作为“HomeView.vue”页面视图文件的1部分进行渲染显示。

export default {

  name: 'HomeView',

  components: {

    HelloWorld

  }

}

</script>

2 自定义局部页面视图文件的渲染显示(Example.Vue)

2.1 HelloWorld.vue(\src\components\HelloWorld.vue)

<template>

  <div class="hello">

    <label>加法:</label>

    <input type="number" v-model="num1"/><span>+</span><input type="number" v-model="num2"/><button @click="sum">=</button>{{total}}

   

    <hr>

    <input type="text" v-model="newListText"/><button @click="addList">添加到列表</button>

    <ul>

        <li v-for="item in list" :key="item">{{item}}</li>

    </ul>

    <hr>

    <form @submit.prevent="onSubmit">

        <label>用户名</label>

        <input type="text" v-model="username"/>

        <label>年龄</label>

        <input type="number" v-model="age"/>

        <input type="submit" value="提交"/>

    </form>

   

  </div>

</template>

<script>

export default {

  name: 'UerAdd',//该局部页面视图文件不能被命名为“Example”，否则会出现错误。

  //实例化指定标签中参数的初始化值。

  data:function () {

            return {

                num1:0,

                num2:0,

                total:0,

                newListText:'',

                list:[],

                username:'',

                age:null

            }

        },

        methods:{

          //加法计算单击事件方法。

            sum:function () {

                this.total = parseInt(this.num1) + parseInt(this.num2);

            },

            addList:function () {

                if(this.newListText.length===0) return;

                this.list.push(this.newListText);

                this.newListText = '';

            },

            //表单提交事件方法。

            onSubmit:function () {

                alert('username:'+this.username+' age:' + this.age);

            }

        }

 

}

</script>

2.2 根视图文件：App.vue

<template>

  <nav>

    <router-link to="/">Home</router-link> |

    <router-link to="/about">About</router-link>

  </nav>

  <router-view/>

   <!-- 2、把“Example.vue”局部页面视图文件定义为指定标签（控件）：“ <Example/>” -->

  <Example/>

</template>

<script>

  //1、把“Example.vue”局部页面视图文件定义为导入变量：“Example”。

  import Example from './components/Example.vue'

 

  export default {

    name: 'App',

    components: {

      Example //3、把“Example.vue”局部页面视图文件构建指定标签（控件）：“ <Example/>”的关联映射，即把“Example.vue”局部页面视图文件，作为“App.vue”根页面视图文件的1部分进行渲染显示。

    }

  }

  </script>

<style lang="scss">

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

  a {

    font-weight: bold;

    color: #2c3e50;

    &.router-link-exact-active {

      color: #42b983;

    }

  }

}

</style>

3局部页面视图文件作为页面视图文件进行渲染显示

3.1 为局部页面视图文件的定义路由

    import { createRouter, createWebHashHistory } from 'vue-router'

//把“HomeView.vue”页面视图文件定义为导入变量：“HomeView”。

import HomeView from '../views/HomeView.vue'

//把“Example.vue”页面视图文件定义为导入变量：“Example”。

import Example from '../components/Example.vue'

const routes = [

  //第1个被构建的路由页面视图文件，是依赖于App.vue视图文件进行渲染显示的“首页”。

  {

    path: '/',

    name: 'home',

    component: HomeView//通过导入变量“HomeView”，为“HomeView.vue”页面视图文件构建相应的路由。

  },

  {

    path: '/Example',

    name: '示例',

    component: Example//通过导入变量“Example”，为“Example.vue”页面视图文件构建相应的路由。

  },

  {

    path: '/about',

    name: 'about',

    //在路由定义中通过路由定义调用委托参数方法“import”，直接为“AboutView.vue”页面视图文件构建相应的路由。

    component: () => import('../views/AboutView.vue')

  }

]

const router = createRouter({

  history: createWebHashHistory(),

  routes

})

export default router

3.2 根视图文件：App.vue

<template>

  <nav>

    <router-link to="/">Home</router-link> |

    <router-link to="/Example">示例</router-link> |

    <router-link to="/about">About</router-link>

  </nav>

  <router-view/>

   <!-- 2、把“Example.vue”局部页面视图文件定义为指定标签（控件）：“ <Example/>” -->

  <Example/>

</template>

<script>

  //1、把“Example.vue”局部页面视图文件定义为导入变量：“Example”。

  import Example from './components/Example.vue'

 

  export default {

    name: 'App',

    components: {

      Example //3、把“Example.vue”局部页面视图文件构建指定标签（控件）：“ <Example/>”的关联映射，即把“Example.vue”局部页面视图文件，作为“App.vue”根页面视图文件的1部分进行渲染显示。

    }

  }

  </script>

<style lang="scss">

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

  a {

    font-weight: bold;

    color: #2c3e50;

    &.router-link-exact-active {

      color: #42b983;

    }

  }

}

</style>

对以上功能更为具体实现和注释见：22-09-17-01_vue3_demo(初识视图文件（.vue）)