Vue.js指令的基本使用【总结】

最新推荐文章于 2023-11-21 09:55:16 发布
最新推荐文章于 2023-11-21 09:55:16 发布
阅读量938 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41615323/article/details/103422753
版权

首先在使用指令前，我们先了解vue的模版语法。

<!--2.其次创建一个id为app的元素-->
<div id="app">
  {{message}}<!--将message属性通过胡须（双括号）进行绑定-->
</div>

<!--1.首先需要引入vue.js的包-->
<script src="../js/vue.js"></script> 

<script>
//3.最后创建一个vue实例 可将里面的内容挂载到元素中 并且是响应式的
  const app = new Vue({
    el:'#app', //el属性：决定vue实例挂载在哪个元素上 一般用id来标识
    data:{
      message:'Hello Vue.js' //在data中定义一个message属性
    }
    //实例中除了data外也可写入methods方法等其他属性
  })
</script>

一、插值的操作

1. Muchache

  • Muchache：一般数据都是通过Mustache语法（即双括号）插入到html中,

    并且数据和界面是响应式的，可参考开头的模版语法。

  • 代码：

  <body>
  <div id="app">
    <p>{{message}}</p>  <!--使用muchahce将messag的值插入到html中-->
    <p>{{message}},VUE!</p>  <!--将muchache与字符串进行拼接-->
    <P>{{message}},{{metoo}}</P>  <!--使用两个muchache-->
    <p>{{counter *2}}</p>  <!--可以作为表达式-->
  </div>
  
  <script src="../js/vue.js"></script>
  
  <script>
    const app = new Vue({
      el:'#app',
      data:{
        message:'你好啊',
        metoo:'我不错',
        counter:100
      }
    })
  </script>
  </body>

  • 运行结果：

    • 运行成功后

    ​
    在这里插入图片描述

    • 在控制台修改message的值后，界面的值也会跟着数据的改变而发生改变，这就是响应式。

在这里插入图片描述

2. v-once指令

  • v-once：该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

  • 代码：

    <body>
<div id="app">
  <p>{{message}}</p>
  <p v-once>{{message}}</p> <!--使用了v-once的指令-->
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue!'
    }
  })
</script>
</body>

  • 运行结果：

    • 第一次运行
      在这里插入图片描述
    • 修改了message值后，第二行有v-once指令修饰，所以界面的值没有发生改变。

在这里插入图片描述

3. v-html指令
  • v-html：按照html格式进行解析，并且渲染出来。
  • 代码：
<body>
<div id="app">
  <p>{{url}}</p> 
  <p v-html="url"></p>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      url:'<a href="www.baidu.com">百度一下</a>'
    }
  })
</script>
</body>
  • 运行结果：
    第一行中没有使用v-html指令页面会直接输出html代码。
    第二行中使用v-html后就会将其进行解析并渲染。
    在这里插入图片描述
4. v-text指令
  • v-text：作用和Mustache一致，通常情况下，接受一个string类型。但不同的是使用v-text指令后不能直接与字符数拼接，会将其覆盖。
  • 代码：
<body>
 <div id="app">
   <p>{{message}},Vue</p>
   <p v-text="message">，Vue</p> <!--用的比较少，会将值覆盖-->
 </div>

 <script src="../js/vue.js"></script>
 
 <script>
   const app = new Vue({
     el:'#app',
     data:{
       message:'Hello'
     }
   })
  </script>
  </body>
  • 运行结果：
    同样情况下，使用v-text指令后，拼接的值会被覆盖，只显示message中的Hello。

在这里插入图片描述

5. v-pre指令
  • v-pre：v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
  • 代码：
<body>
<div id="app">
  <p>{{message}}</p>
  <p v-pre>{{message}}</p>
  <!--将代码原封不动的进行展示-->
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue'
    }
  })
</script>
</body>
  • 运行结果：
    第一行中的元素显示的是被编译过后的内容，即messg的值。
    第二行中加上了v-pre指令，则直接显示了{{message}}。
    在这里插入图片描述
6. v-cloak指令
  • v-cloak：解决在某些情况下（例如网络太慢所导致），我们浏览器可能会直接显示出未编译的Mustache标签。
  • 代码：
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>  
    [v-cloak]:{
      display: none;  /*在样式中添加v-cloak*/
    }
  </style>
</head>
<body>
  <div id="app" v-cloak> <!--代码解析前隐藏标签，当代码解析后 v-cloak会被删除-->
    {{message}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    setTimeout(function () {
      
      const app = new Vue({
        el:'#app',
        data:{
          message:'Hello Vue'
        }
    })
    })
  </script>
</body>
  • 运行结果：
    若没有使用这个指令 ,有时浏览器可能会因为来不及编译，将标签显示在页面上。使用指令后，在编译成功前会先隐藏标签，所以页面上只会出现编译后的内容。

在这里插入图片描述

二、动态绑定属性

1.v-bind的基本使用
  • v-bind：用于绑定一个或多个属性值，或者向另一个组件传递props值，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
  • 用法：
    在要绑定的元素前加上 v-bind：
    语法糖（简写）:
  • 代码：
<body>
<div id="app">
  <!--动态绑定图片-->
  <img v-bind:src="imgUrl" alt="">
  <!--动态绑定链接-->
  <a v-bind:href="indexUrl">百度一下</a>
  
  <!--语法糖写法-->
  <!--<img :src="imgUrl" alt="">-->
  <!--<a :href="indexUrl">百度一下</a>-->
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      imgUrl:'http://doc.vue-js.com/images/logo.png',
      indexUrl:'www.baidu.com'
    }
  })
