浅谈Vue的基本使用和语法~

不念不忘少年蓝@ 2022-12-03 05:20 137阅读 0赞

# 浅谈Vue的基本使用和语法~ #

### 前言 ###

要说到Vue,我们就不得不先聊起前后端分离。这个前后端分离呢,它是属于软件架构中的一种。其核心思想就是把前端项目和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。而Vue.js 小巧，灵活，功能却很强大。在市场上占有率更高，属于成熟稳定的框架。

Vue使用\{ \{ key \}\}获取js中data() 函数返回值。获取的值中如果包含HTML代码，不会解析，原格式输出。

## 基本语法 ##

### 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 1]。写代码的时候可以点进官网对着文档进行学习和修改

##### 修改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://element.eleme.cn/#/zh-CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDI0Njg4_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/539304ab1b804a59b955e95525f67618.png