Vue基础02：vue中的指令

最新推荐文章于 2022-08-22 23:14:47 发布

原创最新推荐文章于 2022-08-22 23:14:47 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

本文详细介绍了Vue.js中的指令如v-for、v-if/v-show、v-once、v-model等的使用，包括它们的功能、语法糖以及在实际应用中的注意事项。通过示例代码展示了如何循环遍历数组、对象和数字，以及事件绑定和动态属性绑定。同时，文章还提到了v-once指令在防止重复渲染方面的优势，以及v-model在输入元素双向数据绑定上的便利性。

更多详情在github仓库中：myVueWp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <!-- 
        vue 中的指令： 以 v-开头， 有特定功能，操作dom元素
     -->
     <!-- 
         v-for 指令，循环操作数据：{} 、 [], String
         1. for (let a of arr) ;  v-for="v in arr"  与 v-for="v of arr" 效果一样
         2. vue2.5+ 版本要求循环的时候，必须增加key属性，为了左dom区分
         3. v-bind 是动态绑定属性，所有属性中的值，都是我们的变量，如果要是字符串需要加双引号；
             v-bind:a  简写为 :a
         4. template vue 自带的标签，无意义的标签。template上不能增加key属性，需要给真实的元素添加key
         5. 多个元素，需要区分名称，可以使用模版字符串；
         6. v-for="value,key" ，key 是索引，尽量不要用key来渲染
            <li a:key>{{value}}</li>  如果将<li> 重排序，由于key 相同，vlaue不同，会导致重新创建dom，会导致性能浪费

        v-if/v-else  , v-show
          1. v-if=""  里面可以放变量，数字，字符串
             v-if 和 v-show 的区别，if 处理dom是否添加到页面上，show是样式的操作（是否显示dom）show不支持template的写法

        8. v-on 绑定事件， 可以简写成 @ 符号， 并且事件参数是 $event；
        9. v-once 只渲染一次，渲染后会产生缓存，下次更新时，会直接从缓存中获取，v-once可以有效防止重新渲染
        10. v-on:input
        11. 语法糖： v-model
      -->
      <div id="app">
          <!-- <div v-for="v,index of arr" v-bind:a="index">{{v}},{{index}}</div> -->
          <!-- <div v-for="v,index in arr" v-bind:a="index">{{v}},{{index}}</div> -->
          <template v-for="v,index in arr">
              <li :a="index+'_1'">{{v}} {{index}}</li>
              <li :a=`${index}_2`>{{v}} {{index}}</li>
          </template>

          <!-- 循环一个对象 -->
          <template v-for="value,key in {a:1}">
              <li>{{value}}, {{key}}</li>
          </template>


          <!-- 循环一个数字 -->
          <template v-for="value,key in 5">
              <li>{{value}},{{key}}</li>
          </template>

          <div v-show="true">
              hello
          </div>
          <div v-show="false">
              world
          </div>
          <!-- 对动态的数据，尽量不要用key来渲染，可能会导致性能浪费 -->


          <!-- 绑定事件: 可以将 v-on:click 简写为 @click  -->
          <div>{{flag}}</div>
          <!-- <button v-on:click="fn">DemoBut</button>÷ -->
          <!--  传输一个空参数 -->
          <!-- <button v-on:click="fn()">DemoBut</button> -->
          <!-- 传递原生到e事件 -->
          <!-- <button v-on:click="fn($event)">DemoBut</button> -->
          <button @click="fn($event)">DemoBut</button>

          <!-- 演示一个vue复用input到案例. 添加一个 key 就不再复用input， 切换到时候input被清空 -->
          <div v-if="flag">
              name 
              <input value="" key="1">
          </div>
          <div v-else>
              value<input value="" key="2">
          </div>
          <!-- 只渲染一次，渲染后会产生缓存，下次更新时，会直接从缓存中获取，v-once可以有效防止重新渲染 -->
          <div v-once>{{flag}}</div>

          <div>{{element}}</div>
          <div v-html="element"></div>

          <!-- 语法糖 -->
          <!-- <input type="text" v-bind:value="element" v-on:input="(e)=>{this.element=e.target.value}"> -->
          <input type="text" :value="element" @input="(e)=>{this.element=e.target.value}">
          <!-- 上面两句可简写为下面一句, 这种简写被称为语法糖 -->
          <input type="text" v-model="element">
      </div>

      
      <script>
          // 所有的数据都会合并到vm到示例上，但是会被data覆盖掉，不要声明相同到名字
          let vm = new Vue({
              el: "#app",
              // data中不能用this
              data: {
                  flag: true,
                  arr: [1,2,3,4,5],
                  element: "<h1>hello</h1>"
              },
              // 方法要放到methods中
              methods: {
                  fn(e){
                    //  原生到e事件
                    console.log(e);
                    console.log(this);
                    this.flag=!this.flag
                  }
              }
          });
      </script>
</body>
</html>