Vue——五

Posted pythonwl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue——五相关的知识,希望对你有一定的参考价值。

16 前端项目搭建

1 创建项目

cd 项目目录下

vue init webpack 项目名

运行项目:

npm run dev

也可以在pycharm中运行。

如果,多个Vue项目在运行,8080端口被占用,服务器会自动改端口

2 初始化项目

将HelloWorld.vue 删除,清除APP.vue 中默认的代码。

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: ‘App‘,
  components: {
  }
}
</script>

<style>

</style>
3 路由vue-router

官方文档:https://router.vuejs.org/zh/

手动添加路由。// 在vue中@表示src目录的路径

3.1 下载安装 路由组件

npm i vue-router -S
# npm install vue-router --save

3.2 配置路由

src 下 创建 router 文件夹,文件夹下创建 index.js 路由文件

index.js 路由文件,初始化路由对象

import Vue from ‘vue‘;
import Router from ‘vue-router‘;  // 引入Vue和vue-router对象

Vue.use(Router);  // 在vue中注册vue-router组件

// 暴露vue-router对象,并在vue-router里编写路由,提供给main.js调用
export default new Router({
	mode:‘history‘,  // 正常的路由,hash模式:url和路由之间,多了 ‘#‘
	routes:[
	{
	name:‘路由名称‘,  // 路由的name属性,用于跳转页面
	path:‘路径‘,  // 比如 ‘/login‘
	component:组件名  // 路由跳转的组件的名称
}
]
})

3.3 注册路由信息

main.js文件,把router路由规则对象注册到vue中

import Vue from ‘Vue‘
import App from ‘./App‘
import router from ‘./router/index‘

Vue.config.productiongTip = false

new Vue({
    el:‘#app‘,
    router,
    components:{App},
    template:‘<App/>‘
})

3.4 在视图中显示路由对应的内容

App.vue组件,添加显示路由对应的内容

<template>
  <div id="app">
    <!-- 标签名必须是这个rouer-view -->
    <router-view/>
  </div>
</template>

注意:如果在vue创建项目的时候,设置安装vue-router,则项目会自动帮我们生成上面的router目录和index.js里面的代码,以及自动到main.js里面注册路由对象。

17 路由对象提供的操作

在我们安装注册了vue-router组件以后,vue-router在vue项目中会帮我们在全局范围内所有组件里面创建2个对象给我们使用:

  1. this.$router,可用于在js代码中进行页面跳转。
  2. this.$route,可用于获取地址栏上面的url参数。
1 页面跳转

1 <router-link to=‘url‘>

2 script 标签中,this.$router.push(url)

this.$router.push() 不能跳转到其他网站。

如果真的要跳转外站,则使用window.location.href="站外地址,记得加上http://协议"

3 script 标签中,

this.$router.go(num) num:正整数:向后跳转几页,负整数:向前跳转几页,本质上就是 location.go()

this.$router.back() 返回上一页,本质上就是 location.back()

this.$router.forward() 跳转到下一页,本质上就是 location.forward()

router-link标签:局部刷新,ajax跳转,不刷新网页

<template>
    <div>
      首页页面组件
      <a href="/user">个人中心</a>
      <!-- router-link标签,本质上就是a标签,只是由vue-router进行加工处理
      可以显示局部页面刷新,不会重新加载内容,进行ajax跳转
       -->
      <router-link to="/user">个人中心</router-link>
      <router-link :to="url">个人中心</router-link>
      <router-link :to="{name:‘User‘}">个人中心</router-link>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{
        }
    }
</script>

<style scoped>

</style>

this.$router.push()

<template>
    <div>
      <button @click="jump">个人中心</button>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
          return {
              url: "/user",
          }
        },
        methods:{
          jump(){
// 开发中可以先进行权限,登录之类的判断,然后再进行跳转
// this.$router.back(); // 返回上一页,本质上就是 location.back()
// this.$router.go(-1); // 返回上一页,本质上就是 location.go()
// this.$router.forward(); // 跳转到下一页,本质上就是 location.forward()
                this.$router.push("/user"); 
                // 跳转到站内的制定地址页面中,本质上就是 location.href
                // 注意,this.$router.push() 不能跳转到其他网站。如果真的要跳转外站,则使用location.href="站外地址,记得加上http://协议"
          }
        }
    }
</script>

<style scoped>

</style>
2 参数传递

this.$route 接收访问 url 传递的参数。参数有 2 种。

  1. 查询字符串( query string ),url ? 后面的参数

例如:http://localhost:8008/user?name=xiaoming&pwd=123,这里name=xiaoming&pwd=123就是查询字符串参数。

  1. 路由参数( router params ),url 斜杠 / 传递参数

例如:http://localhost:8080/user/300/xiaoming,此时,300属于路由路径的一部分,这个300就是路由参数.,当然,xiaoming,或者user也可以理解是路由参数,就是看我们的页面中是否需要接收而已。

  1. this.$route的其它属性
console.log(this.$route.fullPath);  // /login?name=xiaoming&pwd=123  除了域名地址后面的所有内容
console.log(this.$route.path);      // /login   去掉参数以后的路径

2.1 查询字符串

发送参数:

<router-link :to="`/user?name=${name}&pwd=${pwd}`">查询字符串参数</router-link>
<router-link :to="‘/user?name=‘+name+‘&pwd=‘+pwd">查询字符串参数</router-link>

 // ``里面,${}圈住的内容会被js当成变量来解析

<script>
    export default {
        name: "Home",
        data(){
          return {
              name: "xiaoming",
              pwd: "123",
              url: "/user",
          }
        },
    }

接收参数:

// query是this.$route里面的一个数组,this.$route会自动收集地址栏上所有的参数保存到query里面
           let name = this.$route.query.name;
   		let pwd = this.$route.query.pwd;

2.2 路由参数

例如:我们用户的界面都是一样的,但是每一个用户来到自己的页面中,显示的内容肯定都是不一样的,此时,我们需要使用不同的路径来区分不同的用户。这时候,可以在路由路径中使用路由参数表示不同用户的id

例如:我们就需要设置一个route/index.js中路由信息里面,哪一段路由属于路由参数。

export default new Router({
  mode:"history",  // 路由地址的显示模式: 默认hash,表示地址栏上面出现#
  routes:[
    // {
    //   name:"路由名称[对应组件的name值,将来用于跳转页面]",
    //   path: "访问url路径",
    //   component: 组件名
    // },
    {
      name:"User",
      path: "/user/:id/img-:img_id",
      component: User
    },
  ],
});

发起请求的组件:

<router-link to="/user/100/img-10086">路由参数</router-link>

页面通过 this.$route.params 接收路由参数

 let id = this.$route.params.id;
 let img_id = this.$route.params.img_id;
<h1>页面跳转</h1>
      <button @click="jump">使用this.$router来跳转到登录页</button>
      <br>
      <router-link to="/login">使用router-link来跳转到登录页</router-link>
      <br>
      <router-link :to="url">使用router-link来跳转到登录页</router-link>
      <br>
      <router-link :to="{path:‘/login‘}">使用router-link来跳转到登录页</router-link>
      <br>
      <router-link :to="{name:‘Login‘}">使用router-link来跳转到登录页</router-link>
      <br>
      <a href="/login">使用a标签跳转到登录页</a>
      <h1>参数传递</h1>
      <button @click="func1">传递查询字符串参数</button>
      <br>
      <router-link to="/login?name=xiaoming&pwd=123">传递查询字符串参数</router-link>
      <br>
      <router-link :to="{path:‘/login‘,query:{‘name‘:‘xiaoming‘,‘pwd‘:‘123‘}}">传递查询字符串参数</router-link>
      <br>
      <router-link :to="{name:‘Login‘,query:{‘name‘:‘xiaoming‘,‘pwd‘:‘123‘}}">传递查询字符串参数</router-link>
      <br>

18 ElementUI

对于前端页面布局,我们可以使用一些开源的UI框架来配合开发,常用的UI框: bootstrap,H-ui框架,lay-UI框架,Amaze UI,zui框架,ElementUI.

Vue开发前端项目中,比较常用的就是ElementUI了。

ElementUI是饿了么团队开发的一个UI组件框架,这个框架提前帮我们提供了很多已经写好的通用模块,我们可以在Vue项目中引入来使用,这个框架的使用类似于我们前面学习的bootstrap框架,也就是说,我们完全可以把官方文档中的组件代码拿来就用,有定制性的内容,可以直接通过样式进行覆盖修改就可以了。

中文官网:http://element-cn.eleme.io/#/zh-CN

文档快速入门:http://element-cn.eleme.io/#/zh-CN/component/quickstart

2.1 快速安装ElementUI

项目根目录执行以下命令:

npm i element-ui -S

上面的命令等同于 npm install element-ui --save

2.2 配置ElementUI到项目中

在main.js中导入ElementUI,并调用。代码:

// elementUI 导入
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
// 调用插件
Vue.use(ElementUI);

3. 首页

首页采用了上下页面布局,首页是导航栏、轮播图。。。脚部等几个小模块。所以我们可以把首页作为一个组件进行开发,然后把首页的这些小模块作为单独的组件来进行开发。

3.1 创建首页组件

在src/components目录下创建文件 Home.vue

代码:

<template>
  <div id="home">
    首页
  </div>
</template>

<script>
export default {
  name:"Home",
  data(){
    return {

    }
  }
}
</script>

<style scoped>

</style>

3.1.1 创建首页对应的路由

在router/index.js中引入Home组件,并设置Home组件作为首页路由。

代码:

import Vue from "vue"
import Router from "vue-router"

// 后面这里引入可以被用户访问的页面组件
import Home from "../components/Home"

Vue.use(Router);

export default new Router({
  // 路由跳转模式,注意使用 history
  mode: "history",

  // 路由规则
  routes:[
    {
      // name:"路由别名",
      name:"Home",
      // path: "路由地址",
      path: "/",
      // component: 组件类名,
      component: Home,
    },
  ]
})

 for(let i in data1.goods_list){
    let dic = new Object();
    dic.name = data1.goods_list[i].name;
    dic.num = data1.goods_list[i].num;
    dic.price = data1.goods_list[i].price;
    list.push(dic);
  }

// object对象只有一个,可变量,,,但是最终是同一个对象,所以,每次循环都要产生新的object
// push 追加,相当于 append

以上是关于Vue——五的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家