</script>
</body>
  • 运行结果：

在这里插入图片描述

2.v-bind动态绑定class
2-1 绑定对象语法

对象语法的含义是:class后面跟的是一个对象。

  • 用法：
    直接通过{ }绑定一个类
    <h2 :class="{'active': isActive}">Hello Vue</h2>
    也可以通过判断，传入多个值
    <h2 :class="{'active': isActive, 'line': isLine}">Hello Vue</h2>
  • 代码
    需求：通过点击按钮修改Hello Vue的颜色
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style> /*为messag的值添加样式*/
    .active{
      color: darkred;
    }
  </style>
</head>
<body>
 <div id="app">
   <!--class="{key1:value1,key2:value2}"-->
   <!-- 直接在标签元素中进行判断 -->
   <p :class="{active:isActive,Line:isLine}">{{message}}</p>
  <!-- 也可以通过绑定方法进行实现 -->
   <p :class="getClass()">{{message}}</p>
   <!-- 添加一个按钮通过v-on：进行方法的绑定 -->
   <button v-on:click="btnClick">点击</button>
 </div>

 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el:'#app',
     data:{
       message:'Hello Vue',
       //作为样式改变的判断 若为true则显示样式，若为false则不显示样式       
       isActive:true,
       isLine:true,
     },
     //methods:与data平齐 一般用来写方法
     methods:{
     //按钮绑定的方法 当点击按钮时 样式会更改相反的状态
       btnClick:function () {
         this.isActive=!this.isActive
       },
       //将样式的状态写入方法中 再进行绑定
       getClass:function () {
         return{active:this.isActive,Line:this.isLine}
       }
     }
   })
 </script>
  • 运行结果

在这里插入图片描述
点击按钮后

在这里插入图片描述

2-2绑定数组语法

数组语法的含义是:class后面跟的是一个数组#### 3.v-bind动态绑定style。

  • 写法：
    直接通过一个[ ]绑定一个类
    <h2 :class="['active']">Hello World</h2>-
    也可传入多个值
    <h2 :class=“[‘active’, 'line']">Hello World</h2>
  • 代码：
<body>
<div id="app">
  <p :class="['active','line']">{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello World',
      active:'Vue',
      line:'哈哈哈哈哈'
    }

  })
</script>
</body>
  • 运行结果

在这里插入图片描述

3.v-bind动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式

3-1绑定对象语法
  • 用法：:style="{key(属性名)：vaule（值)}"
    对象的key是CSS属性名称
    对象的value是具体赋的值，值可以来自于data中的属性
  • 代码：
    将message的值字体样式更改到35px
<body>
<div id="app">
  <p>{{message}}</p> 
  <!--<p :style="{key(属性名)：vaule（值)}">{{message}}</p>-->
 <p :style="{fontSize:size}">{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello',
      size:'35px' //size的值动态绑定到data中
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
3-2绑定数组语法
  • 用法：:style="[baseStyles, overridingStyles]"
    style后面跟的是一个数组类型，数组中可有多个值，以逗号分割。
  • 代码：
<body>
<div id="app">
  <p>{{message}}</p>
  <p :style="[vueStyle,vueStyle1]">{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue',
      //将数组中样式动态的绑定在data中
      vueStyle:{fontSize:'30px'},
      vueStyle1:{color:'red'}
    }
  })
</script>
</body>
  • 运行结果：

在这里插入图片描述

三、计算属性

1.计算属性的基本操作

计算属性是写在实例的computed选项，与data和methods平齐。

  • 基本操作：
    在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
  • 代码：
    比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
    可以前面所提到的直接拼接的方法，如：{{firstName}} {{lastName}}，但若多处都要使用的话，代码就不够简洁。
<body>
 <div id="app">
 <!--直接进行拼接-->
   <p>{{firstName+lastName}}</p>
   <p>{{firstName}}{{lastName}}</p>
  <!--使用方法进行拼接 -->
   <P>{{getFullName()}}</P>
   <!--使用计算属性进行拼接 -->
   <p>{{FullName}}</p>
 </div>

 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el:'#app',
     data:{
       firstName:'蜡笔',
       lastName:'小新'
     },
     //方法
     methods:{
       getFullName () {
         return this.firstName+this.lastName
       }
     },
      //计算属性
     computed:{
       FullName(){
         return this.firstName+this.lastName
       }
     }
   })
 </script>
