Vue中一些常见的指令

最新推荐文章于 2024-07-12 14:10:05 发布

A__Cookie

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量431

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/A__Cookie/article/details/122209864

版权

什么是vue

1.javascript框架 2.简化DOM的操作 3.响应式数据驱动

vue的使用—hello

(1)引入vue.js文件（阿里云盘：https://www.aliyundrive.com/s/o2ZHYq2mye1）

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

(2)创建一个html双标签并为该标签起个id属性

<div id="app">
     <!--引用vue中的数据-->
    {{message}}
</div>

(3)写自己的js代码

<script>
      //③创建vue对象。
      var app=new Vue({
           el: "#app",  //把vue对象挂载到指定标签上
           data: { //定义数据
               message:"哈哈哈哈哈哈哈",
               obj:{},
               arr:[]
           }
      });
</script>

(4)在浏览器上查看

注意:

1.Vue会管理el选项命中的元素及其内部的后代元素 

2. 可以使用其他的选择器,但是建议使用ID选择器

3. 可以使用其他的双标签,不能使用HTML和BODY 建议使用div标签。

vue中常见的一些指令v

v-text 设置标签的文本值(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">
    {{message}}<br>
    <!--v-text:会把标签里的内容覆盖;
             如果网速太慢 {{message}}它会在浏览器中原封不动的显示
    -->
    <span v-text="message">hello world</span>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"阿巴阿巴阿巴",
        }
    });
</script>
</html>

运行结果：
在这里插入图片描述

v-html 设置标签的innerHTML

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

        <p v-text="msg"></p>

        <p v-html="msg"></p>
        <!--
            v-html和v-text都是把内容显示到标签内部。
            v-html可以解析html标签
            v-text不能解析html标签。
         -->

    </div>
</body>
<script>
       var app=new Vue({
             el:"#app",
             data:{
                  msg:"<font color='red'>啊实打实大</font>"
             }
       });
</script>
</html>

运行结果：
在这里插入图片描述

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">
    <button v-on:click="doIt">点击事件</button>
    <button v-on:dblclick="doIt2">双击事件</button>
    {{message}}
    <hr>
    <!--vue提供v-on:的简介版@等价于v-on:-->
    <button @click="doIt">点击事件</button>
    <button @dblclick="doIt2">双击事件</button>
    {{message}}
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"电风扇",
        },
        methods:{ //定义方法的。
            doIt:function(){
                this.message="hello"; //this表示当前Vue对象
            },
            doIt2(){
                this.message="hello2";
            }
        }
    });
</script>
</html>

在这里插入图片描述

v-show 根据表达式的真假来切换原理的显示和隐藏

<!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">
    <button @click="doShow">控制图片的显示</button>
    <br>
    <img src="img/003.jpg" v-show="flag" style="width: 300px"/>

</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            flag: true,
        },
        methods:{ //定义方法的。
            doShow(){
                this.flag=!this.flag;
            }
        }
    });
</script>
</html>

在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<style>
    button {
        outline: none;
        background-color: darkorange;
        font-family: 楷体;
        height: 50px;
        font-size: 18px;
        color: #FFF;
        border-radius: 7px;
        border: 1px solid coral;
    }

</style>
<body>

<div id="kd">
    <button @click="ages">点我</button>你点击了<span>{{age}}</span>
    <input type="button" v-if="age<7" value="点击7次有惊喜"/>

    <input type="button" v-if="age>=7&&age<10" value="10次也有"/>
    <input type="button" v-if="age>=10&&age<20" value="别点了没了"/>
    <input type="button" v-if="age>=20&&age<40" value="真的没了"/>
    <input type="button" v-if="age>=40&&age<77" value="真的！！！！！"/>
    <input type="button" v-if="age>=77" value="你好闲啊"/>
    <hr/>
    <img src="img/zks.gif" v-if="age>=7&&age<10" style="width: 300px;height: 300px"/>
    <img src="img/003.jpg" v-if="age>=10" style="width: 300px"/>
</div>
</body>
<script>

    var app = new Vue({
            el:"#kd",
            data:{
                  age:0
            },
        methods:{
               ages(){
                   this.age++;
               }
        }
    });
</script>
</html>

在这里插入图片描述

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="kd">
          <button @click="addItem">增加一项</button>
          <button @click="ttt">清空</button>

           <ul>
               <li v-for="(item,index) in arr" :title="item">{{index+1}}~~~~~~~{{item}}</li>
           </ul>
          <button @click="addList">增加一项</button>
          <button @click="dels">全部删除</button>
          <table border="1" width="500px" cellpadding="0" cellspacing="0" v-if="list.length>0">
              <tr >
                  <td>序号</td>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>家庭地址</th>
                  <th>操作</th>
              </tr>
              <tr  v-for="(itme,index) in list" :title="itme">
                  <td>{{index+1}}</td>
                  <td>{{itme.name}}</td>
                  <td>{{itme.age}}</td>
                  <td>{{itme.address}}</td>
                  <td>
                      <button @click="del(index)">删除</button>
                  </td>
              </tr>
          </table>

      </div>
</body>
<script>
    var app = new Vue({
       el:"#kd",
       data:{
          arr:[1,2,3,4,5,6,7,],
           list:[
               {"name":"张三1","age":15,"address":"郑州1"},
               {"name":"张三2","age":115,"address":"郑州2"},
               {"name":"张三3","age":215,"address":"郑州3"},
               {"name":"张三4","age":315,"address":"郑州4"},
           ],
           i:1
       },
        methods:{
           //arr add
           addItem(){
               this.arr.push("增加"+this.i+++"个")
           },
           //list add
            addList(){
                this.list.push({"name":this.i++,"age":17,"address":"保密"});
            },
            //del
            del(){
              this.list.splice(this.index,1)
            },
            dels(){
               this.list.splice(0,this.list.length)
            },
            ttt(){
               this.arr.splice(0,this.arr.length)
            }


        }
    });
</script>
</html>

在这里插入图片描述

A__Cookie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中一些常见的指令

什么是vue1.javascript框架 2.简化DOM的操作 3.响应式数据驱动vue的使用—hello(1)引入vue.js文件（阿里云盘：https://www.aliyundrive.com/s/o2ZHYq2mye1）<script type="text/javascript" src="js/vue.js"></script>(2)创建一个html双标签并为该标签起个id属性<div id="app"> <!--引用vue中的数
复制链接

扫一扫