3.vue开发实例演示

程序员文章站 2022-07-01 17:36:44

...

vue开发实例演示

1.解剖初始化模板

1.1 vue文件

如图所示，对于一个新建的vue文件而言，其中标签分为三个部分：
- template标签：这一块模板区域用于编写html代码块，其实就是component组建中的template属性内容，用作模板显示，而这个模板component的名字就是该vue文件名，使用时导入即可；
- script标签：默认导出；
- style标签：scoped属性相当于private，确保其中的样式只在本style样式中有效；

3.vue开发实例演示

1.2 App.vue和main.js

创建新项目时src目录下模板文件只需要保留App.vue和main.js即可；
App.vue中template模板相当于主模板，其中可以直接通过组件标签调用其它组件模板，相当于没有slot便签的限定而可以*嵌套插槽；
App.vue组件用来传递给main.js，main.js是webpack中设置的默认入口文件，它只需要绑定App.vue文件并且完成一些组件的初始化和申明使用即可；

3.vue开发实例演示

2.webpack

2.1 基础概念

webpack的本质是将新版本的vue组件框架打包成ES5版本支持的js代码；

2.2 实例步骤

新建项目webpack-study；
打开之后创建modules文件目录；
在modules文件目录下创建hello.js作为模板，代码为：

//暴露一个方法，在同一个文件中暴露的多个方法最终被接受到同一个对象中
exports.sayHi = function () {
    document.write("<h1>Vue webpack</h1>");
}
exports.sayHi2 = function () {
    document.write("<h1>JavaScript</h1>");
}
exports.sayHi3 = function () {
    document.write("<h1>JavaSE</h1>");
}
exports.sayHi4 = function () {
    document.write("<h1>Linux</h1>");
}

在modules文件目录下创建main.js作为入口，代码为：

//接受一个文件中暴露的所有方法，类似于java的类
var hello = require("./hello");
hello.sayHi();
hello.sayHi2();
hello.sayHi3();
hello.sayHi4();

在webpack-study目录下创建webpack.config.js文件用来设置webpack参数，代码为：

module.exports = {
    //entry设置程序入口
    entry:'./modules/main.js',
    //output设置程序打包输出目录
    output:{
        filename:"./js/bundle.js" //这是标准格式
    }
};

webpack

3.vue开发实例演示

这个bundle.js文件就是打包后得到的js文件，也就是最终拿来使用的文件；
最后如上图创建index.html文件，作为整个程序的首页，添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

3.vue开发实例演示

大功告成！整个过程一目了然。

3.vue-router（重点）

3.1 基础概念

实现多个页面跳转的功能；
能够实现部分组件的页面改变而不影响其它组件部分；
实质并不会通过服务器后端实现链接跳转，而是前端直接修改并且即时刷新显示

3.2 实例步骤

在components目录下新建两个文件main.vue和content.vue；
如图所示，只在template标签内加入一段标题即可：

3.vue开发实例演示

在src目录下新建目录router，下建index.js文件，代码如下：

//导入vue和vue-router组件
import Vue from "vue"
import VueRouter from "vue-router";
//导入新建的content.vue和main.vue组件
import Content from "../components/content"
import Main from "../components/main"

//安装路由，相当于类的实例化操作
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //路由路径，在App.vue中用于link to连接的部分
      path:'/content',
      //路由名称，也可用于link to连接
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //路由路径，在App.vue中用于link to连接的部分
      path:'/main',
      //路由名称，也可用于link to连接
      name:'main',
      //跳转的组件
      component:Main
    }
  ]
})

在main.js入口文件中导入vue-router：

import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描路由配置

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router, //直接使用即可
  components: { App },
  template: '<App/>' 
})

在App.vue文件中添加模板代码：

<template>
<!--router只有两个标签，link为链接标签，view为显示视图标签，to属性即为转到路径，该路径是index.js中配置的路径-->
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
      <!--没有view标签则无法显示内容-->
    <router-view></router-view>
  </div>
</template>

部署服务器npm run dev后网页显示如图：

3.vue开发实例演示

4.实例工程（运用element-UI）

4.1 新建项目并配置依赖

使用管理员模式运行命令行，并进入到目录下准备新建项目；
创建一个名为hello-vue的工程项目：vue init webpack hello-vue，接下来的步骤请参看博客：Vue开发环境配置
新建之后，执行以下命令：