</body>
  • 运行结果：

在这里插入图片描述

2.计算属性的复杂操作
  • 需求：计算图书的总价格
  • 代码：
<body>
<div id="app">
  <p>总价为：{{totalPrices}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
    //定义一个books数组
      books:[
        {id:1,name:'水浒传',price:112},
        {id:2,name:'三国演义',price:111},
        {id:3,name:'西游记',price:134},
        {id:4,name:'红楼梦',price:132},
      ]
        
    },
    computed:{
    //计算总价
      totalPrices:function () {
        let result = 0
        for(let i =0;i<this.books.length;i++){
          result +=this.books[i].price
        }
        return result
      }
    }
  })
</script>
</body>
3.计算属性的getter和setter
  • getter：当读取变量时，我们会触发该变量的getter,默认情况下我们一般只使用计算属性中的getter。
  • settter：当修改变量时，我们会触发该变量的setter。
4.计算属性和方法的区别

  • 区别：
    方法methods：多次使用方法时，每次都需要调用。
    计算属性computed：因为计算属性有缓存，故多次调用只需调用一次，前提是内容没有改动。

  • 代码：

<body>
<div id="app">
  <!--方法1：使用方法 每次都需要被调用-->
  <p>{{getFullName()}}</p>
  <p>{{getFullName()}}</p>
  <!--方法2：有缓存，若内容没改变则只调用一次-->
  <p>{{fullName}}</p>
  <p>{{fullName}}</p>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      firstName:'蜡笔',
      lastName:'小新'
    },
    methods:{
      //es6写法
      getFullName() {
      //当调用方法是打印这句话
        console.log('执行了getFullName的方法');
        return this.firstName+this.lastName;
      }
    },
    computed:{
      fullName() {
      //当调用计算属性事打印这句话
        console.log('执行了fullName的计算属性');
        return this.firstName+this.lastName;
      }
    }
  })
</script>
</body>
  • 运行结果：
    由结果可见，计算属性和方法都能实现字符串拼接的功能，但在没有更改字符串的前提下，使用两次vue实例中的data时，计算机属性只需要调用一次。
    在这里插入图片描述

四、事件监听

1.v-on的基本使用
  • v-on：在实现交互中，我们常常需要监听用户的键盘，点击等事件，这时我们就需要用到v-on指令进行监听。
  • 用法：
    常用：在需要绑定的元素中添加v-on
    语法糖（简写）：@
  • 代码：
    在下面的代码中，我们将通过监听按钮的点击事件从而实现点击按钮时更改counter的值。
<body>
 <div id="app">

   <p>{{counter}}</p>
   <!--通过v-on指令 按下按钮时分别实现数值的增加和减少-->
   <button v-on:click="counter++">按钮1+</button>
   <button v-on:click="counter--">按钮1-</button>
   <p>--------------</p>
   <!--也可以将事件分别指向相对应的方法-->
   <button v-on:click="addtion">按钮2+</button>
   <button v-on:click="subtraction">按钮2-</button>

   <!--语法糖 <button @click="add">+</button>-->
 </div>

 <script src="../js/vue.js"></script>
 
 <script>
   const app = new Vue({
     el:'#app',
     data:{
     //1.定义counter的初始值为0
       counter:0
     },
     methods:{
       // addtion:function () {
       //   this.counter++
       // },
       // subtraction:function () {
       //   this.counter--
       // }
       //es6写法 更简洁
       addtion(){
         this.counter ++
       },
       subtraction(){
         this.counter--
       }
     }
   })
 </script>
</body>
  • 运行结果：
    当点击带+按钮时，数值增加。
    当点击带-按钮时，数值减少。
    在这里插入图片描述
2.v-on的参数注意问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

  • 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
    但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
  • 代码：
<body>
<div id="app">
 <p>{{message}}</p>
 <!--情况1:当方法没有调用参数时 不需要加括号-->
  <button @click="btn1Click">按钮1</button>
  
 <!--情况2:当方法调用参数时，需要添加括号和传入的值，若只添加括号则显示未定义，若括号也没添加则为鼠标滑动事件-->
  <button @click="btn2aClick(111)">按钮2</button>
  <button @click="btn2bClick()">按钮2</button>
  <button @click="btn2cClick">按钮2</button>
  
  <!--情况3：传入event事件的同时传入其它参数 event事件用$event -->
  <button @click="btn3Click(1111,$event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'v-on的参数注意问题'
    },
    methods:{
      btn1Click(){
        console.log("btn1Click");
      },
      btn2aClick(abc){
        console.log("有添加括号和值----",abc);
      },
      btn2bClick(abc){
        console.log("添加了括号但没传入值----",abc);
      },
      btn2cClick(abc){
        console.log("连括号都没有添加----",abc);
      },
      btn3Click(abc,event){
        console.log("同时传入event事件和其它参数-----",abc,event)
      }
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
3.v-on的修饰符
  • 在某些情况下，我们拿到event的目的可能是进行一些事件处理，所以
    Vue提供了修饰符来帮助我们方便的处理一些事件。
  • 代码:
    以下代码三种修饰符的用法（当然，修饰符不止以下三种），分别是：
    .stop 修饰符用来阻止冒泡事件
    .prevent 修饰阻止默认事件
    keyup 监听某个键盘的键帽
<body>
<!--为div添加一个点击事件-->
<div id="app" @click="divClick">
  哈哈哈哈哈哈
  <!--.stop修饰符用来阻止冒泡事件-->
 <button @click.stop="btnClick">点击</button>
  <br><br>
  <!--.prevent修饰阻止默认事件-->
  <form action="www.baidu.com">
     <input type="submit" value="提交" @click.prevent="subClick">
  </form>
  <br>
  <!--监听某个键盘的键帽-->
  <input type="text" @keyup.enter="keyUp">
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    methods:{
      btnClick(){
        //点击div中的内容时会打印btnClick
        console.log("btnClick");
      },
      divClick(){
        console.log("divClick");
      },
      subClick(){
        console.log("subClick");
      },
      keyUp(){
        console.log("keyup");
      }
    }
  })
