前端框架VUE的基础使用

一、概述

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

二、基础使用

一、安装node.js

nodejs.cn/download

二、安装vue-cli 快速生成项目模板

cmd > npm install vue-cli -g

三、建立基于webpack模板的vue应用

vue init webpack vue-spring-cloud

四、基本语法demo

test.vue

<template>
  <div>
    <span>测试取值：{{message}}</span>
    <div>测试v-if：
      <span v-if="flag1">true</span>
      <span v-if="flag2==false">false</span>
    </div>
    <div>测试v-for：
      <span v-for="arr in array" >
       {{arr}}、
     </span>
    </div>
    <div>测试v-on：
      <button v-on:click="testEvent()">点我点我</button>
    </div>
    <HelloWorld></HelloWorld>

    <div>双向绑定测试：<input v-model="name" /><button v-on:click="alertName()">点击弹出值</button></div>


    <div>组件消息传递测试
      <Children  v-bind:message='{name:"消息传递"}' v-on:send="setChidrenData"></Children>
      <span>子组件传来的消息：{{chidrenData}}</span>
    </div>
  </div>
</template>

<script>
  import HelloWorld from "../components/HelloWorld";
  import Children from "../components/Children";
  // 先注册组件

  export default {
    name: "test",
    components: {Children, HelloWorld},
    data() {
      return {
        name:"双向绑定测试",
        message: '测试取值',
        //测试v-if
        flag1 : true,
        flag2 : false,
        //测试v-for
        array: ['1','2','3'],
        chidrenData:''
      }
    },
    methods:{
      //测试事件绑定
      testEvent(){
        alert('点我点我');
      },
      //双向绑定测试
      alertName(){
        alert(this.name);
      },
      //子组件传递须要经过父组件事件
      setChidrenData(msg){
        this.chidrenData = msg
      }
    },
    //钩子函数测试
    beforeCreate:function () {
      alert('钩子函数测试');
    },


  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  .login-input{
    width: 220px;
  }
</style>

复制代码

Children.vue

<template>
  <div>
    <div>父组件传来的消息：{{message}}</div>
    <div>传递消息给父组件:
      <input v-model="data"><button v-on:click="sendMessage()">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Children',
  props:['message'],
  data(){
    return{
      data:''
    }
  },
  methods:{
    sendMessage(){
      this.$emit('send',this.data);
    }
  }
}
</script>


复制代码

HelloWorld.vue

<template>
  <div>
    <div>自定义组件测试</div>
    <div>父组件传来的消息：{{data}}</div>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props:['data']
}
</script>

复制代码

三、登陆页实现以及测试demo

一、安装依赖

切换项目下执行命令

一、安装elementUi vue布局框架

element-ui官网

cmd > npm i element-ui -S

二、安装vue-router 路由

cmd > npm install vue-router --save-dev

三、 安装 SASS 加载器css

cmd > npm install sass-loader node-sass --save-dev

四、初始化工程

cmd > npm install

若出现 Unexpected end of JSON input while parsing near

cmd > npm cache clean --force 后从新 npm install

五、命令说明

• --save ：安装到项目文件下并在dependencies引入模块

• --save-dev ：安装到项目文件下并在devDependencies引入模块

• -g ：全局安装

六、运行项目

cmd > npm run dev

二、基于element-ui 的vue简单登陆注册页

一、建立路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Register from '../views/Register'
import Main from '../views/Main'
import Test from '../views/test'

Vue.use(Router);

export default new Router({
  routes: [{
    // 登陆页
    path: '/login',
    name: 'Login',
    // 模块名
    component: Login
  },
    //注册页
    {
      path: '/register',
      name: 'Register',
      component: Register
    }]
});

复制代码

二、修改main.js

import Vue from 'vue'
//导入 vue-router
import VueRouter from 'vue-router'
import router from './router'

// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

// 安装路由
Vue.use(VueRouter);

// 安装 ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  // 启用路由
  router,
  // 启用 ElementUI
  render: h => h(App)
});
复制代码

三、建立登陆页

