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>

你可能感兴趣的