Web全栈~38.Vue
Web全栈~38.Vue
上一期
基本语法
template和script交互
<template>
<div id="app">
<div>
我是{
{name}},我的师傅是{
{master}},我要讨伐{
{king}}
我是{
{person.name}} 今年 {
{person.age}} 岁
div>
div>
template>
<script>
// export是一个数据对象,我们可以写多个属性或者函数
export default {
data(){
return{
name:"姜子牙",
master:"元始天尊",
king:"纣王",
person:{
name:"张桂芳",
age : 16
}
}
}
}
script>
条件判断加单机事件
<div>
我是{
{person.name}} 今年 {
{person.age}} 岁
<input type="button" v-on:click="person.age = person.age + 1" value="年龄 + 1"/>
<input type="button" @click="AddAge" value="年龄-1"/>
<span v-if="person.age<18">未成年span>
<span v-else-if="person.age >= 18 && person.age < 35">青年span>
<span v-else-if="person.age >= 35 && person.age < 50">壮年span>
<span v-else-if="person.age >= 50 && person.age < 60">中年span>
<span v-else>老年span>
div>
methods:{
//定义当前组件中可以使用的所有函数
AddAge:function () {
this.person.age = this.person.age - 1;
}
}
循环语句
<div>
学校学院分别有
<ul>
<li v-for="My in MyClass" v-bind:key="My">
学院{
{My.name}} 班级数 {
{My.number}}
li>
ul>
div>
//在return返回下面再定义一个数组,我们等下用循环来遍历
MyClass:[
{"name":"信息工程学院","number":8},
{"name":"机电工程学院","number":6},
{"name":"经济管理学院","number":7}
]
Html支持
如果希望能够解析HTML，必须使用v-html指令。v-html是任意HTML标签的属性，v-html的取值可以是Model中定义的字段。
<span v-html="MyJava">span>
MyJava:"我爱<b>Javab>编程"
组件
组件：如果项目中多次用到类似效果，就可以把这个效果进行自定义组件。新建项目后默认存在HelloWorld.vue就是一个组件。组件文件必须导入才能使用。其中Helloworld为自定义名称，通过这个名称就可以调用对应组件。如果import时直接写组件名（大小写相同）IDEA会提升生成组件的路径，所以一般习惯上都是把名称定义为组件文件名。components: 组件文件只import是不能被使用的。必须在components中注册组件，注册后在中就可以通过组件名直接引用组件了。在中组件以标签形式存在，标签名为组件名。其中msg是在Helloworld中定义的props参数，表示需要传递给组件的数据。
在src下面的components目录新建一个文件,名字随便取
<template>
<div>
<div>这是一个组件div>
<div>{
{MyLove}}div>
div>
template>
<script>
export default {
//我的组件名
name: "MyComponents",
//props:定义组件传递的参数名称和类型
props:{
MyLove:String
}
}
script>
<style scoped>
style>
现在回到刚刚那个地方
<template>
<div id="app">
<div>
<MyComponents MyLove="Java"/>
div>
div>
template>
<script>
//导入,不导入会报错
import MyComponents from "@/components/MyComponents";
// export是一个数据对象,我们可以写多个属性或者函数
export default {
components:{
MyComponents
},
script>
完整源码参考
<template>
<div id="app">
<div>
我是{
{name}},我的师傅是{
{master}},我要讨伐{
{king}}
<br/>
<span v-html="MyJava">span>
div>
<div>
我是{
{person.name}} 今年 {
{person.age}} 岁
<input type="button" v-on:click="person.age = person.age + 1" value="年龄 + 1"/>
<input type="button" @click="AddAge" value="年龄-1"/>
<span v-if="person.age<18">未成年span>
<span v-else-if="person.age >= 18 && person.age < 35">青年span>
<span v-else-if="person.age >= 35 && person.age < 50">壮年span>
<span v-else-if="person.age >= 50 && person.age < 60">中年span>
<span v-else>老年span>
div>
<div>
学校学院分别有
<ul>
<li v-for="My in MyClass" v-bind:key="My">
学院{
{My.name}} 班级数 {
{My.number}}
li>
ul>
div>
<div>
<MyComponents MyLove="Java"/>
div>
div>
template>
<script>
//导入,不导入会报错
import MyComponents from "@/components/MyComponents";
// export是一个数据对象,我们可以写多个属性或者函数
export default {
components:{
MyComponents
},
data(){
return{
name:"姜子牙",
master:"元始天尊",
king:"纣王",
person:{
name:"张桂芳",
age : 16
},
//在return返回下面再定义一个数组,我们等下用循环来遍历
MyClass:[
{
"name":"信息工程学院","number":8},
{
"name":"机电工程学院","number":6},
{
"name":"经济管理学院","number":7}
],
MyJava:"我爱Java编程"
}
},
methods:{
//定义当前组件中可以使用的所有函数
AddAge:function () {
this.person.age = this.person.age - 1;
}
}
}
script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
style>
组件类型
| Object | 对象 |
| String | 字符串 |
| Boolean | 布尔 |
| Number | 数字 |
| Array | 数组 |
| Promise | 构造方法 |
| Function | 函数 |
当传递数值类型时，必须使用v-bind指令进行设置，这时参数表示一个表达式而不是一个字符串。v-bind:age="12" 。如果直接使用age=12进行传参效果依然可以实现，但是会在浏览器出现错误，提示要一个12的参数值，但是发现传递的是”12”
Vue Element
Vue Element 就是Vue的扩展插件。网址。写代码的时候可以点进官网对着文档进行学习和修改
修改main.js就可以引入eleme element
头上有@注释的就是标识引入的那三句话
import Vue from 'vue'
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
import ElementUI from 'element-ui';
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
Vue.config.productionTip = false
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app')
添加标签
在App.vue中添加Eleme官网中组件内容。就比如说我先弄个按钮
<el-button type="primary">这是一个el的按钮el-button>
Elment Form
编写好服务器端接收代码
@Controller
public class MyController {
@RequestMapping("/hello")
@ResponseBody
public String MyHello(String MyData){
System.out.println("后台接收前台的数据: " + MyData);
return MyData;
}
}
前端代码
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="数据">
<el-input v-model="form.MyData">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">传递数据el-button>
<el-button>取消el-button>
el-form-item>
el-form>
div>
template>
<script>
export default {
data() {
return {
form: {
MyData:"i love java"
}
}
},
methods: {
onSubmit() {
this.$.post("/hello",this.$.stringify({
MyData:this.form.MyData
}))
}
}
}
script>
Element Table
随便建个实体类
public class User {
private String name;
private Integer age;
}//写get set或者使用注解。这里就不写在文章里面了
Controller
@Controller
public class MyController {
@RequestMapping("/show")
public List<User> show(){
List<User> list = new ArrayList<>();
list.add(new User("张子明",19));
list.add(new User("刘小刚",23));
return list;
}
}
前端
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="name"
label="姓名"
width="150">
el-table-column>
<el-table-column
prop="age"
label="年龄"
width="120">
el-table-column>
el-table>
template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.$.get("/show")
.then(res => {
this.tableData = res.data;
})
}
}
script>