</script>
</body>
  • 运行结果:
    • 当没使用.stop修饰时，点击哈哈哈旁边的按钮时，div中的点击事件也一起被打印出来。
      在这里插入图片描述
      而使用.stop修饰后，再点击按钮，则只会打印出按钮的点击事件。
      在这里插入图片描述
    • 当未使用.prevent修饰时，点击提交按钮时，会将自动跳转到表单所要提交的页面。（这里页面没有跳转成功没关系，主要侧重于修饰符的作用）
      在这里插入图片描述
      添加.preven修饰符后，点击提交按钮时则阻止了页面的跳转，而是调用了我们最事件所添加的方法，即在控制台打印出subClick。（打印出divClicks是因为提交按钮也是写在div中，且没有使用.stop修饰符故点击表单提交按钮时会一同打印）
      在这里插入图片描述
    • 有keyup.enter修饰，则当按下enter键时才会控制台才会打印。
      在这里插入图片描述

五、条件判断

1.v-if的基本使用
  • v-if：条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件，既v-if后面的条件为trues时，会渲染出对应的元素及其子元素，为false时不会渲染。
  • 代码：
<body>
<div id="app" >
  <!--1.可直接在v-if进行判断-->
  <p v-if="true">{{message}}</p>
  <!--2.也可以在data中赋值对其进行判断-->
  <p v-if="isShow">{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello',
      isShow:false  //当isShow为false时 不会显示元素
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
2.v-if和v-else 的使用
  • 当v-if为true时显示其元素中的内容，为false时则显示带有v-else指令的元素中内容。
  • 代码：
<body>
<div id="app">
  <p v-if="isShow">{{message}}</p>
  <p v-else>哈哈哈哈哈哈</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello',
      isShow:true //false
    }
  })
</script>
</body>
  • 运行结果：
    • v-if为true时：
      在这里插入图片描述
    • v-if为false时：
      在这里插入图片描述
3.v-if、v-else、v-else-if的使用
  • 用法：这三个指令与JavaScript的条件语句if、else、else if类似。
  • 代码：
    以下代码，主要根据成绩的标准进行判断，从而输出不同的评分。
<body>
<div id="app">
  <!--方法1  分别添加显示该元素所相对应的条件-->
  <p v-if="score>=90">优秀</p>
  <p v-else-if="score>=80">良好</p>
  <p v-else-if="score>=60">一般</p>
   <!--因为else是当以上条件都不满足时所显示，故不需要添加判定条件-->
  <p v-else>不及格</p>
  <!--方法2 在vue实例中添加一个计算属性 显示最后的判定结果-->
  <p>{{result}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      score:'65' //对score进行判定 因为score为65 故两种判定方法输出的结果都是一般
    },
    computed:{
      result(){
        //定义一个最终展示的信息
        let showMessage = '';
        //对成绩进行判定 最后返回该信息
        if(this.score >= 90){
          showMessage="优秀"
        }else if(this.score >= 80){
          showMessage="良好"
        }else if(this.score >= 60) {
          showMessage="一般"
        }else {
          showMessage="不及格"
        }
        return showMessage
      }
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
4.用户切换的案例
  • 需求：当点击按钮时，从用户登录切换为邮箱登录。
  • 代码：
<body>
 <div id="app">
 <!--用户登录 为其添加判定条件type-->
  <span v-if="type"> 
    <label for="user">用户登录</label> 
    <!--key解决文本框被副用 导致输入的文本保留的问题-->
    <input id="user" type="text" placeholder="用户登录" key="user">
  </span>
  
  <!--邮箱登录-->
   <span v-else>
     <label for="mail">邮箱登录</label>
     <input id="mail" type="text" placeholder="邮箱登录" key="mail">
   </span>
   <!--为按钮绑定一个点击事件-->
   <button @click="handleToggle">切换登录</button>
 </div>

 <script src="../js/vue.js"></script>
 <script>
   const app = new Vue({
     el:'#app',
     data:{
       type:true,
       //当type为true时，显示用户登录，为false时显示邮箱登录
     },
     methods:{
     //当点击按钮时 type的状态改为false 从而从用户登录切换为邮箱登录
       handleToggle(){
         this.type = !this.type
       }
     }
   })
 </script>
</body>
  • 运行结果
    在这里插入图片描述
    点击切换按钮后
    在这里插入图片描述
5.v-show和v-if的区别
  • 作用：v-show和v-if都能决定一个元素是否渲染
  • 区别：
    • 当判定条件为false时，v -if是通过dom直接删除标签从而不显示元素，而v-show则是通过修改行内样式display为none的方式不显示元素。
    • 当判定条件为true时，v-if是通过创建新的标签从而显示元素，v-show则是通过修改display对应的状态进行显示元素。
  • 使用：当我们频繁的需要修改切换状态时则使用v-show.若只修改一次状态时则使用v-if。
  • 代码：
<body>
<div id="app">
  <p v-if="isShow" id="AAAA">{{message}}</p>
  <p v-show="isShow" id="BBBB">{{message}}</p>
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'测试',
      isShow:true//false
    }
  })
