Vue的基本语法使用

有时间指导毕业设计

于 2021-05-31 23:17:37 发布

阅读量89

点赞数 1

文章标签： Vue

本文链接：https://blog.csdn.net/houzhicongone/article/details/117432286

版权

现在项目的趋势，前后端进行分离，一般使用Springboot进行后端的编写，然后使用Vue(前端的框架进行前端页面的编写)
前端的软件：VsCode 需要下载Node.js 和Live Server进行端口号不同的跨域(需要在SpringBoot项目中Controller层中加上@CrossOringinI注解进行)问题的访问然后通过Springboot中的application.yml进行设置端口号和相关的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue语法练习</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
   <div id="app"> 
      姓名： {{name}}<br>
      <!-- 可以进行相向的绑定 -->
      姓名：<input v-model="name"/><br>
      
      性别：<input v-text="sex"/><br>
     
     <!-- 可以进行html的解析显示 -->
      标题：<font v-html="title"> </font><br>
      num:<input v-model="num"/>
      num1:<input v-model="num1"/>
      num2:<input v-model="num2"/>

      <!-- @click进行按钮的绑定add() -->
      求和1：<input type="button" value="求和" @click="add()"/>
      {{details()}}
      求和2:{{add()}}

     <br>
      Person:姓名：{{person.name}} 性别：{{person.sex}} 爱好：{{person.habite}}
     
     <br>
      请输入姓名：<input v-model="person.name"/>
      证输入爱好：<input v-model="person.habite"/>
      请输入性别：
      <select v-model="person.sex">
       <option value="男">男</option>
       <option value="女">女</option>


      </select>

   
      <input type="button" @click=""/>
   </div>
	<script type="text/javascript">
        new Vue({
			el: '#app',
			data: {
				name:'张三',
                sex:'男',
                title:'<h1>First to use Vue </h1>',
                num:0,
                num1:0,
                num2:0,
                person:{
                    name:'丁雪',
                    sex:'男',
                    habite:'Playing basketball'


                }
			},
			methods: {
				details: function() {
					return  this.site + " - 学的不仅是技术，更是梦想！";
				},
                add:function(){

                    return  parseInt(this.num1) +parseInt(this.num2);
                }

                
			}
		})
	</script>


</body>
</html>

列表取值的实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

<table>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>地址</td>
            </tr>
            <tr v-for="s in list">
                <td>{{s.id}}</td>
                <td>{{s.name}}</td>
                <td>{{s.address}}</td>
            </tr>
        </table>

        <font v-if="num1>num2">
            num1比num2大
        </font>
        {{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}}
        {{getBirthday}}
    </div>
</body>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            list:[],
            num1:23,
            num2:35,
            birthday:1529032123201 // 毫秒值
        },
        methods:{
            getList:function(){
                var list=[
                    {id:1,name:"张三",address:"北京"},
                    {id:2,name:"李四",address:"上海"},
                    {id:3,name:"王五",address:"杭州"},
                    {id:4,name:"赵柳",address:"广州"}
                ];
                this.list=list;
            }
        },
        computed: {
            getBirthday: function(){
                return new Date(this.birthday).getFullYear() + '-'+ new Date(this.birthday).getMonth()+ '-' + new Date(this.birthday).getDay()
            }
        },
        created:function(){
            this.getList();
            console.log(this.list);
        }
    })
</script>
</html>

添加页面add.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
            <h1>添加学生</h1>
           
            <table>
                <tr>
                    <td>学生姓名</td>
                    <td><input v-model="stu.stuName"/></td>
                    
                </tr>
                <tr>
                    <td>生日</td>
                    <td><input type="date" v-model="stu.birthday"/></td>
                    
                </tr>
                <tr>
                    <td>地址</td>
                    <td><input v-model="stu.address"/></td>
                    
                </tr>
                <tr>
                    <td>头像</td>
                    <td><input v-model="stu.photo"/></td>
                    
                </tr>
                
                <tr>
                    <td><input type="button" @click="fanhui" value="返回"/></td>
                    <td>
                        <input type="button" @click="chongzhi" value="重置"/>
                        <input type="button" @click="save" value="保存"/>

                    </td>
                    
                </tr>

          
            </table>
            
    </div>
    
</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
    new Vue({
        
        el: "#app",
        data: 
            {
                
                stu: {
                        id: 0,
                        stuName: "", 
                        birthday: moment(new Date()).format("yyyy-MM-DD"),
                        address:"",
                        photo:""
                }
                
            },
       
        methods: {
            
    
            fanhui:function(){
                location="stulist.html";
            },
            chongzhi:function(){
                location="add.html";
            },
            //保存方法
            save: function(){
                axios.post("http://127.0.0.1:8989",this.stu).then(
                  resp=>{
                      console.log(resp);
                      if(resp.data){
                          alert("添加成功");
                          location="stulist.html";
                      }else{
                          alert("添加失败");
                      }
                      
                  }
                );
            }


        }
        
        
    

    })

</script>
</html>

更新页面和后台的数据进行交互 update.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
            <h1>修改学生</h1>
           
            <!-- 用v-model进行绑定然后进行修改 -->
            <table>
                <tr>
                    <td>学生编号</td>
                    <td><input v-model="stu.sid" readonly/></td>           
                </tr>
                <tr>
                    <td>学生姓名</td>
                    <td><input v-model="stu.sname"/></td>
                    
                </tr>
                <tr>
                    <td>生日</td>
                    <td><input type="date" v-model="stu.birthday"/></td>
                    
                </tr>
                <tr>
                    <td>地址</td>
                    <td><input v-model="stu.address"/></td>
                    
                </tr>
                <tr>
                    <td>头像</td>
                    <td><input v-model="stu.photo"/></td>
                    
                </tr>
                
                <tr>
                    <td>
                        <input type="button" @click="update()" value="修改"/>
                    </td>
                    <td>                                      
                        <input type="button" @click="fanhui" value="返回"/>
                    </td>
                    
                </tr>

          
            </table>
            
    </div>
    
</body>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/moment-with-locales.js"></script>
<script>
    new Vue({
        
        el: "#app",
        data: 
            {
                
                stu: {
                        id: 0,
                        stuName: "", 
                        birthday: moment(new Date()).format("YYYY-MM-DD"),
                        address:"",
                        photo:""
                }
                
            },



            // 页面创建完成以后进行加载 
        created () {
           this.load(); //这个方法进行回显需要更新的数据
        },
       
        methods: {
            
    
            fanhui(){

                // 加载页面
                location="stulist.html";
            },
           
            //修改方法
            update: function(){
                // 后台用的PutMapping
                axios.put("http://127.0.0.1:8989",this.stu).then(
                  resp=>{
                      console.log(resp);
                      if(resp.data){
                          alert("修改成功");
                          location="stulist.html";
                      }else{
                          alert("修改失败");
                      }
                      
                  }
                );
            },
            load:function(id){
                var id=window.sessionStorage.getItem("sid");
                console.log("id: "+sid);
                axios.get("http://127.0.0.1:8989/"+sid).then(
                  resp=>{
                      console.log(resp);
                      this.stu=resp.data;
                      
                  }
                );
            }


        }
        
        
    

    })

</script>
</html>

有时间指导毕业设计

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
Vue的基本语法使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue
复制链接

扫一扫