#进入工程目录
cd he1lo-vue
#安装vue-router
npm install vue-router --save- dev
#安装element- ui
cnpm i element-ui -S
#安装依赖
cnpm install
#安装SAsS加戟器
cnpm install sass-loader node-sass --save-dev
#启动测试
npm run dev

启动测试后可以正常通过端口访问即可；

4.2 修改配置文件

在IDEA中打开工程项目，并在package.json文件中修改以下内容（sass版本过高需手动调低）：

3.vue开发实例演示

修改完毕重新安装依赖：

cnpm install

4.3 修改初始src

按照vue-router删改，最终效果图如下：

3.vue开发实例演示

4.4 新建目录及文件

新建项目目录router用来存放路由配置文件index.js；
新建项目目录view用来存放视图组件，而components组件专门存放功能组件，明确分工；
在view目录下新建Login.vue文件和Main.vue文件；

3.vue开发实例演示

4.5 使用element-ui组件

打开element组件：https://element.eleme.cn/#/zh-CN/component/installation；
如图，复制表单代码完全覆盖Login.vue文件（在el-form标签外添加template标签，否则无法运行），并对Main.vue文件添加简单文字“首页”：

3.vue开发实例演示

所有视图组件都是独立的，接下来配置路由index.js文件，使其能够联系起来：

import Vue from 'vue'
import VueRouter from "vue-router";
import Main from '../view/Main'
import Login from '../view/Login'

Vue.use(VueRouter);

export default VueRouter({
  routes:[
    {
      path:'/main',
      component:Main
    },{
      path:'/login',
      component:Login
    }
  ]
})

4.6 配置main.js文件

import Vue from 'vue'
import App from './App'

import router from './router'

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

Vue.use(router);
Vue.use(ElementUI);
Vue.config.productionTip = false;


new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

并在App.vue中添加路由显示；
最终成果：

3.vue开发实例演示

5.路由嵌套

5.1 基础概念

路由嵌套可以实现外框架组件不变而仅改变内组件；

5.2 实例步骤

接4工程；
在view目录下创建子目录user，并在该目录下创建两个新文件，新文件中仅配置一行文字：

3.vue开发实例演示

在路由index.js文件中添加子路由：

export default new VueRouter({
  routes:[
    {
      path:'/main',
      component:Main,
      children:[	
        {path:'/user/listone',component:UserListOne},
        {path:'/user/listtwo',component:UserListTwo}
      ]
    },{
      path:'/login',
      component:Login
    }
  ]
})

对应更改Main.vue文件，导入侧边栏，并在侧边栏中添加路由连接和路由视图：

<template>
<div>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
    <el-radio-button :label="false">展开</el-radio-button>
    <el-radio-button :label="true">收起</el-radio-button>
  </el-radio-group>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">个人中心</span>
      </template>
      <el-menu-item-group>
        <span slot="title">分组一</span>
          <!--添加路由链接-->
        <el-menu-item index="1-1"><router-link to="/user/listone">账号设置</router-link></el-menu-item>
        <el-menu-item index="1-2"><router-link to="/user/listtwo">密码设置</router-link></el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-4">选项4</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <span slot="title">选项5</span>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <el-menu-item index="3" disabled>
      <i class="el-icon-document"></i>
      <span slot="title">导航三</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-setting"></i>
      <span slot="title">导航四</span>
    </el-menu-item>
  </el-menu>

<!--添加路由视图-->
  <router-view align="center"></router-view>



</div>
</template>