<template>
  <div>
    <!--:model 绑定表单对象 :rules 绑定表单验证-->
    <el-form ref="form" :model="form" :rules="rules"  label-width="80px" class="login-box">
      <h3 class="login-title">vue-spring-cloud</h3>
      <!--prop 绑定验证字段-->
      <el-form-item label="帐号："  prop="username">
        <el-input type="text" placeholder="请输入帐号" v-model="form.username" class="login-input"></el-input>
      </el-form-item>
      <el-form-item label="密码："  prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password" class="login-input"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  v-on:click="onSubmit('form')" >登陆</el-button>
        <el-button type="primary"  v-on:click="register()" >注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        }
      }
    },
    methods: {
      //自定义事件
      onSubmit(formName){
        //表单验证（valid=验证返回值）
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //路由到主页
            this.$router.push('/main');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //自定义事件
      register(){
        //路由到注册页
        this.$router.push('/register');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
  .login-input{
    width: 220px;
  }
</style>

复制代码

四、建立注册页

<template>
  <div>
    <!--:model 绑定表单对象 :rules 绑定表单验证-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form-box">
      <h3 class="form-title">vue-spring-cloud</h3>
      <!--prop 绑定验证字段-->
      <el-form-item label="用户名称" prop="userName">
        <!--: v-model 数据双向绑定-->
        <el-input  placeholder="请输入用户名"  v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input type="password"  placeholder="请输入密码" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="isPassword">
        <el-input type="password" placeholder="请确认密码" v-model="ruleForm.isPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <!---事件绑定--->
        <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "Register",
    data() {
      //自定义验证名（rule=触发元素 value=文本值 callback=回调验证）
      var checkPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password !== '') {
            this.$refs.ruleForm.validateField('isPassword');
          }
          callback();
        }
      };
      var checkPass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        ruleForm: {
          userName: '',
          password: '',
          isPassword:''
        },
        //表单验证
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: checkPass, trigger: 'blur' }
          ],
          isPassword: [
            { required: true, message: '请确认密码', trigger: 'blur' },
            { validator: checkPass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      //自定义事件
      submitForm(formName) {
        //表单验证（valid=验证返回值）
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //vue-router 调整登陆页
            this.$router.push('/login')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单内容
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

<style lang="scss" scoped>
  .form-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .form-title{
    text-align: center;
  }

</style>


<style scoped>

</style>

复制代码

五、修改App.vue

<template>
  <div id="app">
    <!--路由组件-->
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

复制代码

六、页面效果

三、嵌套路由与参数传递

一、route index.js

//主页
    {
      path: '/main/:username',
      name: 'Main',
      component: Main,
      //支持props方法传参
      props:true,

      //嵌套路由
      children: [
        {
          //:/id传递参数名
          path: '/param/param1/:id',
          name: 'param1',
          component: param1,
        }, {
          path: '/param/param2/:id',
          name: 'param2',
          component: param2,
        }, {
          path: '/param/param3/:id',
          name: 'param3',
          component: param3,
          props:true
        }
      ]
    },
复制代码

二、Main.vue

<template>
<div>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-caret-right"></i>传参测试</template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
                <!--props方式获取登录页传值-->
                 当前登陆人：{{username}}
            </el-menu-item>
            <el-menu-item index="1-1">
              <!--路由跳转-->
              <router-link to="/param/param1/传参测试1">传参测试1</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <!--路由跳转 :to 对象模式传递 name:路由名称 params:路由参数-->
              <router-link :to="{name:'param2',params:{id:'传参测试2'}}">传参测试2</router-link>
            </el-menu-item>
            <el-menu-item index="1-3">
              <router-link :to="{name:'param3',params:{id:'传参测试3'}}">传参测试3</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
export default {
  //props 方式传值
  props: ['username'],
  name: "Main"
}
</script>

<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>


复制代码

三、参数取值页面

param1

<template>
<div>传参测试1：{{$route.params.id}}</div>
</template>

<script>
export default {
  name: "param1"
}
</script>

<style scoped>

</style>
复制代码

param2

<template>
  <div>传参测试2：{{$route.params.id}}</div>
</template>

<script>
  export default {
    name: "param2"
  }
</script>

<style scoped>

</style>
复制代码

param3 props取值

<template>
  <div>传参测试3：{{id}}</div>
</template>

<script>
  export default {
    props: ['id'],
    name: "param3"
  }
</script>

<style scoped>

</style>
复制代码

四、效果

四、重定向

一、路由配置

//重定向回到登陆
    {
      path: '/toLogin',
      redirect: '/login',
      name:'redirect',
    },
复制代码

二、router-link

<router-link :to="{name:'redirect'}">退出登陆</router-link>
复制代码

五、路由钩子

beforeRouteEnter: (to, from, next) => {
      console.log("参数测试页面进入前");
      next();
    },
    beforeRouteLeave: (to, from, next) => {
      console.log("参数测试页面跳转前");
      next();
    }
复制代码

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
• next() 跳入下一个页面
• next('/path') 改变路由的跳转方向，使其跳到另外一个路由
• next(false) 返回原来的页面
• next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

六、异步请求axios

一、安装axios

cmd > npm install axios -S

二、导入axios

// 导入axios
import axios from 'axios'
Vue.prototype.axios = axios;
复制代码

三、建立param4

<template>
  <div>路由测试</div>
</template>
<script>
    export default {
        name: "param4",
      //路由进入前
      beforeRouteEnter: (to, from, next) => {
        console.log("进入前");
        next(vm => {
          // vm.getDate();
          // vm.postDate();
          vm.getDate();
        });
      },
      //路由跳转后
      beforeRouteLeave: (to, from, next) => {
        console.log("跳转前");
        next();
      },
      methods:{
        //后台直接接收 传递类型 query string parameters
        getDate:function(){
          this.axios.get("http://localhost:8089/findUser1",{params:{id:'123'}}).then(function (repos) {
            console.log(repos.data);
          }).catch(function(error){

          })

        },
        //后台@RequestBody 接收 传递类型request payload
        postDate:function(){
          this.axios.post("http://localhost:8089/findUser",{id:'123'}).then(function (repos) {

          }).catch(function(error){

          })

        },
        //后台直接接收传递类型 form date
        postDate1:function(){
          let param = new URLSearchParams();
          param.append("id", "zhonghangAlex");

          this.axios.post("http://localhost:8089/findUser1",param).then(function (repos) {

          }).catch(function(error){

          })

        }
      }
    }
</script>

<style scoped>

</style>


复制代码

四、配置route

import param4 from '../views/param/param4'
复制代码

{
          path: '/param/param4',
          name: 'param4',
          component: param4
        }
复制代码

<router-link :to="{name:'param4'}">路由测试</router-link>
复制代码

五、测试

进入点击路由测试后---> beforeRouteEnter --->打印进入前--->路由请求打印数据--->跳转到路由测试页

一些基于vue的ui库 或 框架

后端框架 vue-element-admin

更多VUE ui库 或 框架