Vue（自用）

VGSAm

于 2025-03-30 17:26:31 发布

阅读量269

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/VGSAm/article/details/146765842

1.Vue快速入门

1.1Vue概述

1.2Vue使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../js/vue.js"></script>
</head>
<body>
        <div id="app">
              <input type="text" v-model:name="message">
              {{message}}
        </div>
</body>
<script>
        new Vue({
          el:"#app",
          data:{
            message:"hello Vue"
          }
        })
</script>
</html>

2.Vue指令

2.1v-bind & v-model

<body>
      <div id="app">
        <a v-bind:href="url">链接1</a>
      </div>
</body>
    <script>
      new Vue({
        el:"#app",
        data: {
          url:"https://www.baidu.com"
        }
      })
    </script>

<body>
      <div id="app">
        <a v-bind:href="url">链接2</a>
        <input type="text" v-model="url">
      </div>
</body>
    <script>
      new Vue({
        el:"#app",
        data: {
          url:"https://www.baidu.com"
        }
      })

2.2v-on

<body>
      <div id="app">
        <input type="button" value="按钮1" v-on:click="handle()">
      </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{

    },
    methods:{
        handle:function (){
        alert("按钮被点击了")
      }
    },
  })
</script>

2.3v-if,v-else-if,v-else &v-show

1.v-if,v-else-if,v-else

<body>
    <div id="app">
        年龄<input type="text" v-model:type="age">经判定，为
      <span v-if="age<=35">年轻人（35及以下）</span>
      <span v-else-if="age>35 && age<=60">中年人（35-60）</span>
      <span v-else="age>60">老年人（60以上）</span>

    </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      age:20
    },
    methods:{

    }
  })
</script>

只显示符合条件的span

2.v-show

<body>
    <div id="app">
        年龄<input type="text" v-model:type="age">经判定，为
      <span v-show="age<=35">年轻人（35及以下）</span>
      <span v-show="age>35 && age<=60">中年人（35-60）</span>
      <span v-show="age>60">老年人（60以上）</span>
      
    </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      age:20
    },
    methods:{

    }
  })
</script>

显示所有span标签

2.4v-for

<body>
  <div id="app">
    <div v-for="addr in addrs">{{addr}}</div>
    <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      addrs:["北京","上海","深圳","沧州"]
    },
    methods:{

    }
  })

2.5vue案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1px" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td v-if="user.gender==1">男</td>
                <td v-else>女</td>
                <td>{{user.score}}</td>
                <td v-if="user.score<60">不及格</td>
                <td v-else-if="user.score>=60 && user.score<90">及格</td>
                <td v-else>优秀</td>
            </tr>

        </table>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            users:[{
                name:"tom",
                age:20,
                gender:1,
                score:79
                },{
                name:"jim",
                age:17,
                gender:2,
                score:50
                },{
                name:"David",
                age:30,
                gender:1,
                score:99
            }
                ]
        },
        methods:{

        }
    })
</script>
</html>

3.vue生命周期

<script>
  new Vue({
    el:"#app",
    data:{

    },
    mounted(){
      alert("Vue挂载完成，发送请求获取数据");
   },
    methods:{

    }
  })
</script>