Web全栈~38.Vue

朱雀 2022-11-01 00:51 42阅读 0赞

# Web全栈~38.Vue #

## [上一期][Link 1] ##

## 基本语法 ##

### 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>Java</b>编程"

## 组件 ##

组件：如果项目中多次用到类似效果，就可以把这个效果进行自定义组件。新建项目后默认存在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:"我爱<b>Java</b>编程" } }, 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>

### 组件类型 ###

<table> 
 <tbody> 
  <tr> 
   <td>Object</td> 
   <td>对象</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>字符串</td> 
  </tr> 
  <tr> 
   <td>Boolean</td> 
   <td>布尔</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>数字</td> 
  </tr> 
  <tr> 
   <td>Array</td> 
   <td>数组</td> 
  </tr> 
  <tr> 
   <td>Promise</td> 
   <td>构造方法</td> 
  </tr> 
  <tr> 
   <td>Function</td> 
   <td>函数</td> 
  </tr> 
 </tbody> 
</table>

当传递数值类型时，必须使用v-bind指令进行设置，这时参数表示一个表达式而不是一个字符串。v-bind:age="12" 。如果直接使用age=12进行传参效果依然可以实现，但是会在浏览器出现错误，提示要一个12的参数值，但是发现传递的是”12”

## Vue Element ##

Vue Element 就是Vue的扩展插件。[网址][Link 2]。写代码的时候可以点进官网对着文档进行学习和修改

##### 修改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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70_pic_center]

## 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>

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/113987488
[Link 2]: https://element.eleme.cn/#/zh-CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/78d18a88903a47b5ac7805440a3297d4.png