打开上一篇文章《vue.js初探（二）vue项目创建》创建的项目,打开src\views\Home.vue页面，代码如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

一个vue页面正常情况下包含三个部分，

template部分：页面布局代码，

script部分：vue代码编写部分，

style部分：页面CSS样式，

具体的可以看src\components\Helloworld.vue文件。

template部分、style部分就是html及css基础知识，下面说一下script部分，先看一段代码：

<script>
    // @ is an alias to /src
    export default {
        name: 'Login',
        data() {
            return {
                logining: false,
                xing:'',
                ming:'',
                count:0,
                form: {
                    loginName: 'admin',
                    loginPass: '666666'
                },
                ruleForm: {
                    loginName: [{
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur'
                    }],
                    loginPass: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            submit() {
                 this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        let res = await this.$Http.PostAdminLogin(this.form);
                        alert(res.data.msg)
                        this.$router.push({
                            name: 'Index'
                        });
                    } else {
                        console.log('error submit!');
                        return false;
                    }
                })
            }
        },
        computed:{
            fullName: function() {
               return this.xing + this.ming;
            }
        },
        watch:{
            xing: function(){
                this.count++;
            },
            ming:function(){
                this.count++;
            }
        }
    }
</script>

data:这部分主要定义这个页面包含的变量。

methods：用于定义template里面元素的事件方法。

computed：计算属性，computed里面的变量值可以通过data里面的变量计算得出。

watch：监听属性，可以监听data里面变量值改变时执行一些方法。比如本例变量xing/ming改变时count会加1。