Vue

1. vue简介

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

2. 在webstorm中创建工程

(1)引入vue.js文件

<script type="text/javascript" src="js/vue.js"></script>

(2)body创建一个div标签

<body>
    <div id="app">
        {{msg}}//和下面的{{msg}}对应
    </div>
</body>

(3)创建自己的js代码

  <script type="text/javascript">
        //创建一个vue对象
      var app=new Vue({
            //vue对象挂载到id为app的标签上,那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
            //数据
            data:{
                 msg:"我今天很好",
            }
      })
  </script>

3.1 el属性:

把当前vue对象挂载到指定的标签元素上,使其vue生效。

4. vue指令

4.1 v-text 和v-html

设置标签的文本值(textContent)

<!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">
          <span>{{msg}}</span><hr>

          <span v-text="msg">你的兴趣爱好?</span><hr>
           <!--v-text:无法解析html标签  v-html可以解析html标签-->
          <span v-html="msg">你喜欢什么?</span>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font color='red'>我喜欢散步</font>",
            }
      })
</script>
</html>

4.2 v-on基础

为元素绑定事件

<!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">
          <span>{{msg}}</span><hr>
          <button v-on:click="fun"></button>
        <!--上面的v-on:缩写为@-->
          <button @dblclick="fun">点点</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                 msg:"<font>我喜欢散步</font>",
            },
            //定义方法
            methods:{
                 fun(){
                     //this表示vue对象
                     this.msg="我喜欢jjs";
                 },
                 fun2(){
                     this.msg="我不是好人";
                 }
            }
      })
</script>
</html>

4.3 v-show 和v-if

根据表达值的真假,切换元素的显示和隐藏

<!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">
          <img src="imgs/sg.jpg" width="200" v-show="age>10&&age<20"/>
        <hr>
        <!--v-show通过style中disable来控制标签的显示和隐藏   v-if:通过删除和创建标签来控制-->
        <img src="img/1.jpg" width="200" v-if="age>10&&age<20"/>
        <button @click="fun">点击</button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:10
            },
            methods:{
                 fun(){
                      this.age++;
                 }
            }
      })
</script>
</html>

4.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>
         .a{
              border: red solid 5px;
         }
    </style>
</head>
<body>
    <div id="app">
          <!--如何让img标签中src属性引用vue对象中的数据-->
          <img v-bind:src="imgUrl"  width="200" v-bind:title="title" v-bind:class="flag?'a':''"/><br>

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

           <button @click="fun"></button>
    </div>
</body>
<script>
      let app=new Vue({
            el:"#app",
            data:{
                age:10,
                imgUrl:"img/sg.jpg",
                title:"动物",
                flag:true
            },
            methods:{
                 fun(){
                      this.imgUrl="img/1.jpg";
                      this.title="猎食者"
                 }
            }
      })
</script>
</html>

4.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>
             <!--for(数据类型 b:数组){}-->
             <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.sex}}</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":"aaa","age":16,"sex":"女"},
                     {"name":"bbb","age":19,"sex":"男"},
                     {"name":"ccc","age":15,"sex":"男"}
                 ]
            },
            methods:{
                 deleteUser(name){
                     alert(name);
                 },
                  fun(){
                      alert("触发了回车键");
                  }
            }
      })
</script>
</html>

4.6 v-model

获取和设置表单元素的值. input select textarea

<!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">
           <!--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>

//标签的作用

v-text: -----v-html

v-on:-----@

v-show:-----v-if

v-bind: 标签属性绑定----:

v-for: 循环

v-model:表单元素的双向绑定

6. vue结合axios以及后台代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>天知道</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/tianindex.css" />
  </head>

  <body>
    <div class="wrap" id="app">
      <div class="search_form">
        <div class="logo"><img src="img/logo.png" alt="logo" /></div>
        <div class="form_group">
          <input
            type="text"
            class="input_txt"
            placeholder="输入查询的内容"
            v-model="city"
          />
          <button class="input_sub" @click="searchWeather">
            搜 索
          </button>
        </div>

    </div>
      <table width="300" border="1">
        <tr>
          <td>姓名</td>
          <td>零花钱</td>
        </tr>
        <tr v-for="item in student">
          <td>{{item.spmno}}</td>
          <td>{{item.sal}}</td>
        </tr>
      </table>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="../js/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="../js/axios.min.js"></script>
    <!-- 自己的js -->
  <script>
     let app=new Vue({
         el:"#app",
         data:{
            city:"",
            studentVo:{},
            student:[],
         },
         methods:{
           searchWeather(){
               axios.post("http://localhost:8080/emp/list/1/5",this.student).then(result=>{
                    this.student=result.data.data.records;
               })
           }
         }
     })
  </script>


  
  </body>
</html>

posted @   海绵小方块  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示