</script>
</body>
  • 运行结果：
    • 当isShow为true时，都显示了元素
      在这里插入图片描述
    • 当isShow为false时，元素都没有渲染
      区别则是使用了v-if的元素 直接删除了标签，而使用v-show的则是添加了display:none的样式的方式。
      在这里插入图片描述

六、循环遍历

1. v-for遍历组数
  • 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
  • 用法：类似于 v-for="item in items"的形式。
  • 代码：
<body>
<div id="app">
  <!--1.简单遍历 遍历到列表中-->
  <ul>
  <!--item 可以替换成任意的字符串-->
    <li v-for="item in movies">{{item}}</li>
  </ul>
  <!--2.带下标遍历-->
  <ul>
  <!--inde 代表了下标 因为数组的下标是从0开始 所以渲染时+1-->
    <li v-for="(item, index) in movies">{{index+1}}.{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      movies:["本杰明巴顿奇事","猫鼠游戏","盗梦空间","绿皮书"]
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
2.v-for遍历对象
  • 代码：
    以下代码分别展示了获取对象中的不同元素
<body>
<div id="app">
  <!--1. 获取的只是value  -->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  <!--2 获取key和value:（value,key）in  -->
  <ul>
    <li v-for="(value,key) in info">{{value}}--{{key}}</li>
  </ul>
  <!--3 获取key,value和index: (value,key,index) in -->
  <ul>
    <li v-for="(value,key,index) in info">{{value}}--{{key}}--{{index}}</li>
  </ul>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      info:{
        name:"william",
        age:3,
        height:1.2
      }
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
3.v-for使用加key

总的来说key的作用主要是为了高效的更新虚拟DOM。

4.数组中响应式的方法
  • 响应式方法：push() 、pop()、shift()、unshift()、splice()、sort()、reverse()
    值得注意的是通过索引改变数组是没有响应式的
  • 代码：
    分别展示上述的几种方法以及在注释中说明其作用，将代码中的注释分别去除即可验证。
<div id="app">
  <ul>
  <!--将letter数组遍历在列表中-->
    <li v-for="item in letter">{{item}}</li>
  </ul>
  <!--为按钮绑定一个点击事件 并指向方法-->
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      letter:['A','B','C','D']
    },
    methods:{
      btnClick(){
       //数组中响应式的方法
        //1.push方法 从数组末端进行添加元素
        //this.letter.push('bbbb')

        //2.pop方法 从数组末端进行删除元素
        //this.letter.pop();

        //3.shift方法 从数组的开头进行删除元素
        //this.letter.shift();

        //4.unshift方法 从数组的开头进行添加元素
        //this.letter.unshift('aaa');

        //5.splice(start,参数2） 删除，替换，插入元素
        //删除:
        // this.letter.splice(2,2)
        // 从第二个元素开始删除两个元素，若没传入参数2，则是从第二个元素开始删除所有元素
        //替换:
        //this.letter.splice(1,3,'a','b','c')
        //从第一个元素开始替换后面三个元素，分别为a,b,c, 若没有传入替换元素则会被认为是删除三个元素
        //插入:
        //this.letter.splice(2,0,'r','d')
        //从第二个元素开始插入r,d ，第二个参数要为0，表示不删除和替换元素，作为插入元素

        //6.sort() 排序
        //this.letter.sort()

        //7.reverse() 反转排序
        //this.letter.reverse()

        //注意！通过索引改变数组 是没有响应式的
        //this.letter[0] = 'aaaa'


      }
    }
  })