<script>
    export default {
      name: "Main",
      data() {
        return {
          isCollapse: true
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

结果如图：

3.vue开发实例演示

6.传参以及重定向

6.1 传参

先更改Main.vue文件中的路由器链接：

<!--name属性对应路由配置时的名称，params表示传参，且需要使用v-bind:双向绑定才能使此处的值能被路由接收-->
<router-link :to="{name:'UserListOne',params:{id:1}}">账号设置</router-link>

再修改路由配置文件index.js：

// /:id 表示参数id，用来接收params传参，props:true，表示开启props传参
{path:'/user/listone/:id',name:'UserListOne',component:UserListOne,props:true}

最后修改ListOne.vue文件：

<template>
  <div>
    <h1>账号设置</h1>
    {{id}}<!--便可以直接调用参数，且内容必须直接放在标签内不，或者报错-->
  </div>

</template>

<script>
    export default {
        props:['id'],//将index.js中的id传到此处
        name: "UserListOne"
    }
</script>

最后显示：

3.vue开发实例演示

6.2 重定向

只要在路由配置时添加一个新的路由配置重定向即可：

{
  path:'/goHome',
  redirect:'/main'
}

再在Main.vue中添加配置：

<el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item>

得到结果：

3.vue开发实例演示

6.3 账号传参

先修改Login.vue文件，在跳转函数时添加代码：

this.$router.push("/main/"+this.ruleForm.name);

在index.js文件中修改代码接收参数：

path:'/main/:name',
component:Main,
props:true,

在Main.vue文件中添加代码：

props:['name'],

<span>{{name}}</span>

结果：

3.vue开发实例演示

6.4 路由模式

mode属性：
- hash：路径带 # 符号；
- history：路径不带 # 符号；
修改为history模式：

mode:'history',

图显：

3.vue开发实例演示

7. 404及钩子

7.1 404

在view目录下新建NotFound.vue文件，添加文字即可；
在index.js文件中routes最后添加代码：

{
path:'*',	//表示除以上页面外链接都指向该页面
component:NotFound
}

结果：

3.vue开发实例演示

7.2 路由钩子与异步请求

两个路由钩子：

//beforeRouteEnter(to,from,next):在进入路由前执行
//beforeRouteLeave(to,from,next):在离开路由前执行

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

在钩子函数中使用异步请求：

安装Axios： cnpm install axios -s （反复尝试npm和cnpm，直到成功安装）；
main.js引用Axios：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

在static（静态数据，可以从网上读取并下载）目录下创建新目录mock（静态数据测试规范目录），新目录下创建新文件data.json（从Vue基础入门那里拿来使用），重新部署服务器之后能够通过文件目录读取到该文件（该步骤同样可测试axios是否完整安装，否则重装）；

3.vue开发实例演示

在ListOne.vue文件中添加以下代码：

beforeRouteEnter:(to,from,next)=>{//=>是function的简写模式，在钩子函数中使用
        console.log("进入路由之前");
        next(vm=>{//使用此方法可以直接调用vm实例
          vm.getData();
        });
      },
      beforeRouteLeave:(to,from,next)=>{//=>是function的简写模式，在钩子函数中使用
        console.log("离开路由之前");
        next();
      },
      methods:{
        getData:function () {
          this.axios({
            method:'get',
            url:'http://localhost:8080/static/mock/data.json' //数据链接
          }).then(function (response) {
              console.log(response);
          })
        }
      }

点击页面上“账号设置”之后则获取了该数据：

3.vue开发实例演示

并且正常输出了“进入路由之前”和“离开路由之前”提示；

根据上述这段操作则可以实现从静态数据中获取数据，再结合前面几点内容融会贯通之后基本实现了前端的数据交互操作；

附图：

3.vue开发实例演示

相关标签：前端狂神java学习 vue

上一篇： Vue（四）Vue实例中的数据，事件与方法

下一篇： Lucene（全文检索）

3.vue开发实例演示

vue开发实例演示

1.解剖初始化模板

1.1 vue文件

1.2 App.vue和main.js

2.webpack

2.1 基础概念

2.2 实例步骤

3.vue-router（重点）

3.1 基础概念

3.2 实例步骤

4.实例工程（运用element-UI）

4.1 新建项目并配置依赖

4.2 修改配置文件

4.3 修改初始src

4.4 新建目录及文件

4.5 使用element-ui组件

4.6 配置main.js文件

5.路由嵌套

5.1 基础概念

5.2 实例步骤

6.传参以及重定向

6.1 传参

6.2 重定向

6.3 账号传参

6.4 路由模式

7. 404及钩子

7.1 404

7.2 路由钩子与异步请求

PHP微信开发之模板消息回复_php实例

Thinkphp5整合微信扫码支付开发实例

PHP微信开发之二维码生成类_php实例

微信公众号开发之微信公共平台消息回复类实例，公众实例

小程序开发之登录的实例详解

C#中异步编程4async与await异步程序开发的实例分析

PHP微信支付开发实例，php支付实例

php微信公众平台开发类实例_php技巧

JavaScript编程开发中jquery获取radio值实例教程

JavaScript编程开发中jquery中post方法用法实例教程