网上的书籍以及官方文档已经把资料总结的很详细了,这里我不再罗列成体系的理论知识,而是重点记录如何将Vue的各个功能应用到我们所写的的代码上,以及重难点、易错部分的分析。
渐进式js框架,只关心视图层,就是MVC中的View视图层,使用Vue需要先熟练掌握HTML/CSS/JavaScript,兼容性强,生态好,性能好
Model:模型层,这里表示JavaScript对象
View:视图层,这里表示DOM,即HTML操作的元素
ViewModel:连接视图和数据的中间件,
Model模型层通过ViewModel这个中间来表现View视图,Vue.js就是ViewModel的实践者
通过ViewModel,View可以监听Model,Model绑定到了View上,这样DOM操作的数据可以实时的修改到Model上,
实时的修改很重要,否则就要通过页面刷新才能看到页面变化,这样浪费资源;js也能实时修改,但是Vue更高效
在上图的文本域中,左侧的框里实时显示右侧的状态(数据绑定),左侧的数据修改又实时影响了右侧的状态(监听),这就是双向绑定
在MVVM架构中,不允许数据和视图直接通信,只能通过ViewModel通信
AnaularJS ReactJS 微信小程序
轻量只有20多kb,适合移动端,易学习,取长补短且有独特功能(计算属性),开源活跃度高,
组件化
1.页面上的每个独立区域视为一个组件
2.每个组件对应一个工程目录,组件所需各种资源就在这个工程目录下维护
3.页面只是提供组件的容器,组件可以自由嵌套、复用,形成完整页面
通过CDN技术,在线引入,找到对应的版本,复制链接地址,引入标签即可,https://www.bootcdn.cn/
打开Hbuilder,新建目录,简单html项目,新建一个目录,创建一个html文件
添加script标签,引入vue的cdn地址,生产环境使用min版本,开发环境使用普通版本,方便查看代码、异常
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
姓名: {
{name}}
<hr/>
年龄: {
{age}}
<hr/>
学校: {
{school.name}}
<hr/>
地址: {
{school.addr}}
<hr/>
结束语: {
{show()}}
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.common.dev.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
name: "zhangsan",
age: 20,
gender: 'male',
school: {
name: 'yucai',
addr: 'shenzhen'
}
},
methods: {
show: function(){
return "hello vue";
}
}
});
script>
body>
html>
el 就是element元素,指明当前哪些元素会被vue绑定,对应了MVVM中的data bindings
data 就是model,用来提供数据
div 给定一个id,在el中绑定这个id,视图层就可以拿到vue对象中的数据,我们习惯用div作为容器
{ {}} 叫差值表达式,用来在视图层显示model中的数据
methods 用来定义vue中的方法
相当于视图层和数据层的连接方式,快速的从数据层获取数据并展示在视图层上,
主要用于获取对应的数据,这个例子中我们将差值表达式里的内容写死了,实际使用时换成vue对象中的代码即可
<html>
<head>
<meta charset="utf-8">
<title>插值表达式title>
head>
<body>
<div id="app">
属性: {
{name}}
<hr/>
数组元素: {
{[1,2,3,4][1]}}
<hr />
对象元素: {
{
{username:"list",age:20}.age}}
<hr />
三目运算: {
{1>0?"true":"false"}}
<hr />
四则运算: {
{101*2+100/10-30}}
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
name: "zhangsan",
age: 21,
school: {
name: "yucai",
addr: "shenzhen"
}
}
});
script>
body>
html>
1.可以获取vue对象的属性、方法
2.可以获取数组中的内容,比如,[1,2,3,4]中的第二个元素,这里为了举例将数组写死了,可以用变量表示
3.可以获得对象中的属性,
4.可以使用三目运算
5.做简单的四则运算
逻辑与java中的if-else相同,包含v-if
v-else
v-else-if
,这叫标签属性
所有有关vue的标签属性只能用在vue绑定过id的容器中
<html>
<head>
<meta charset="utf-8">
<title>vue分支title>
head>
<body>
<div id="app">
<p v-if="weather">今天下雨p>
<p v-else-if="friends">约朋友出去玩p>
<p v-else>只能自娱自乐p>
<button type="button" @click="friends=!friends">按钮button>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
weather: false,
friends: false,
}
});
script>
body>
html>
1.v-if 相当于 if(){…},v-if为true,那么显示当前标签,否则不显示,继续往下走
2.v-else-if 相当于 else if(){…},表示否则如果为true,那么显示标签,否则不显示,继续往下走
3.v-else 相当于 else{…},表示上面条件都不满足,那么就显示当前标签,v-else可以不加属性值直接收尾,也可以加上面的某一属性值作为其对立面收尾
4.button按钮绑定点击事件,切换了friends状态,vue分支则实时改变了显示的标签
5.MVVM的体现:这就是视图层改变了模型层的属性值,模型层属性的变化又改变了视图层标签的显示
与 v-if 功能相似,但也不同
<html>
<head>
<meta charset="utf-8">
<title>vue分支title>
head>
<body>
<div id="app">
<p v-show="friends">我有很多朋友p>
<button type="button" @click="friends=!friends">按钮button>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
friends: false,
}
});
script>
body>
html>
1.v-show和v-if在使用效果上一样,但是v-show通过修改标签CSS样式display控制显隐,v-if通过添加和删除DOM元素控制显隐,可以通过查看浏览器控制台验证
2.在频繁控制显隐的情况下,v-show的方式效率更高,推荐使用
<html>
<head>
<meta charset="utf-8">
<title>循环 v-fortitle>
head>
<body>
<div id="app">
<ul>
普通循环遍历数组
<li v-for="a in args">{
{a}}li>
ul>
<ul>
带索引循环遍历数组
<li v-for="(a,i) in args">
i={
{i}}, a={
{a}}
li>
ul>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
args: [1,2,3,4,5],
}
});
script>
body>
html>
1.普通for循环:第一个li标签加v-for属性将其遍历,在v-for的属性值中,a表示每个元素,args对应data中的数组,
2.带索引for循环:第二个li标签中,i是循环变量,相当于数组元素下标
<html>
<head>
<meta charset="utf-8">
<title>循环 v-fortitle>
head>
<body>
<div id="app">
<ul>
遍历对象
<li v-for="(v,k,i) in stu">
k={
{k}},v={
{v}},i={
{i}}
li>
ul>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
stu: {
username:"lisa",
age: 20,
gender: "female"
}
}
});
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>循环 v-fortitle>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div id="app" style="margin-left: 40px;">
<h3>遍历对象数组,嵌套循环展示h3>
<ul v-for="student in students">
<li v-for="(v,k,i) in student">
i={
{i}},v={
{v}},k={
{k}}
li>
ul>
<h3>遍历对象数组,表格展示h3>
<table class="table table-hover" align="center" border="1px">
<tr>
<th>索引th>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>对象th>
tr>
<tr v-for="(student,i) in students">
<td>{
{i}}td>
<td>{
{student.username}}td>
<td>{
{student.age}}td>
<td>{
{student.gender}}td>
<td>{
{student}}td>
tr>
table>
div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
students: [
{
username: "jack",
age: 21,
gender: "male"
},
{
username: "rose",
age: 20,
gender: "female"
},
{
username: "john",
age: 27,
gender: "male"
},
]
}
});
script>
body>
html>
1.第一种方式,嵌套循环,先编数组再遍历对象
2.第二种方式,使用前端模板,比如,添加bootstrap的cdn实现表格展示
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<div id="app">
<input type="text" v-model="title" />
{
{title}}
<hr />
<a v-bind:href="link">点我a>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
title: "hello vue",
link: "http://www.baidu.com",
}
});
script>
body>
html>
1.差值表达式可以写在html标签的内容上,但是不能作为标签的属性值 也就是value="{ {title}}"这样写是不对的
2.v-model可以将title绑定input的value属性值,属性修改造成title改变,进而差值表达的值也改变
3.如果想在标签的属性中使用vue对象中的属性值,可以通过v-bind作为普通标签的前缀
4.在这个a标签中,href前面加v-bind,那么此时的属性值对应的就是vue中的属性
5.v-bind:
也可简写,直接写成:
三步骤:设参、传参、接参
<html>
<head>
<meta charset="utf-8">
<title>vue事件title>
head>
<body>
<div id="app">
<button type="button" v-on:click="btnfn">按钮button>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
methods: {
btnfn: function(){
alert("hello world")
}
},
});
script>
body>
html>
1.methods中通常定义我们需要使用的方法
2.v-on:用来给button按钮绑定事件,然后是什么类型的事件(这里是click),=右侧表示该事件对应了什么函数
3.常见的事件有,click单击,dbclick双击,
<html>
<head>
<meta charset="utf-8">
<title>vue涉参事件title>
head>
<body>
<div id="app">
sum = {
{sum}}<br/>
步长: <input type="text" v-model="step" /><br/>
<button type="button" @click="increase(step)">计数button>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
sum: 0,
step: 1
},
methods: {
increase: function(step){
this.sum += this.step-0;
}
}
});
script>
body>
html>
1.v-on:可以简写为@
2.methods中要想使用data中的元素,必须使用this.
3.定义好方法,以及涉及参规则,在点击事件后面指定函数,传参即可
4.这里没有将参数写死,而是在input的属性输入来中定义,利用v-model将属性与vue对象中的data中的元素对应
5.thid.step默认是字符串,-0让其参与数值运算,这样自动变成数值类型
可以使用vue定义好的事件修饰符,快速达到效果
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
意思是这两个事件处理底层使用的DOM,我们希望直接处理逻辑,所以我们底层直接定义事件处理的逻辑
.stop
.prevent
.capture
.self
.once
.passive
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
<html>
<head>
<meta charset="utf-8">
<title>vue事件修饰符title>
head>
<body>
<div id="app">
鼠标移动事件:
<p @mousemove="mouseMove">
x: {
{x}}, y: {
{y}}
<span @mousemove.stop>鼠标移动到此即停止span>
p>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
x:0,
y:0
},
methods: {
mouseMove: function(event){
this.x = event.clientX;
this.y = event.clientY;
}
},
});
script>
body>
html>
1.function()中使用event表示,引入当前的事件对象,通过事件对象可以获得其相关事件属性
2.这里clientX表示当前鼠标X轴坐标,此时可实时显示XY坐标
3.mousemove.stop中的.stop就是事件修饰符,表示当前标签里面这个事件会停止
是个属性,这个属性有计算能力,能够将计算结果缓存起来的属性
<html>
<head>
<meta charset="utf-8">
<title>计算属性title>
head>
<body>
<div id="app">
{
{getCurrentDate()}}
<hr />
{
{getCurrentDate1}}
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
var v1 = new Vue({
el: "#app",
data: {
},
methods: {
getCurrentDate: function(){
return Date.now();
}
},
computed: {
getCurrentDate1: function(){
return Date.now();
}
}
});
script>
body>
html>
1.我们将vue对象赋值给v1,方便我们在控制台通过v1调用方法
2.methods中定义的是函数,是一个动作,所以每次调用{ {getCurrentDate()}}得到的时间都是实时的
3.computed中定义的是属性,是一个具有计算能力的属性
4.刷新页面我们发现初始的时间二者相同,但是在控制台,普通方法得到的时间不停变化,计算属性保持不变,因为计算属性将计算结果缓存起来了
5.调用方法时每次都要计算,会产系统开销,如果这个结果不经常变化,就可以将这个结果缓存起来,计算属性主要特性就是为了将不经常变化的计算结果进行缓存,以节约系统开销
6.使用差值表达式时注意,调用普通方法有括号,计算属性不用括号(因为他是个属性)
vue的组件化设计思想借鉴了Java的面向对象思想,即万物皆对象,在vue中万物皆组件
也就是说,在vue的项目中,以及使用了vue框架的项目中,vue的对象以组件的形式出现,能被反复使用
要想实现组件化,需要在页面中注册组件:注册组件主要两种方式,全局注册、本地注册
只要是被vue对象绑定的容器,都可以使用全局注册的组件
<html>
<head>
<meta charset="utf-8">
<title>组件全局注册title>
head>
<body>
<div id="app">
<model3>model3>
<hr/>
<model3>model3>
<hr/>
div>
<div id="app1">
<model3>model3>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
//注册组件
Vue.component("model3",{
template: "{
{title}}",
data: function(){
return {
title: "hello java",
}
},
methods: {
btn: function(){
alert("hello vue");
}
},
});
//创建vue对象绑定视图层
new Vue({
el: "#app",
});
new Vue({
el: "#app1"
});
script>
body>
html>
注册全局组件格式Vue.component("参数名",{组件内容});
template是模板,对应了视图层,就是显示页面的各种标签,小技巧:可以现在外面通过IDE的提示写好模板,再复制到template里面,注意双引号内部使用单引号
data是模型层,提供所需数据,写法与new vue对象不同,通过function返回的方式使用数据
methods对应方法,用法相同
组件就相当于一个独立的页面,包含了视图层、模型层、方法…
创建好组件之后,必须在vue绑定的容器中使用,直接使用组件名对应的标签,而且可以复用
为什么叫全局注册,只要是被vue对象绑定的容器,都可以使用全局注册的组件
template必须有且只有一个根元素,不可以同时并列多个根元素,比如template:"
,如果有需要那就外层套一个容器,内部随意嵌套"
在vue对象里面进行注册组件,这个组件只能用在该对象绑定的容器中,不可以用在其他容器中
<html>
<head>
<meta charset="utf-8">
<title>组件本地注册title>
head>
<body>
<div id="app">
<model3>model3>
div>
<hr/>
<div id="app1">
<model3>model3>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
//创建vue对象,注册本地组件
new Vue({
el: "#app",
components: {
"model3": {
template: "{
{title}}",
data: function(){
return {
title: "hello vue"
}
},
methods: {
btn: function(){
alert("hello java");
}
}
}
}
});
//创建第二个vue对象测试
new Vue({
el: "#app1",
});
script>
body>
html>
本地注册组件使用components,里面可以有多个组件,每个组件以键值对的形式存在
每个组件的注册方式与全局注册相同
本地注册组件不可以用在其他容器内
vue中的组件也是有生命周期的。一个vue组件会经历,初始化、创建、绑定、更新、销毁等阶段,
所谓钩子函数,就是组件在生命周期的不同阶段要调用的函数
钩子函数不写也会默认执行,只不过函数内部为空,我们可以根据需求写出钩子函数并添加代码,那么就会在对应的生命周期上进行里面的函数,按照生命周期顺序依次为
beforeCreate
组件创建之前调用
created
组价被创建之后调用
beforeMount
组件被视图层绑定之前调用
mounted
组件被视图层绑定之后调用
beforeUpdate
组件发生更新之前
updated
组件发生更新时调用
beforeDestroy
组件销毁之前调用
destroyed
组件销毁之后调用
<html>
<head>
<meta charset="utf-8">
<title>组件生命周期、钩子title>
head>
<body>
<div id="app">
{
{title}}
<button type="button" @click="changeTitle">修改标题button>
<button type="button" @click="destroyObject">销毁组件button>
div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js">script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
title: "my vue",
},
methods: {
changeTitle: function(){
this.title = "hello vue";
},
destroyObject: function(){
this.$destroy()
}
},
beforeCreate() {
console.log("beforeCreate");
},
created() {
console.log("created");
},
beforeMount() {
console.log("beforeMount");
},
mounted() {
console.log("mounted");
},
beforeUpdate() {
console.log("beforeUpdate");
},
updated() {
console.log("updated");
},
beforeDestroy() {
console.log("beforeDestroy");
},
destroyed() {
console.log("destroyed");
}
});
script>
body>
html>
changeTitle:function(){…}是es5的写法,created(){…}是es6的写法
$destroy()是组件自带的销毁方法,可以直接调用
Command Line命令行工具,vue-cli就是vue命令行工具,也称之为脚手架,类似于Java SSM,使用vue-cli可以拉取,创建,运行我们需要使用的框架,比如webpack Element UI Element Adimin等,帮助我们快速拿到这些半成品
要想使用vue-cli,需要安装node.js环境,在node.js环境中使用
可以把node.js理解为前端程序运行所需的服务器
官网下载地址:http://nodejs.cn/download/
下载完成后,安装,一致下一步即可
在cmd命令行,输入node -v
,如果出现版本信息,表示安装成功
使用npm install vue-cli -g
命令
npm:node,js命令
install:表示安装
vue-cli:需要安装的软件
-g:全局安装
如果使用默认的官方镜像下载比较慢,也可以使用淘宝镜像
先安装淘宝镜像,npm install -g cnpm --registry=https://registry.npm.taobao.org
之后将下载命令中的npm改为cnpm即可,如,
cnpm install vue-cli -g
cnpm install
cnpm run dev
就像maven一样,vue为我们提供了一些官方的项目骨架,
执行vue list
可以显示当前常用的主流框架
在指定的根目录创建项目文件目录,并进入目录
使用vue-cli命令,在新创建的目录中下载项目骨架
vue init webpack my-project1
webpack:骨架名称
my-project1
:项目名称
安装过程中如果出现以下界面,需要手动操作
一定要先进入到我们创建的my-project1目录中,开始安装依赖
npm install
运行项目
npm run dev
每一个独立的项目都需要npm完整的骨架,所以还需要重新在新目录安装npm
这样我们创建的项目创建完毕,并且运行在node.js提供的服务器上
使用浏览器进入页面
使用IDEA打开项目
build:项目写好后需要导出生成打包文件,这些前端文件就放在这里
config:存放配置文件
src:与Java一样,存放我们开发时的文件
static:存放静态资源
index.html:首页
package.json:存放配置数据,配置文件
readme.md:介绍怎样使用webpack
assets:存放logo
这个组件由三部分组成,template script style
之前我们在html中通过cdn引入,然后进行全局注册,局部注册,但还是比较繁琐,现在我们可以直接在项目中创建.vue组件,更加方便,组件里的内容还是一样,只不过位置有些变化
export default{...}
表示暴露出当前的默认对象,这里也就是helloworld,name
表示组件名称,data(){return{...}}
存放数据变量,还可以继续加methods
方法
style
对应样式css,用来修饰页面,scoped表示当前css样式的作用域只作用域当前组件,
使用路由模块,配置路由表
使我们的核心入口,也是个组件,
类似于Java的main函数,是入口js,
import:导入文件,相当于将我们的核心组件导入到项目中,
new Vue:创建vue对象,
el:绑定容器,
router:表示使用了路由模块,
components:
本地注册组件,这里的App是文件名字,通常我们习惯将组件名和文件保持一致,之前我们在html中注册组件,并将组件内容写在里面,现在我们在这里注册组件,组件的内容就在App文件中,这个App文件就是上面的import导入的,App文件里面也有了组件的name名字
template:对应我们使用的模板,这里的
就是我们使用的组件标签,只有先注册了组件,才可以在这里使用对应的模板
在相应的目录新建vue组件,准备div容器,IDEA安装vue插件后,可以直接右键生成,
main.js中引入文件,注册组件,
App.vue是入口组件,所以回到App.vue组件中,添加我们自己刚刚注册组件,在命令行启动我们的webpack项目,访问首页
子组件中的差值表达式除了在data和methods中获取数据,也可以在props获取数据,优先级排在data和methods之后,
子组件的属性props中的数据可以从父组件中传来,先再data中注册属性,再到子组件的标签上绑定data属性和props属性
props除了可以传一个单独的属性,还可以传对象,这里我们使用了子组件自己定义的对象
去掉父组件中的属性绑定,否则父组件绑定的属性会优先展示
props的属性既可以通过父组件传递,可也以在子组件中自己定义,如果同时存在父组件传递的优先级高
子组件中,用props定义一个事件,类型为方法,用于接收参数(这里是hello kitty)
父组件中,将子组件标签的事件属性与父组件中的函数绑定,将子组件传递过来的参数(这里就是m)赋值到父组件的属性上
msg被赋值,又通过父传子的方式,显示在了子组件的插值表达式上
父子之间要想传参数,必须借助props这个属性,以及在子组件标签上进行绑定
案例中传递流程:见第一张图
子组件事件传参,props定义传参的函数,父组件中在组件标签上将子组件方法与父组件方法绑定,父组件methods定义方法接收参数并赋值到当前data属性中,父组件data属性发生变化最终又通过父传子在子组件插值表达式上显示出来
主组件中需要切换其他组件,比如在电商网站首页上,我们点击首页页面就会切换首页,当我们点击商品时,这个页面就会切换商品信息,这个过程就需要路由实现
通常,路由模块是一个项目不可缺少的
1.创建项目时,拉取框架时,根据安装提示直接安装
2.如果初始没有安装,可以进入已有的项目目录中,执行命令手动创建
这里我们重新创建项目带路由模块
IDEA打开my-vue-demo2,新建首页、商品列表两个组件,
在首页index.html中引入bootstrap,这样全局可以使用bootstrap样式
在主组件App.vue中,去掉div中原有的logo,添加我们自己的内容,如ul标签和li标签,用于跳转页面,这里我们不使用a标签跳转,而是使用路由跳转,添加美化样式
将首页、商品列表的组件注册到路由表中
路由表routes是一个数组,每个链接在数组中有对应的元素,
当前有一个默认的路由,/
表示当前IP地址根路径下,跳转的是Helloworld组件
我们可以继续添加新的/
后面的路径,对应新的跳转链接,
注意,路由表添加组件的跳转链接,还需要import导入组件的相对路径,如果有vue插件,这一步会自动生成
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '../components/Home'
import Product from '../components/Product'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Home',
component: Home
},
{
path: '/Product',
component: Product
}
]
})
将App.vue组将中,需要添加跳转功能的位置,套上router-link标签,同时指向路由表中的跳转地址,这样点击时就会切换到对应的子组件上了
加上
表示此处是我们想要具体显示组件的地方
命令行进入到项目根目录,执行npm run dev
,访问地址可以看到,点击导航栏,访问地址就会变化,同时显示内容变化,
但这些操作,都是在index.html页面的App.vue组件中进行切换的
当我们使用进行页面跳转时,可能需要携带参数到新的组件上,这就需要进行路由的参数传递
参数传递三个维度:设参、传参、接参
继续使用上面的项目my-vue-demo2
在路由表index.js中,对应的路由地址后面添加参数变量,有冒号,
在父组件中,直接将参数放在对应的router-link标签内,地址的后面,如,这里表示我们传参id=1
在子组件内接参,使用data(){return}接参,如,this.$route.params.id
$route是当前组件的route对象,params包含了所有参数,
上述这种方式,我们必须使用router-link跳转链接,使用router-view显示页面,但是这样使用有局限性
我们还可以通过js来实现js的跳转
父组件App.vue中添加一个按钮,绑定事件,methods定义函数,
注意这里使用的是router,而接参使用的是route,push表示发布到对应的路由地址上,携带参数
vue并没有支持ajax原生的功能,因为vue是一个视图层框架,严格遵守Soc关注度分离原则,
需要添加axios框架来实现异步通信
cmd进入项目目录,执行命令npm install --save axios vue-axios
在组件中,准备一个表单页面,
<template>
<div id="app">
<div style="width: 50%" class="container">
<div>
<h3>Registh3>
<h5>Emailh5>
<input type="text" class="form-control" v-model="mail"/><br/>
{
{mail}}
<h5>Passwordh5>
<input type="password" class="form-control" v-model="password"/><br/>
{
{password}}
<h5>Genderh5><br/>
<input type="radio" name="gender" v-model="gender" value="female"/>男
<input type="radio" name="gender" v-model="gender" value="male">女
<h5>Hobbyh5><br/>
<input type="checkbox" name="hobby" v-model="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" v-model="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" v-model="hobby" value="sport"/>运动
<br/>
<br/>
<button type="button" class="btn btn-success" @click="registfn">注册button>
div>
div>
div>
template>
vue项目部署在一个服务器上,后台java程序部署在另一个服务器上,所以前端请求后端时,涉及到了跨域,需要解决跨域问题
springmvc中可以使用cors方式解决
(未完,后续补充axios)
方法同上,命令行创建项目,IDEA打开,创建组件,注册路由表,测试页面跳转情况,
这里我们创建了首页、登录组件
详情参见官方文档:https://element.eleme.cn/#/zh-CN
官网有安装指令和Vue引入Element UI的详细步骤,顺便执行一下npm install将所需的依赖自动装一遍
准备好后,找我们需要的功能模板,展开复制代码,放到我们自己组件中,通常el开头的标签都是Element UI的
比如我们复制表单模板,注意复制时保留原有的element ui该有的层级结构,否则功能出不来
将组件内的根容器加class,这样可以在下方对视图做更细致的样式调整
Element UI 表单也支持设置校验规则,对输入参数进行校验,需要校验的字段需要对应标签添加prop属性指定,rules加在form数组后面即可,
提交按钮事件添加表单对象ruleform
作为参数,以便在函数中进一步校验提交参数,参数名随意,只要传参就是默认表单对象
待续