</script>
</body>

  • 运行结果：

    • 不使用方法
      在这里插入图片描述
    • 1.使用push()方法，点击按钮后即在数据末端添加了指定的元素。
      在这里插入图片描述
    • 2.使用pop()方法 点击按钮，后则删除数组末端的最后一个元素。
      在这里插入图片描述
    • 3.使用shift()方法后，点击按钮后，则删除数组开头的第一个元素。
      在这里插入图片描述
    • 4.使用unshift()方法 ，点击按钮后，则在数组开头添加了指定的元素。
      在这里插入图片描述
    • 5.splice(start,参数2)方法，可以实现删除元素、替换元素以及插入元素。
      删除:
      this.letter.splice(2,2)
      点击按钮后，从第二个元素开始删除两个元素，若没传入参数2，则是从第二个元素开始删除所有元素。
      在这里插入图片描述
      替换：
      this.letter.splice(1,3,‘a’,‘b’,‘c’)
      点击按钮后，从第一个元素开始替换后面的三个元素，分别为a,b,c, 若没有传入替换元素则会被认为是删除第一个元素后的三个元素。

    在这里插入图片描述
    插入
    this.letter.splice(2,0,‘r’,‘d’)
    点击按钮后，从第二个元素开始插入r,d ，第二个参数要为0，表示不删除和替换元素，作为插入元素。
    在这里插入图片描述

    • 6.使用sort()方法，点击按钮后，可对数组进行排序。
      为了展示效果，现将数组中的数据打乱
      在这里插入图片描述
      点击按钮后
      在这里插入图片描述
    • 7.使用reverse()方法，点击按钮后，则对数组中的内容进行反转排序。
      在这里插入图片描述
      • 8.通过数组下标修改数组中的内容是非响应式，点击按钮后，数组中的内容已经修改，但页面的内容并没有发生改变。
        在这里插入图片描述

七、v-model的使用

1.v-model的基本使用
  • Vue中使用v-model指令来实现表单元素和数据的双向绑定，因为input绑定了message，所以我们输入内容时，message也会发生改变。
  • 代码：
<body>
<div id="app">
  <input type="text" v-model="message">
  <p>{{message}}</p> <!--用于验证当修改表单的值时，message是否发生改变-->
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello'
    }
  })
</script>
</body>
  • 运行结果：
    在这里插入图片描述
    当我修改input中的值时，message也对应发生改变。
    在这里插入图片描述
    当我修改messag的值时，input也会发生对应改变，从而实现了双向绑定。
    在这里插入图片描述
2.v-model的原理
  • v-model其实是一个语法糖，它的背后本质上是包含两个操作：
    v-bind绑定一个value属性
    v-on指令给当前元素绑定input事件
  • 代码：
    <input type="text" v-model="message">
    等同于
    <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
3.v-model结合radio类型
  • 需求：实现单选，并输出选择结果。
  • 代码：
<body>
<div id="app">
  <!--label的作用:点击文字时也能选中，提高用户的使用感
      一般情况下，一个label和一个input进行绑定-->
  <label for="male">
    <!--使用v-model可使单选框互斥，从而实现单选，否则两个选项可同时选择
        若没使用v-model,则需要使用name='sex'达到互斥作用-->
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <p>你所选择的性别是:{{sex}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      sex:'女'
      //默认值：因为使用v-model与data中的sex进行了双向绑定
     // 故可以在data中添加sex的值即可达到默认值和默认选项的效果
    }
  })
</script>
  • 运行结果：

在这里插入图片描述

4.v-model结合checkbox类型
  • v-model结合checkbox分别可以实现单勾选框和复选框。
    • 单个勾选框：
      v-model即为布尔值。
      此时input的value并不影响v-model的值。
    • 多个复选框：
      当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
      当选中某一个时，就会将input的value添加到数组中。
  • 代码：
<body>
<div id="app">
  <!--checkbox单选框-->
<label for="agree">
  <input type="checkbox" id="agree" v-model="isAgree" >同意协议
</label>
  <p>你选择的是:{{isAgree}}</p>
  <!--disabled用于限制没选中'同意协议'时不可点击‘下一步按钮’-->
  <button :disabled="!isAgree">下一步</button>

  <br>------------------分割线--------------------------<br>


  <!--checkbox复选框-->
  <input type="checkbox" value="网球" v-model="hobbies">网球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <h2>我的兴趣是{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      isAgree:false, //单选框对应的为布尔值
      hobbies:[]//复选框对应的数组 将选中的数组合并传给服务器
    }
  })
</script>
</body>
  • 运行结果：

在这里插入图片描述
单选框：点击同意后，可点击下一步操作的按钮。
复选框：点击后，将选择结果输出在一个数组中。
在这里插入图片描述

5.v-model结合select类型
  • select也分单选和多选两种情况
    • 单选：只能选中一个值 v-model绑定的是一个值。
      当我们选中option中的一个时，会将它对应的value赋值到mySelect中。
    • 多选：可以选中多个值
      v-model绑定的是一个数组。
      当选中多个值时，就会将选中的option对应的value添加到数组mySelects中。
  • 代码：
