前言:
这是一个java程序员的vue学习记录。
vue是前端的主流框架,按照如今的就业形式作为后端开发的java程序员也是要有所了解的,下面是本人的vue学习记录,包括vue2的基本使用以及引入element-ui,使用的开发工具是IDEA。
一、第一个vue项目
1、环境需求
系统环境使用的vue3但是后续创建的项目是vue2项目,主要是因为vue3提供了vue ui对于初学者十分友好,这些环境的安装网上教程很多,我这里主要是记录一下一个java程序员怎么利用idea使用vue2框架。
2、使用vue ui创建项目
(1)启动vue ui
进入你需要创建vue项目的目录,我这里是vue-project,输入vue ui
,vue 的脚手架会自动创建一个地址,一般端口号是8000。
进入这个界面就表示成功了。我这里是我因为之前创建过项目所以直接进入项目仪表盘了,第一次创建应该进入第二页面。如果进入第一个页面点击左上角也可以进入第二个页面。
(2)创建项目
项目管理器的地址栏有需要可以自由更换,点击创建项目进入创建项目界面,确定你的项目名字我这里是vue-test,选择包管理器为npm,git他是默认选的,我这里没选。
点击下一步,选择vue2,点击创建项目并等待大概一分钟,第一次可能更慢。
(3)通过IDEA启动项目
找到项目文件夹,用idea打开
在idea上面找到编辑配置
选择npm
配置npm,这里应该只是需要选择脚本为serve
运行npm,默认端口是8080,如果可以进入了这个界面就证明成功启动,当然在控制台使用npm run serve也可以直接执行。
二、配置vue项目
1、vue的目录结构
2、修改端口号
因为8080这个端口十分热门所以为了避免冲突,我们可以通过更改vue.config.js修改端口号,修改端口为7070。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 修改前端端口号
devServer:{
port: 7070
}
})
3、安装插件(element-ui)
在插件市场搜索element ui安装,后面不要忘记选择配置插件(选择默认的就行),另外需要注意vue2是element但是vue3是element-plus。
4、配置依赖(Axios)
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
简而言之Axios是前端向后端发送http请求的工具,是前后端交互的重要方式。
三、vue的基本使用
1、.vue文件的结构
script标签写js,style标签写css,template写html可以理解为原生html的body标签。对于template有且只有一个div标签。
<template>
<div></div>
</template>
<script>
</script>
<!--scope表示这个样式只在此文件生效,不加就是全局--->
<style scoped>
</style>
2、关闭关闭eslint校验
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 修改前端端口号
devServer:{
port: 7070
},
// 关闭eslint校验
lintOnSave: false
})
3、引入组件
import导入,components:注入,通过标签使用。
<template >
<div>
<!-- 3、使用组件-->
<first/>
<hr>
<HelloVue/>
<hr>
<Ifdemo/>
<hr>
<ForDemo/>
<hr>
<VueOn/>
<hr>
<vueEvent/>
<hr>
<compute/>
<hr>
<watch/>
<hr>
<myForm/>
<hr>
<parent/>
<hr>
<parent2/>
<hr>
<slot1/>
</div>
</template>
<script >
/**
* 内容改变:{{}}
* 标签属性改变:v-bind:
* 监听事件:v-on:事件(click)
* */
// 1、引入组件
import HelloVue from "./components/HelloVue.vue";
import Ifdemo from "./components/ifdemo.vue";
import ForDemo from "./components/forDemo.vue";
import VueOn from "./components/vueOn.vue";
import vueEvent from "@/components/vueEvent.vue";
import First from "./components/first.vue";
import compute from "./components/compute.vue";
import watch from "./components/watch.vue";
import myForm from "./components/myForm.vue";
import parent from "@/components/parent.vue";
import parent2 from "@/components/parent2.vue";
import slot1 from "@/components/slot1.vue";
export default {
//2、 注入组件
components:{
HelloVue, Ifdemo , ForDemo, VueOn , vueEvent, First , compute, watch , myForm,parent,parent2,slot1,
}
}
</script>
<!--scope表示这个样式只在此文件生效,不加就是全局--->
<style scoped>
</style>
4、{{}}语法
可以通过双花括号渲染data()内的元素,hello.split("").reverse().join("")
的作用是先用"“分隔然后再反转最后用”"连接。
v-html可以插入html结构的文本。
<template>
<div>
<p>{{msg}}</p>
<p>{{hello.split("").reverse().join("")}}</p>
<p v-html="html"></p>
</div>
</template>
<script>
export default {
data(){
return{
msg:"消息",
hello: "你好hhh",
html:"<a href='https://baidu.com'>百度</a>"
}
}
}
</script>
<style scoped>
</style>
5、v-bind
v-bind:+
标签属性=
"js元素名"可以动态修改属性内容,对于对象会把属性名作为标签内的属性名,对象属性的值为标签属性的值,下面就是input标签的class属性和id属性都为id。可以用:
代替v-bind:
<template>
<div>
<h3>vue v-bind的使用</h3>
<p>
<input type="button" v-bind:value="btn" v-bind="object"/>
</p>
</div>
</template>
<!--加上scoped能够防止样式之间的冲突-->
<style scoped>
body {
background-color: #ff0000;
}
</style>
<script>
export default {
data() {
return {
msg: '这个是Vue模板页',
btn:"按钮",
object:{
class:"my",
id:"my"
}
}
}
}
</script>
6、v-if
v-if和v-else实现if、else的效果。
<template>
<div>
<h3>vue if</h3>
<p v-if="flag">正确</p>
<p v-else>错误</p>
</div>
</template>
<script>
export default {
data() {
return {
flag: true
}
}
}
</script>
7、v-for
类似java的foreach循环,it表示数组内容,index表示序号(从0开始),遍历对象时key表示对象的属性名。
<template>
<div>
<h3>列表渲染</h3>
<p v-for="it in name">{{it}}</p>
<!-- 顺序不要改-->
<p v-for="(it,index) in name">{{index+1}}----{{it}}</p>
<p v-for="(it,key,index) in object">{{index}}---{{key}}---{{it}}</p>
</div>
</template>
<script>
export default {
data() {
return {
name:["java","spring","vue"],
object:{
name:"张三",
age:20,
gender:"男"
}
}
}
}
</script>
8、v-on
v-on:可以绑定事件,下面分别实现了点击事件count++和count–。可以用@
代替v-on:
。
<template>
<div>
<h3>事件绑定</h3>
<button v-on:click="count++">up</button>
<!-- 推荐使用函数-->
<button v-on:click="downCount">down</button>
<h3>{{count}}</h3>
</div>
</template>
<script >
export default {
data() {
return {
count:0,
}
},
methods:{
downCount(){
this.count--;
}
}
}
</script>
9、事件传参
addCount实现了修改button标签的value值,func传递了name中的参数值和点击事件,两者监听的都是点击事件。
<template>
<div>
<h3>事件传参</h3>
<button v-on:click="addCount">add</button>
<p v-for="it in name" v-on:click="func(it,$event)">{{it}}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
name:["java","spring","vue"],
}
},
methods:{
// vue中的event对象就是原生js的event对象
addCount(e){
this.count++;
e.target.innerHTML="add"+this.count;
},
func(msg,e){
alert("点击了"+msg+e);
}
}
}
</script>
##10、计算属性
computed:效果类似于method,但是效率更高。
<template>
<div>
<h3>计算属性</h3>
<p>{{test}}</p>
</div>
</template>
<script>
export default {
data() {
return {msg: '这个是Vue模板页'}
},
// 函数的效率不如计算属性
computed:{
test(){
return this.msg.length>0?"Yes":"NO";
}
}
}
</script>
11、监听器(watch)
监听点击事件触发updateMsg()更改msg的值,watch内的监听器可以绑定msg属性(保证名字一样即可),可以获取改变前后的值。
<template>
<div>
<h3>侦听器</h3>
<button @click="updateMsg">{{ msg }}</button>
</div>
</template>
<script>
export default {
data() {
return {msg: '你好'}
},
methods:{
updateMsg(){
if(this.msg==='你好')this.msg='再见';
else this.msg='你好';
}
},
watch:{
// 侦听器的名字必须和绑定的属性名的名称一模一样
msg(newValue,oldValue){
console.log("改变前:"+oldValue);
console.log("改变后:"+newValue);
}
}
}
</script>
12、v-model
双向绑定标签属性和vue属性。
<template>
<form>
<input type="text" v-model="msg"/><br>
<!-- lazy只有确定才提交改变-->
<input type="text" v-model.lazy="msg"/><br>
{{msg}}
</form>
</template>
<script>
export default {
data() {
return {msg: ''}
}
}
</script>
13、组件间信息传递(父传子)
子组件可以使用父组件的属性。在子组件的props定义和父组件中子组件标签传入属性名相同的属性。
父组件
<template>
<div>
<h3>组件之间的信息传递(父传子)</h3>
<h5>父组件</h5>
<child v-bind:data="msg" :names="names"/>
</div>
</template>
<script>
import child from "@/components/child.vue";
export default {
data() {
return {
msg: '父组件的数据',
names:['张三','李四','王五']
}
},
components:{
child
}
}
</script>
子组件
<template>
<div>
<h5>子组件</h5>
<p>{{data}}</p>
<p>{{names}}</p>
<p>age: {{age}}</p>
</div>
</template>
<script>
export default {
data() {
return {msg: '这个是Vue模板页'}
},
// 名字必须和父组件的参数名字一幕一样,任何数据都可以传递,但是不允许修改父组件传递的数据
props:{
data:{},
names:{},
age:{
// 规定参数类型
type:[Number],
// 没有传参时的默认值,只有数字和字符串可以直接给默认值,数组和对象需要用default()函数
default:10
}
},
}
</script>
14、组件事件(子传父)
子组件自定义事件名称,父组件监听这个事件,父组件再为这个事件设置一个执行方法,这个方法就可以接受子组件数据。
父组件
<template>
<div>
<h3>组件事件(子传父)</h3>
<h5>父组件</h5>
接收的参数:{{msg}}
<child2 v-on:gogo="handel"/>
</div>
</template>
<script>
import child2 from "@/components/child2.vue";
export default {
data() {
return {
msg:''
}
},
methods:{
// 参数名只能是data
handel(data){
this.msg=data;
}
},
components:{
child2
}
}
</script>
子组件
<template>
<div>
<h5>子组件</h5>
<button v-on:click="do1">传数据</button>
</div>
</template>
<script>
export default {
data() {
return {msg: '子组件数据'}
},
methods:{
do1(){
// 两个参数,第一个是父组件实现的事件名称,第二个是参数,$emit是关键字
this.$emit("gogo",this.msg);
}
}
}
</script>
15、插槽
组件可以根据需要展示和组合不同插槽。
父组件
<template>
<slot2>
<!-- 多个插槽使用v-slot命名-->
<template v-slot:first>
<!-- 可以传递父组件属性到插槽-->
<div >{{msg}}</div>
</template>
<template v-slot:header>
<div >头部</div>
</template>
</slot2>
</template>
<script>
import slot2 from "@/components/slot2.vue";
export default {
data() {
return {msg: '父组件:插槽内容'}
},
components:{
slot2,
}
}
</script>
子组件
<template>
<div>
<h3>插槽</h3>
<!-- slot渲染父组件的内容-->
<!-- 使用name=渲染对应父组件插槽-->
<slot name="first">插槽默认值(父组件没有传插槽时显示)</slot>
<slot name="header">插槽默认值(父组件没有传插槽时显示)</slot>
<slot name="footer">插槽默认值(父组件没有传插槽时显示)</slot>
</div>
</template>
<script>
export default {
data() {
return {msg: '这个是Vue模板页'}
}
}
</script>