Vue.js知识

1.页面跳转

商品列表

在Vue中包着内容，使得内容可以跳转，上面引用中的粗体‘List’就是一个跳转的页面。

但是仅仅这样肯定是不行的，首先还是要在路由里面添加页面，然后对页面进行配置。为什么要写这个呢，因为我上次在路由里面添加了，但是用@click跳转跳转不了（可能是我搞错了，不会弄），然后就是用的这个方法，所以就把这个方法记下来了，你们也可以用啊。

对了，这个使用之后内容会出现下划线，就是HTML里面标签那种的，css样式里面加上text-decoration : none这个就可以啦。

1.1 JS方法跳转

HTML：

点击

JS：

js代码图

2.表单

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker。

设置inline属性可以让表单域变为行内的表单域.

3.背景图片

在vue最大div中添加：

然后在style部分增加样式：

#xxx {

background: url("../assets/logo.png);

background-size: 100% 100%;

height: 100%;

width: 100%;

position: fixed;

}

ok，这样就可以啦！

4.传值

4.1 第一种；

正常页面中的路由：

传值测试1

路由中的参数：

{

path: '/Testo/:id/:name',

name: 'Testo',

component: Testo

},

我还是截下图吧，这样看比较清楚；

html

路由页面

路由中path的/a/:b/:c正是所对应的to="/testo/7/xj。

然后效果图看一下：

接收页面

可以看到网页地址栏中有我们在中传递的参数。

4.2 第二种；

路由跳转：

传值测试2

html

路由页面

效果图：

接收页面

地址栏中是正常的显示地址，但是页面内容下面输出了key的值。

接收方式：

接收方式

4.3 第三种；

页面路由跳转：

传值测试3

截图：

html

路由页面

效果图：

接收页面

这个是地址栏中多了name=hahahaha，而且页面内容也显示了name的值。

接收方式：

接收方式。

4.4组件传值；

4.4.1 父组件向子组件传值，父传子是自定义属性。

4.4.2 子组件向父组件传值，子传父是自定义方法。

4.4.3 兄弟组件之间传值，新建一个空的公共js文件，js文件中创建一个Vue实例。然后再分别向两个组件中引入。

5.axios安装及配置

安装：

npm install axios

npm install --save vue-axios

qs：

npm install --save axios vue-axios qs

mian.js中配置：

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.prototype.$axios = axios

ookok.

5.1 axios

参数说明：

method：“post”，传参方式

6.在Vue里面分割字符串长度

方法

现在写的是一个地址管理的，现在地址是要以两个两个为一对，类似11，00，00，所以需要用到了分割。

地址编号

然后在点击“保存地址”的时候调用的onSave函数。

onSave方法

里面有一点是method: 'post'，post传参方式我们需要用qs方法传递参数。

data: this.qs.stringify({

参数: 值,

}),

拿一个做例子，上面的var tel = e.tel,我用的是vant UI，然后这是一个组件，onSave括号中的e是点击保存组件返回的值，然后e.tel就是我现在输入的电话信息，将值赋给了tel。最后在下面qs中传递数据。

7.Vue项目打包至服务器

第一步：

第二步：

第三步：

第四步：

也是已经改好的了

第五步：

111

222

333

第六步：

在cmd中输入命令npm run build来打包项目，最后将打包完成的dist文件夹放到服务器即可。