<body>
<div id="app">
  <!--单选-->
  <select name="abc" v-model="mySelect">
    <option value="苹果">苹果</option>
    <option value="葡萄">葡萄</option>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
  </select>
  <p>你所选择的水果是{{mySelect}}</p>

  <br>---------------分割线---------------<br>

  <!--多选  添加multiple属性-->
  <select name="abc" v-model="mySelects" multiple>
    <option value="苹果">苹果</option>
    <option value="葡萄">葡萄</option>
    <option value="草莓">草莓</option>
    <option value="香蕉">香蕉</option>
  </select>
  <p>你所选择的水果是{{mySelects}}</p>


</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      mySelect:'', //单选
      mySelects:[],//多选
 
    }
  })
</script>
  • 运行结果：
    • 单选：点击单选框中的选项，会对应输出选择结果。
    • 多选：按住ctrl点击进行多选，在数组中会输出对应的选择结果。
      在这里插入图片描述
6.v-model修饰符的使用
  • 三种修饰符
    • lazy修饰符：
      默认情况下，v-model默认是在input事件中同步输入框的数据的。
      也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
      lazy修饰符可以让数据在失去焦点或者回车时才会更新。
    • number修饰符：
      默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
      但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
      number修饰符可以让在输入框中输入的内容自动转成数字类型。
    • trim修饰符：
      如果输入的内容首尾有很多空格，通常我们希望将其去除
      trim修饰符可以过滤内容左右两边的空格。
  • 代码：
<body>
<div id="app">

  <!--1.lazy 当数据失去焦点和回车时才进行更新-->
  <input type="text" v-model.lazy="message">
  {{message}}

  <br>-------------分割<br>

  <!--2.number 修改文本框的类型 不用在进行数据转换-->
  <input type="number" v-model.number="age">
  <p>{{age}}---{{typeof age}}</p>

  <br>------------分割<br>

  <!--3.trim 去除多余的空格-->
  <input type="text" v-model.trim="name">

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello',
      age:'0',
      name:''
    }
  })
</script>
</body>
  • 运行结果：
    • 未使用修饰符前
      1.当我修改input中的内容，message会自动跟着被修改
      2.当我输入的为数字，但仍然是string类型
      3.周围带有空格
      在这里插入图片描述
    • 使用修饰符后
      1.当我修改input中的值，message需要等到我按下回车或失焦时才会进行更新
      2.输入数字时是number类型
      3.过滤空格
      在这里插入图片描述
