vue的指令

最新推荐文章于 2024-01-23 16:04:06 发布

要温柔以待

最新推荐文章于 2024-01-23 16:04:06 发布

阅读量341

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/weixin_48554037/article/details/120687307

版权

文章目录

一、vue的指令有那些？
二、如何使用

一、vue的指令有那些？

v-model 双向数据绑定
v-bind 绑定属性简写:" : "
v-html 将含有标签的字符串转化称为标签
v-text 等同于{{ }} 在页面加载过慢{{ }}会闪烁一下,然后再出先数据,不是很优雅 ,使用v-text可以解决,无法用于属性,前后可以添加内容会被覆盖
v-once 不会跟着改变的值
v-on 事件简写: " @ "
v-show 显示和隐藏多用于,多次点击显示和隐藏 ,如果只有一次建议使用v-if
v-if 相当于js中的 if 也可以用于显示和隐藏和判断
v-else
v-else-if
v-for 可以循环 (数组对象数值 )

注意点 : 当vue.js 用 v-for 正在更新已经渲染过的元素列表时, 它默认使用就地复用策略注意使用key来防止就地复用问题

二、如何使用

v-model 的使用双向数据的绑定

代码:
body

 <body>
    <div id="app">
      <input type="text" v-model="msg" />
      {{msg}}
    </div>
  </body>

script

<script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        msg: "11111",
      },
      methods: {},
    });
  </script>

效果图
这是改变之前
这是改变之后的

v-bind 绑定属性的值可以简写为 " : "

body代码

<body>
      <div id="app">
        <input type="text" v-bind:value="name">
        <a :href="hrefs">这是百度的链接地址</a>
        <hr>
        <img :src="srcs" alt="">
      </div>
</body>

script 代码

<script src="../js/vue.js"></script>
<script>
    new Vue ({
      el: "#app",
      data:{
        name : "我是张三",
        hrefs : "https://www.baidu.com/",
        srcs : "../images/壁纸0.jpg",
      },
      methods :{
        
      }
    })
</script>

效果图
在这里插入图片描述

v-html

将含有标签的字符串转化称为标签
body 代码

<body>
      <id id="app">
           {{htmla}} 
           {{htmlb}}
           <div v-html="htmla"></div>
           <div v-html="htmlb"></div>
          
      </div>
</body>

script 代码

<script src="../js/vue.js"></script>
      <script>
          new Vue({
              el:"#app",
              data:{
                  htmla : '<i>1111</i>',
                  htmlb : '<b>222222</b>'
              },
              methods:{

              }
          })
      </script>

效果图
在这里插入图片描述

v-text

等同于{{ }} 在页面加载过慢{{ }}会闪烁一下,然后再出先数据,不是很优雅 ,使用v-text可以解决,无法用于属性,前后可以添加内容会被覆盖
body 代码

<body>
    <div id="app">
      {{msg}}
      <div v-text="msg"></div>
      <div v-cloak>{{abc}}</div>
    </div>
  </body>

script 代码

 <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        msg: "1111",
        abc: "222",
      },
      methods: {},
    });
  </script>

效果图 (低速网络时加载)
在这里插入图片描述
正常的

v-once

不会跟着改变的值
body 代码

<body>
      <div id="app">
        <input type="text" v-model="msg">
           <div >{{msg}}</div>
           <div v-once>{{msgtwo}}</div>
      </div>
</body>

script 代码

  <script>
      new Vue({
          el:"#app",
          data:{
              msg: "111",
              msgtwo : "222"
          },
          methods:{

          }
      })
  </script>

效果图
在这里插入图片描述

v-on

事件简写: " @ "

body 代码

<body>
     <div id="app">
        <input type="text" ref="name" :value="msg">
        <button @click="add">点击</button>
     </div>
</body>

ref 相当于 id一样的标签可以使用 $refs来查找
script 代码

  <script>
      new Vue({
          el:"#app",
          data:{
              msg:"我是张三"
          },
          methods:{
            add(){
              console.log(this.$refs.name.value)
            }
          }
      })
  </script>

效果图
在这里插入图片描述

v-show

显示和隐藏多用于,多次点击显示和隐藏 ,如果只有一次建议使用v-if
body 代码

<body>
      <div id="app">
          <button @click="flag = !flag">显示与隐藏</button>
          <h1 v-show="flag" v-text="msg"></h1>
      </div>
</body>

script 代码

<script src="../js/vue.js"></script>
<script>
          new Vue({
              el:"#app",
              data:{
                  flag:true,
                  msg: "大河之剑天上来",
              },
              methods:{

              }
          })
      </script>

效果图
在这里插入图片描述

v-if

相当于js中的 if 也可以用于显示和隐藏和判断
body 代码

<body>
     <!-- 这个是v-show -->
     <div id="app">
         <button @click="flag = !flag">显示与隐藏</button>
         <h1 v-show="flag" v-text="msg"></h1>
       <hr>
       <!-- 这个是v-if -->
       <button @click="flage= !flage">显示与隐藏</button>
       <h1 v-if="flage" v-text="msg2"></h1>
       <hr>
       <div v-if="num >= 90">
             优秀
       </div>
       <div v-else-if="num >=60 ">
           良好
       </div>

       <div v-else>
           不及格
       </div>
     </div>
</body>

script 代码

 <script src="../js/vue.js"></script>
     <script>
         new Vue({
             el:"#app",
             data:{
                 flag:true,
                 num : 100,
                 flage:false,
                 msg: "大河之剑天上来",
                 msg2 : "哈哈哈哈哈"
             },
             methods:{

             }
         })
     </script>

改变 data 里面的 num值可以切换不同的评价最高100,看条件
data 里面的 flag 是控制 v-show 的显示和隐藏 flage 的值是控制 v-if 的显示和隐藏
效果图
在这里插入图片描述

v-for

可以循环 (数组对象数值 )

body 代码

<body>
      <div id="app">
        {{msg}}
        <h1 v-for="i in 10">{{i + 100}}</h1>
        <h1 v-for="(v,i) in arr">{{v}}---{{i}}</h1>
        <h2 v-for="(v,k,i) in obj">{{k}}----{{v}}-----{{i}}</h2>
      </div>
</body>

script 代码

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            msg : "11111",
            arr: ["y","z","l"],
            obj : {"name":"张三","age":"18","sex":"男"}
        },
        methods:{

        }
    })
</script>

注意就地复用的的问题可以使用 :key 解决

一个小案例关于就地复用的问题有一些bug 比如添加为空什么的纯属演示亿下下,请多注意 :key=“v.id”

上代码:
body 的代码

<body>
    <div id="app">
      <input type="text" v-model="namevalue"> <button @click="add">添加</button>
        <p v-for="(v,k,i) in list" :key="v.id">
          <input type="checkbox">
            {{v.name}}
        </p>
    </div>
  </body>

script 代码

<script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#app",

      data: {
        namevalue: "",
        num: 4,
        list: [
          { id: 1, name: "张三" },
          { id: 2, name: "李四" },
          { id: 3, name: "王五" },
        ],
      },
      methods: {
        add() {
          console.log(this.num);
          var obj = { id: this.num++, name: this.namevalue };
          this.list.unshift(obj);
          this.namevalue = "";
        },
      },
    });
  </script>