VUE 基础

最新推荐文章于 2024-07-07 18:00:46 发布

PingMo_

最新推荐文章于 2024-07-07 18:00:46 发布

阅读量70

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/PingMo_/article/details/130146447

版权

1. vue简介
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求

1.vue简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2.vue的使用

2.1 根据vue的下载路径，将vue加到前端的js文件中引入 vue.js文件

<script src="../js/vue.js"></script>

2.2 创建一个带有 id 的 div 标签

<body>
    <div id="pjx">
        {{msg}}
    </div>
</body>

2.3 写入自己的 js 代码

  <script >
      let app=new Vue({
            //el 通过ID 挂在到标签上，使标签下的所有元素都可以使用data数据
            el: "#pjx",
            //数据
            data:{
                 msg:"pjx真帅",
            }
      })
  </script>

3. vue中常用的指令

3.1 v-text和v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue1.js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}} <hr>
			<span v-text="msg"></span> <hr>
			<span v-html="msg"></span> <hr>			
		</div>
	</body>
	<script>
		let app = new Vue({
			el: "#app",
			data : {
				msg:"<font color = 'red'>4.13</font>"
			},
			
		})
	</script>
</html>

测试结果

通过测试结果发现二者都可以引用文本，但是v-html可以识别 dom标签

3.2 v-on基础绑定点击事件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue1.js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}} <hr>
			<span v-text="msg"></span> <hr>
			<span v-html="msg"></span> <hr>
			
			<!-- 点击事件 -->
			<button v-on:click="fun">点击事件</button>
			<!-- 单击事件可以转化为 @Click -->
			<button @click="fun2">@点击事件</button>
			<!-- 双击事件 -->
			<button @dblclick="fun3">双击事件</button>
			
			
		</div>
	</body>
	<script>
		let app = new Vue({
			el: "#app",
			data : {
				msg:"<font color = 'red'>4.13</font>"
			},
			methods:{
				fun(){
					this.msg = "单击改变"
				},
				fun2(){
					this.msg = "@单击改变"
				},
				fun3(){
					this.msg = "双击事件"
				}
			}
		})
	</script>
</html>

3.3 v-show和v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../js/vue.js"></script>
</head>
<body>
    <div id="pm">
          <img src="imgs/01.jpg" width="200" v-show="c>1&&c<5"/>
        <hr>
        <img src="imgs/02.jpg" width="200" v-if="c>=5"/>
        <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#pm",
            data:{
                c:0
            },
            methods:{
                 fun(){
                      this.c++;
                 }
            }
      })
</script>
</html>

v-show通过style中disable来控制标签而 v-if:通过删除和创建标签来控制

3.4 v-bind 设置元素中的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
         .sax{
              border: red solid 1px;
         }
    </style>
</head>
<body>
    <div id="pm">
          <!--使用 v-bind 引用 vue 对象中的数据-->
          <img v-bind:src="img"  width="200" v-bind:title="title" v-bind:class="flag?'sax':''"/><br>

        <!--v-bind: 可缩写为 : -->
         <img :src="img"  width="200" :title="title" :class="flag?'sax':''"/><br>

           <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#pm",
            data:{
                age:18,
                img:"imgs/01.jpg",
                title:"纳西妲",
                flag:true
            },
            methods:{
                 fun(){
                      this.imgUrl="imgs/02.jpg";
                      this.title="可莉"
                 }
            }
      })
</script>
</html>

3.5 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
         <ul>
             <!--item数组数据 index数组索引-->
             <li v-for="(item,index) in hobby">
                 {{item}}--->{{index}}
             </li>
         </ul>

         <table width="500px" border="1" cellspacing="0" class="0">
               <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>职业</th>
                    <th>操作</th>
               </tr>
              <tr v-for="item in users">
                   <td>{{item.name}}</td>
                   <td>{{item.age}}</td>
                   <td>{{item.zy}}</td>
                   <td>
                       <button @click="deleteUser(item.name)">删除</button>
                       <button >编辑</button>
                   </td>
              </tr>
         </table>


         <input type="text" @keyup.enter="fun()"/>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 hobby:["原石","纠缠之缘","莫拉"],
                 users:[
                     {"name":"可莉","age":16,"zy":"法器"},
                     {"name":"纳西妲","age":19,"zy":"神"},
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>

3.6 v-model 获取和设置表单元素的值. input select textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
           <!--v-model会实现双向绑定:表达元素内容改变时，vue中对于的数据也会改变，vue中的数据改变对于的表单元素也会改变-->
           <input type="text" v-model="name" />
           {{name}}
           <button @click="dj">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                name:"可莉"
            },
            methods:{
                 dj(){
                    this.name="纳西妲";
                 }
            }
      })
</script>
</html>

4. axios发送异步请求

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>查询</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./css/Bookindex.css" />
  </head>

  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>查询</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
          @keyup.enter="select1"
          v-model="test"

        />
      </header>
      <table>
        <tr>
          <th>学生姓名</th>
          <th>学生年龄</th>
        </tr>
        <tr v-for="(s) in student">
          <td>{{s.name}}</td>
          <td>{{s.age}}</td>
        </tr>
      </table>
    </section>

    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
  </body>
<script>
  let todoapp = new Vue({
    el: "#todoapp",
    data:{
      student: [],
      test:""
    },
    methods:{
      select1(){
        axios.get("http://localhost:8080/select1").then(result=>{
          console.log(result)
          this.student = result.data.data
        })
      }
    }
  })
</script>
</html>