茶梨吐司
关注
Vue.js 内置指令
WangZhaoLongjk的博客
04-29 712
回顾一下第2.2节，我们己经介绍过指令(Directive)的概念了，Vue.js的指令是带有特殊前缀v-的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。 其实我们已经用到过很多Vue内置的指令，比如v-html、v-pre，还有上一章的v-bind。 本章将继续介绍Vue.js中更多常用的内置指令。 5.1 基本指令 5.1.1 v-cloak v-cloak不需要表达式，它会在V...
Vue.js 基础语法之指令详解
柯晓楠
11-27 666
1 Vue 的安装与使用 1.1、引入vue.js 下载 vue.js 在项目中引入 Vue 有很多种方法，其中最简单的就是使用 <script> 标签引入。如果是在静态 HTML 文件中直接使用 Vue ，可以先去 Vue 的官网下载 vue.js 文件，然后再 HTML 文件中引入下载好的 vue.js 文件。 访问 Vue 官网 https://cn.vuejs.org/ ，或者是直接下面的超链接下载不同版本的 vue.js 文件： 点击下载开发版本 点击下载生产版本 在开发环境下不要使
Vue.js的使用方法
mzgcsdn的博客
03-16 965
vue的使用方法： 1. 首先引入vue.js 2. 定义页面结构（或者说提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。） {{message}} 3. 定义vue实例（或者说模型） var vm = new Vue({ el:"#app",/*el表示选择一个标签*/-->只要
JavaScript教程10 - Vue.js
Flyingfish
06-05 496
MVVM 什么是MVVM？MVVM是Model-View-ViewModel的缩写。 当我们用Node.js有了一整套后端开发模型后，我们对前端开发也会有新的认识。由于前端开发混合了HTML、CSS和JavaScript，而且页面众多，所以，代码的组织和维护难度其实更加复杂，这就是MVVM出现的原因。 用JavaScript在浏览器中操作HTML，经历了若干发展阶段： 第一阶段，直接用JavaS...
JavaScript基础
qq_45844648的博客
12-01 476
1.JavaScript引入方式： 嵌入式：用script标签包裹JavaScript代码，直接写到HTML文件里，示例： <script> javascript 语句; </script> 外链式：将JavaScript代码保存到一个单独的文件中，用js作为文件的拓展名。然后再用script标签的src属性引入文件。 html文件 ..... <script...
vue.global.js，Vue.js 框架的核心文件之一
08-11
例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue-animejs Vue的简单anime.js指令。-Vue.js开发
05-27
Vue-Anime适用于Anime.js的简单Vue绑定安装$ npm install --save vue-animejs从'vue-animejs'导入VueAnime;...Vue.use（VueAnime）用法添加一个名为v-anime的简单指令，该指令将所有参数直接传递给anime.js。
vue-popper-component-Vue.js的Popper.js指令。-Vue.js开发
05-27
vue-popper-component Popper.js插件的简单Vue.js组件。 演示：https://antongorodezkiy.github.io/vue-popper-component/依赖关系：Vue 1. vue-popper-component Popper.js插件的简单Vue.js组件。 演示：...
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
04-22
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它采用了声明式的数据绑定和组件化的设计，使得开发过程更加高效且易于维护。在提供的压缩包中，包含了多种不同版本的Vue.js库，这些版本各有其...
前端常用的script链接
weixin_47020721的博客
07-14 654
前端常用script链接 vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
VS CODE之vue.js基本知识一
Woolemon的博客
07-04 393
vs code 建项目布置 切换使用语言： 搜索框直接搜索该语言的英文，点击安装即可 文件目录管理： 设置颜色主题： 一些通用操作： 推荐安装的插件 Vue.js项目技术栈 Vue.js,Vue-Router,webpack,axios,Vue-cli3,Vuex,Vue组件器（Element-UI…) 技术间的联系 vue的细节分析 前端渲染（把数据和模板填到HTML标签中）： 渲染方式： 原生js拼接字符串 使用前端模板引擎 使用vue特有的模板语法 vue的基本
Vue.js 基本知识——基于script标签引入
热门推荐
07-01 4万+
1、使用Script标签引入vue的方法 <script src="https://unpkg.com/vue/dist/vue.js"></script> 也可以将vue.js文件下载至项目目录。调试环境建议用vue.js，生产环境建议用vue.min.js 2、组件必须有一个顶级容器，Vue的功能必须要在这此容器内。 <div id="myApp">...
Vue.js使用script导入教程
honey_fan的博客
03-24 7114
1、进入vue.js官网：Vue.js (vuejs.org) 2、点击“起步” 3、下滑，点击“安装” 4、选择需要的版本下载 5、使用时使用script标签导入即可 <script src="vue.js"></script> 6、查看页面，点击console发现有提示，第二个提示不用管，消除第一个提示可以在浏览器中导入vue开发者工具 7、导入开发者工具步骤：下载开发者工具，拖进浏览器扩展工具界面 点击“更多工具”-“扩展程序”，拖入下载好
vue里面的el只能绑定id吗_vue input单向绑定 vue单向绑定Vuejs第一篇之入门教程详解 - 电脑常识 - 服务器之家...
weixin_39538789的博客
12-19 647
vue input单向绑定 vue单向绑定Vuejs第一篇之入门教程详解发布时间：2017-05-03来源：服务器之家什么是组件？组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。接下来给大家介...
VUE3笔记
书生的博客
10-25 821
vite是一个web开发构建工具，由于其原生的ES模块导入方式，可以实现快速的冷服务器启动。通过终端中运行以下命令，可以使用vite快速构建vue项目。
.js文件在html中用法（vue）
晨晨晨的博博博客
03-12 2290
第一种： 有外部文件可以直接在head里引 <script src="vue.js"></script> 但head里有了vue的js文件 其他的js文件需要在body中写 第二种： 不引 直接在html中写 举例： 在页面中出现hello vue! 用第一种方法： 用第二种方法： 直接在html中写 js 用<script type="text/javascript"></script>包裹着js...
vue使用＜script src=“vue.js“＞＜/script＞的模式下怎么给局部组件添加事件
qq_40128591的博客
04-18 1826
一：注册你的组件(我这里是一个弹框) components:{ 'err-confirm':{ props:{ isShow:{ type:Boolean, default:false }, 'errmsg':String, calback:function(){ this.$emit('calback') } }, template:`<div class="dialog"> <div class="dia
Vue基础入门(二)：Vue的创建与分析
最新发布
LiuCJ_20000的博客
11-21 502
​ 组件的出现，是为了拆分 Vue 的代码块，不同的组件划分不同的功能模块，以后我们需要某个功能时，就直接调用对应的组件即可。​模块化：模块化是从代码的角度去分析的，方便代码分层开发，保证每个模块单独完成一项功能。​组件化：组件化是从界面的角度去划分的，如：分页组件、轮播、颜色选择、文件上传等抽象，是把公共的东西抽出来 （好处：复用，公共的）Vue 中的组件开发要注意的问题：变量名说明:（组件的使用规范）按 java 的 开 发 思 想 ， 变 量 名 往 往 是驼峰规则。
Vue.js 指令高级用法：params与动态数据绑定
在Vue.js 2.0中，推荐使用组件替代元素指令。" Vue.js 是一款流行的前端框架，其指令系统是其核心特性之一。在3.3章节中，我们探讨了指令的高级选项，尤其是如何通过params选项增强指令的功能。 在Vue.js 1.x版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值