vue指令学习-CSDN博客

本文链接：https://blog.csdn.net/qq_41117471/article/details/102604891

1. vue 指令学习

1.最简单的Vue格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="one">
        <p>
            {{ msg }}
        </p>
    </div>
    <script>
        var sun = new Vue({
            el:"#one",
            data :{
                msg :'welcome'
            }
            methods:{     
            }
        })
    </script>
</body>
</html>

2. v-cloak , v-text ,v-ht ml 指令的使用

 <p>
        {{ msg }}
    </p>
    <p v-cloak>
        {{ msg }}
    </p>
    <p v-text="msg"> </p>
    <P v-html="html"></P>
    data:{  
         msg :'welcome',
         html : '<h1>welcome</h1>'
       }

说：v-html 可以解析html格式的数据v-text不能解析

3. v-bind的使用 v-bind的三种使用方法

：直接使用指令v-bind使用简化指令:在绑定的时候，拼接绑定内容：value=“add+‘这是追加的内容’”

<div id="one">
        <input type="text"  v-bind:placeholder="input">
        <input type="button" :value="button">
        <br>
        <input type="text":value="add+'这是追加的内容'">
    </div>
    <script>
        var sun = new Vue({
            el:"#one",
            data :{
                input :'请输入：',
                button : '提交',
                add :''
            }
        })
    </script>

4.v-on 使用Vue指令之v-on的缩写和事件修饰符事件修饰符

v-on可以缩写wei@ v-bind可缩写为 :

<input type="button" :value="button" v-on:click="tishi">
        <input type="button" :value="button" @click="tishi">

5.使用Vue指令之v-on的缩写和事件修饰符

事件修饰符：
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

6.v-model数据双向绑定

解析：v-model 指令用于数据绑定可用于 ,,标记

<div id="one">
        <input type="text" v-model:value="input">
        <p v-text="input"></p>
    </div>
    <script>
        var sun = new Vue({
            el:"#one",
            data:{
                input:'',
            }
        })
    </script>

7.计算器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>v-mosel</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="one">
        <input type="text" v-model:value="input1">
        <select v-model="add">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value="input2">
        <input type="button" value="=" @click="result">
        <input type="text" v-model="rs">
    </div>
    <script>
        var sun = new Vue({
            el:"#one",
            data:{
                input1:'0',
                input2:'0',
                add:'',
                rs:'0'
            },
            methods:{
                result:function(){
                    switch(this.add){
                        case '+' :
                            this.rs=parseInt(this.input1) + parseInt(this.input2);
                        break;
                        case '-' :
                            this.rs=parseInt(this.input1) - parseInt(this.input2);
                        break;
                        case '*' :
                            this.rs=parseInt(this.input1) * parseInt(this.input2);
                        break;
                        case '/' :
                            this.rs=parseInt(this.input1) / parseInt(this.input2);
                        break;
                    }
                }
            }
        })
    </script>
</body>
</html>

8.v-for指令的使用

1.迭代数组

<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

2.对象数组

<div id="one">
      <!-- <p v-for="(item,i) in itel">{{item}}</p> -->
      <p v-for="user in object">
          id:{{user.id}}name :{{user.name}}
      </p>
  </div>
  <script>
      var run = new Vue({
          el:"#one",
          data:{
              itel:[0,1,2,3,4,5,6,7,],
              object :[
                  {id:1,name:'孙帆' },
                  {id:2,name:'wwoc'},

3.循环遍历对象身上的属性

 <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

迭代数字<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

9.品牌添加案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div  id="one">
     id:   <input type="text" v-model:value="id">
     name: <input type="text" v-model:value="name">
     <input type="button" value="添加" @click="add" >
    <table border="1px">
        <caption>商品列表</caption>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>TIME</th>
            <th>option</th>
        </tr>
        <tr v-for="item in show">
            <td> {{item.id}}  </td>
            <td> {{item.name}} </td>
            <td> {{item.time}} </td>
            <td> <a href="">删除</a> </td>
        </tr>
    </table>
    </div>
    <script>
        var sun =new Vue({
            el:'#one',
            data:{
                id:'',
                name:'',
                show:[
                    {id:1,name:'宝马',time:new Date()},
                    {id:2,name:'奔驰',time:new Date()},
                    {id:3,name:'奥迪',time:new Date()},
                    {id:4,name:'红光',time:new Date()}
                    
                ]
            },
            methods:{
                add:function(){
                    this.show.push({id:this.id,name:this.name,time:new Date()})
                }

            }

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

10.Vue指令之v-if和v-show

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始
渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

                                                                       生存不易，请勿狙击！！！