一。加载流程
RuoYi-Ant
1.http://localhost:8080 进入index.html
2. index.html被main.js控制 el: ‘#app’,
3.main.js 引出App.vue 和 index.js
4.index.js 引出HelloWorld.vue
微信会计
1.http://192.168.1.104:8081 进入Index.html
2.index.html被main.js控制 el: ‘#app’,
3.main.js引出 App.Vue
4.App.Vue引出 foot.vue和 router下的index.js
5.index.js根据路由引出zhuye.vue
二。VUE使用说明
1、指令
{{ }} 也叫mustache语法
v-for
v-bind 简写: : 用作v-bing:src="" v-bind:img=""
v-text
v-html
v-on 简写: @
v-show
v-if
v-else-if
v-else
v-model 获取/设置表单input内容 双向绑定 页面input变化改变data,data变化改变页面[[]]
2、常用属性
data //数据
methods //方法
components //组件
computed //计算属性 与methods类似 只是template引用的时候不用加()，如{{getFllName}}
watch //监听事件
render //创建真正的virtual dom
props //存放的是父组件的元素值
生命周期函数
3、生命周期函数
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroy
//和data（）、methods同级
created() {
log.info("进入声明周期函数")
//调用methods里面的方法
this.getMenuData();
},
4、示例
1、export default {name:‘Test’}
export default {
name: 'Login',
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
methods: {
login() {
}
}
}
2、data属性
data () {
return{
name:"test",
reviewState: ""
}
}
data () {
return {
//对象
loginForm: {
username: '',
password: ''
},
//数组
items: [
{label: '基础信息'},
{label: '会计信息'},
{label: '工作单位'},
],
//对象
options: {
activeColor: '#bd3a55'
}
3、methods属性
methods:{
getFullName(){
return this.firstName + ' ' + this.lastName
},
stateChange(value, row,){
if (value == 0&&row.xf_shjg==1) {
return "未审核";
} else if (value == 1&&row.xf_shjg==1) {
return "初审未审核";
}
},
handleChange (item, index) {
this.active= 'tab-container'+index
this.$store.commit('changeGrdaTabId',{
tabId:index
})
}
}
<template>
<h2>{{getFullName()}}</h2>
<p class="card-t">审核状态：{{stateChange(data.status,data)}}</p>
</template>
4、computed 计算属性
computed:{
//简单写法
fullName:function(){
return this.firstName + '' + this.lastName
}
//完整写法
fullName2:{
set:function(){
this.firstName = "new value1"
this.lastName = "new value2"
}
get:function(){
return this.firstName + '' + this.lastName
}
}
}
<template>
{{fullName}}
</template>
5、components组件化
/**
全局组件：在全部页面都可使用
局部组件：Options写了components 是局部组件，只能在该id下使用
*/
局部组件步骤（header.vue作为组件引入其他页面，比如test.vue）
1.在test.vue引入组件
import header from '@/views/header'; //@/表示src目录，./表示当前目录下
2.在test.vue声明引入的组件
export default {
components: {
header
}
};
3.在test.vue使用组件：<组件名称></组件名称>
<template>
<header></header>
</template>
6、props用法:父的data属性和方法传到子
1.父template引入子组件OrderList并使用
a.import OrderList from '@/views/OrderList';
b. components: {
OrderList
},
c.template使用子组件
<OrderList ref="addProjectDialog" :childTableData="ParenttableData" ></OrderList>
2.根据<OrderList ref="addProjectDialog" :childTableData="ParenttableData" ></OrderList>
父组件data里面有个属性ParenttableData
子组件props里面有个属性childTableData
data() {
return {
ParenttableData: []
};
},
props:{
childTableData:{
type:Array,
}
},
3.父组件页面调用方法设置ParenttableData，子组件的childTableData也会对应设置值
methods: {
test() {
this.ParenttableData = [];
},
}
7、父组件调用子组件方法
1.父组件页面引入子组件并使用
a.import OrderList from '@/views/OrderList';
b. components: {
OrderList
},
c.页面使用
<OrderList ref="addProjectDialog"></OrderList>
2.父组件调用子组件方法
this.$refs.addProjectDialog.childMethod();
8、存放和获取登录人的guid
//存放
this.$store.commit("setGuid",data.grGuid)//guid放入vuex
//获取
guid:this.$store.state.guid,
9、循环 v-for指令
v-for示例
//循环数组
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
<ul>
<li v-for="（item,index) in movies">{{index}} + "-" + {{item}}</li>
</ul>
//循环对象
<ul>
<li v-for="item in object">{{item}}</li>
</ul>
<ul>
<li v-for="(value,key)in object">{{key}} -- {{value}}</li>
</ul>
10、双向绑定 v-model指令
<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
在data属性里面有loginForm对象
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
11、点击事件 v-on指令
<button v-on:click = "counter++"> <button @click = "counter++">
<button v-on:monseenter= "counter++"> <button @mouseenter= "counter++">
<button v-on:dblclick= "counter++"> <button @dblclick= "counter++">
<button v-on:click="login">登录</button>
@row-click="clickRow" element列表的点击事件
12、提示框
直接查询element官方文档
直接查询element官方文档
第一种：import {Toast} from 'mint-ui';
Toast("已完成面授或网络继续教育的人员，不需要进行学分申报！")
第二种：alert("双方的")
第三种：this.$message.success(`删除成功`)
this.$message.error(res.msg)
13、axios
//post带参数，参数@RequestBody
methods: {
login() {
this.$axios
.post('/vue/login', {
username: this.loginForm.username,
password: this.loginForm.password
})
.then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}
})
.catch(failResponse => {
})
}
}
//get不带参数
getMenuData() {
this.$axios
.get('/vue/getMenus')
.then(successResponse => {
let backMenus = successResponse.data;
let frontMenus = [];
for (let i = 0; i < backMenus.length; i++) {
let backMenu = backMenus[i];
let name = backMenu.name;
let frontMenu = {};
frontMenu.label = name;
frontMenus[i] = frontMenu;
}
this.menuData = frontMenus
})
.catch(failResponse => {
})
}
14、从A页面跳到B页面
1.按钮或者element列表声明点击事件
见上面9点击事件
2、写跳转方法
//跳到上一页
previousPage(){
this.$router.go(-1);
},
//跳到指定页面
clickRow(row) {
this.$router.push({name: 'orderDetail', params: {id: 10}}) //路由文件router/index.js加上这个VUE文件的路由
},
15、图片展示
1.template声明image标签
<img :src=imgUrl alt="">
2.data声明imgUrl属性
data() {
return {
imgUrl: "",
}
},
3.给imgUrl设置图片路径
created() {
this.imgUrl = 'http://localhost:8089/qrCode/create?linkUrl=https://www.baidu.com/';
}
16、文件路径 @ …
@/ src目录下
./ 当前目录下
2613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
