vue--常用指令

2019-12-18 21:01:06 阅读：202 来源： 互联网

安装

官网：https://cn.vuejs.org/

下载：https://cn.vuejs.org/v2/guide/installation.html

直接通过script在head标签里导入就可以了

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

或者通过CDN的方式直接引用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

模版语法

大家都知道django里的模版语法是{{ }}，事情总是巧合的，Vue里的模版语法也是{{ }}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1>{{ msg }}</h1>
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el，查找的元素
            data:{   // 固定写法，是个object，里面放的数据
                msg:"hello vue"  // 数据,前面的为模版里放的变量名，后面为对应的数据
            }
        })
    </script>
</body>
</html>

上面使用的是vue的方法查找id为app的属性，并将里面的文本替换为“hello vue”

指令

指令就是帮我们渲染数据的，语法：v-指令

上面的代码我们可以用指令v-text来实现

v-text

v-text相当于innerText，v-html相当于innerHTML，其实和上面的模版语法效果一样

data中是一个函数，函数中return一个对象，可以是空对象，但不能return

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1 v-text="msg"></h1>  <!--  写在标签里面-->
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el，查找的元素
            data(){
                return {
                    msg:"<h2>hello vue</h2>"
                }
            }
        })
    </script>
</body>
</html>

上面的将msg的内容原样显示在了页面上，没有当成标签渲染后显示，如果要渲染后显示在页面上，就要用到v-html了

v-html

v-text相当于innerText，v-html相当于innerHTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1 v-html="msg"></h1>  <!--  写在标签里面-->
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el，查找的元素
            data(){  <!--data中是一个函数，函数中return一个对象，可以是空对象，但不能return-->
                return {
                    msg:"<h2>hello vue</h2>"
                }
            }
        })
    </script>
</body>
</html>

v-for

v-for可以迭代数组和迭代对象

v-for迭代数组

语法：v-for="(alias,index) in array"
说明：alias是数组迭代的别名，index数组索引值，从0开始（可选，如果有就要加小括号）

v-for迭代对象的属性

语法： v-for=“(value,key,index) in object”
说明：value每个对象的属性值，key为属性名（可选），index为索引（可选）

<!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>
</head>
<body>
    <div id="app">
        <h3>1.迭代数组</h3>
        <ul>
            <!-- e 代表的是emps数组的别名，index 数组下标，从0开始 的 
            注意：使用 key 特殊属性， 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素    
                可以使用of或者in作为分隔符
        -->
            <li v-for="(e, index) of emps" :key="index">
               编号：{{index+1}}，姓名： {{e.name}} ， 工资 ：{{e.salary}}
            </li>
        </ul>


        <h3>2.迭代对象</h3>
        <ul>
            <!-- value对应是的对象的属性值，key就是对象的属性名，index索引值 -->
            <li v-for="(value, key, index) in person">
                第{{index+1}}个属性为：{{key}} =  {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                emps: [
                    {name: '马云', salary: '20000'},
                    {name: '马化腾', salary: '18000'},
                    {name: '东哥', salary: '13000'}
                ],
                person: {
                    name: '小梦',
                    age: 18
                }
            }
        })
    </script>
</body>
</html>

结果：

列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>

</head>
<body>

   <div id="app">
       <ul>
           <li v-for="student in students">{{student}}</li>
       </ul>
   </div>
   <script>
       new Vue({
           el:"#app",
           data:{
               students: ["张三","李四","王五"]
           }
       })
   </script>
</body>
</html>

字典

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>

</head>
<body>

   <div id="app">
       <ul>
           <li v-for="student in students">姓名：{{student.name}},年龄：{{student.age}},职业：{{student.job}}</li>
       </ul>
   </div>
   <script>
       new Vue({
           el:"#app",
           data:{
               students: [
                {
                   name:"张三",
                   age: 25,
                   job:"test"
               },
                {
                   name:"李四",
                   age: 56,
                   job:"IT"
               },
               {
                   name:"王五",
                   age: 85,
                   job:"dev"
               }
           ]
       }})
   </script>
</body>
</html>

v-if

v-if是否渲染当前元素，v-show 与v-if类似，只是元素始终会被渲染并保留在DOM中，只是简单切换元素的CSS属性display来显示或隐藏

案例

<!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="./node_modules/vue/dist/vue.js"></script>
    <style>
        .box{
            height: 200px;
            width: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model="seen" type="checkbox" name="" id="">勾选后显示红色小块
        <div v-if="seen" class="box"> </div>
        <p v-else>红色小块隐藏了</p>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            data: {
                seen: false,
            }
        })
    </script>
</body>
</html>

v-show

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="content">
    <button v-on:click='handlerClick'>隐藏</button>
    <div class="box" v-show='isShow'></div>

</div>

<script>
    //数据驱动视图
    new Vue({
        el: '#content',
        data() {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true
            }
        },
        methods: {
            
            handlerClick() {
                //数据驱动
                console.log(this);
                this.isShow = !this.isShow;  //取反

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

当第一次点击隐藏按钮的时候，isShow变为false，隐藏红色的框（加了个样式，display: none;）。当第二次点击的时候，因为isShow为fasle，所以取反之后变为true，显示红色的框

v-show要使用methods里的函数

当isshow为false的时候，页面的html是通过display:none，把内容隐藏了

切换性能：

v-show的切换性能高一些，display: none， v-if的切换是通过append

加载性能：

v-show的慢，v-if的快

v-on

点击事件，要写在methods里面

事件处理方法

完整格式：v-on:事件名=“函数名” 或 v-on:事件名="函数名(参数...)"
缩写格式：@事件名="函数名" 或 @事件名="函数名(参数)" 注意@后面没有：
event：函数中的默认形参，代表原生DOM事件，当调用的函数有多个参数传入时，需要使用原生DOM事件，则通过$event作为实参传入，用于监听DOM事件

<!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>
</head>
<body>
    <div id="app">
        <h3>1. 事件处理方法 v-on 或 @</h3>
        <button v-on:click="say">Say {{msg}}</button>
        <!-- $event代表的是原生 的Dom事件 -->
        <button @click="warn('hello', $event)">Warn</button>


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'Hello World!!',
                num: 0
            },
            methods: { //定义事件处理函数
                say: function (event) {
                    // event代表的是Dom原生事件， Vue.js它会自动 的将它传入进来，
                    alert(this.msg)
                    alert(event.target.innerHTML)
                },
                warn: function (name, event) {
                    //如果说函数有多个参数，而双需要使用原生事件，则需要使用 $event 作为 参数传入
                    alert(name + ',' + event.target.tagName)
                }
            }
        })
    
    </script>
</body>
</html>

事件修饰符

.stop阻止单击事件继续传播
.prevent阻止事件默认行为
.once点击事件只会触发一次

<!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>
</head>
<body>
    <div id="app">
    

        <h3>2. 事件修饰符</h3>
        <!-- 2.1 防止单击事件继续传播 -->
        <div @click="todo">  <!-- 点击doThis之后还会触发todo事件 -->
            <button @click="doThis">单击事件会继续传播</button>
        </div>
        <br>


        <div @click="todo">
            <!-- .stop作用：是阻止事件的传播，点击doThis之后不会触发todo事件 -->
            <button @click.stop="doThis">阻止单击事件会继续传播</button>
        </div>
        <br>

        <!-- 2.2 阻止事件的默认行为，不加prevent会跳转到百度 -->
        <a href="http://www.baidu.com" @click.prevent="doStop">百度</a>

        <!-- 2.3 点击事件只会触发一次 -->
        <button @click.once="doOnly">点击事件只会触发一次：{{num}}</button>

    
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: { //定义事件处理函数
                
                doThis: function () {
                    alert('doThis....')
                },
                todo: function () {
                    alert('todo....')
                },
                doStop: function () {
                    alert('doStop...href默认行为已经被阻止')
                },
                doOnly: function () {
                    this.num ++ 
                }
            },
        })
    
    </script>
</body>
</html>

按键修饰符

格式： v-on:keyup.按键名或 @keyup.按键名
常用按键名
- 　　.enter .tab .delete .esc .space .up .down

<!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>
</head>
<body>
    <div id="app">
        
        <h3>按键修饰符或按键码</h3>
        <!-- 回车键可以用做提交表单数据，比如搜索框 -->
        <input type="text" @keyup.enter="keyEnter">

        <input type="text" @keyup.space="keySpace">

        <input type="text" @keyup.13="keyCode">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
           
            methods: { //定义事件处理函数

                keyEnter: function () {
                    alert('当前按的是回车键')
                },
                keySpace: function() {
                    alert('当前按的是空格键')
                },
                keyCode: function () {
                    alert('按的是13')
                }
            },
        })
    
    </script>
</body>
</html>

例子二

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>
    <style>
         .active{
                 color: red;
                  }
    </style>
</head>
<body>

   <div id="app">
        <h1 :class="{active: isActive}">钢铁侠</h1>  <!-- 添加class属性为active -->
        <button v-on:click="ChangeColor">点我让钢铁侠变红</button>
   </div>
   <script>
        new Vue({
           el:"#app",
           data:{
               isActive: false
           },
            methods:{
               ChangeColor:function () {
                   this.isActive = !this.isActive; // 取反
               },
            }
           }
               )
   </script>
</body>
</html>

v-bind

通过class列表和style指定样式是数据绑定的一个常见需求，他们都是元素的属性，都用v-bind处理，其中表达式结果的类型可以是：字符串，对象或数组

语法格式

v-bind:class="表达式" 或 :class="表达式"

class的表达式可以为：

字符串 :class="activeClass"
对象 :class="{active:isActive,error:hasError}"
数组 :class="['active','error']" 注意要加上单引号，不然获取的是data中的值

style的表达式一般为对象

:style="{color:activeColor,fontSize+'px'}"
注意：对象中的value值activeColor和fontSize是data中的属性

例子一：

<!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="./node_modules/vue/dist/vue.js"></script>
    <style>
        .active{
            color:green;
        }
        .delete{
            background: red;
        }
        .error{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>Class绑定，v-bind:class 或者 :class</h3>
        <!-- <p class="active">字符串表达式</p>  -->
        <p v-bind:class="activeClass">字符串表达式</p>

        <!-- key值是样式名，value是data中绑定的属性 -->
        <!-- 当isDelete为true的时候，delete就会进行渲染 -->
        <p :class={delete:isDelete,error:hasError}> 对象表达式</p>

        <p :class="['active','error']">数组表达式</p>

        <h3>Style绑定，v-bind:style 或 :style</h3>
        <p :style="{color: activeColor, fontSize: fontSize + 'px'}">Style绑定</p>

    </div>
    
    <script>
       new Vue({
           el: "#app",
           data: {
               activeClass: 'active',
               isDelete: false,
               hasError: true,
               activeColor: 'red',
                fontSize: 100
           }
       })
        
    </script>
</body>
</html>

例子二：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
   <div id="app">
    <button v-on:click = 'handlerChange'>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img v-bind:src="imgSrc" v-bind:alt="msg">
    <div class="box" v-bind:class = '{active:isActive}'></div>

</div>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
               this.isActive = !this.isActive;

            },

        }

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

<div class="box" v-bind:class = '{active:isActive}'></div>
div原来有一个class属性，值只有一个box，通过v-bind绑定了一个属性active，isActive为true时把active添加到class里，为false时不添加

<button v-on:click = 'handlerChange'>切换颜色</button>

绑定了一个v-on的click事件，当第一次点击按钮时，去methods里找handlerChange，因为刚开始isActive为true（data里），点击后取反为false，
这时data里的也为false，所以没有active属性
v-on和v-bind的简写

v-bind可以简写为 ： v-on可以简写为@

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
   <div id="app">
     <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img :src="imgSrc" :alt="msg">
    <div class="box" :class = '{active:isActive}'></div>
</div>

<script>

//    v-bind和v-on的简便写法 :  @
    new Vue({
        el: '#app',
        data() {
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }

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

v-model

双向绑定，当用户输入的时候，改变原来的值，只能应用在像input，textare，select之类的标签

v-model也叫双向数据绑定

例子一：

<!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="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demo">
                <!-- @submit.prevent 阻止事件的默认行为，当前阻止的是action行为 -->
            <form action="#" @submit.prevent="submitForm">
                姓名(文本)：<input type="text" v-model="name">
                <br><br>
    
                性别(单选按钮)：
                    <input name="sex" type="radio" value="1" v-model="sex"/>男
                    <input name="sex" type="radio" value="0" v-model="sex"/>女
                <br><br>
    
                技能(多选框)：
                    <input type="checkbox" name="skills" value="java" v-model="skills">Java开发
                    <input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
                    <input type="checkbox" name="skills" value="python" v-model="skills">Python开发
                <br><br>
    
                城市(下拉框)：
                <!-- 绑定在select上才会默认选中 -->
                <select name="citys" v-model="city">  
                    <option v-for="c in citys" :value="c.code">
                        {{c.name}}
                    </option>
                </select>
                <br><br>
    
                说明(多行文本)：<textarea cols="30" rows="5" v-model="desc"></textarea>
                <br><br>
                <button type="submit" >提交</button>
            </form>
        </div>

        
        <script>
            new Vue({
                el: '#demo',
                data: {
                    name: '',
                    sex: '1',   //默认选中的是 男
                    skills: ['vue', 'python'], //默认选中 Vue.js开发 、Python开发
                    citys: [
                        {code: 'bj', name: '北京'},
                        {code: 'sh', name: '上海'},
                        {code: 'gz', name: '广州'}
                    ],
                    city: 'sh', // 默认选中的城市：上海
                    desc: ''
                },
                methods: {
                    submitForm: function () { //处理提交表单
                        //发送ajax异步处理
                        alert(this.name + ', ' + this.sex + ', ' + this.skills +  ', ' + this.city + ', ' + this.desc)
                    }
                }
            })
        </script>
    </body>
</html>

例子二：

<!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="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{}}用于标签体内显示数据 -->
        hello,{{ msg }}
        <br>
        <!-- v-model进行数据的双向绑定 -->
        <input type="text" v-model="msg">
    </div>

    
    <script >
        new Vue({
            el: "#app",  //指定被Vue管理的入口, 值为选择器, 不可以指定body或者是html
            data: {    // 用于初始化数据，在Vue实例管理的Dom节点下，可通过模板语法来引用
                msg: "vue.js"  
            }
        })
    </script>
    
</body>
</html>

会把msg的信息显示在输入框和div标签里，更改输入框里的数据，div里的也会跟着改，所以叫双向数据绑定

计算属性

computed 选项定义计算属性

计算属性类似于 methods 选项中定义的函数

计算属性会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。
函数每次都会执行函数体进行计算。

输入数学与英语分数，采用 methods 与 computed 分别计算出总得分

<!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>
</head>
<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore">
        英语：<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时，不要少了小括号 -->
        总得分（函数-单向绑定）：<input type="text" v-model="sumScore()"><br>
        <!-- 绑定计算属性后面不加上小括号 -->
        总得分（计算属性-单向绑定）：<input type="text" v-model="sumScore1"><br>
        总得分（计算属性-双向绑定）：<input type="text" v-model="sumScore2">



    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        /* 
        1. 函数没有缓存，每次都会被调用
        2. 计算属性有缓存 ，只有当计算属性体内的属性值被更改之后才会被调用，不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下：只有getter函数，而没有setter函数，所以只支持单向
            如果你要进行双向，则需要自定义setter函数
        */
        var vm = new Vue({
            el: '#app',
            data: {
                mathScore: 80,
                englishScore: 90,
            
            },

            methods: {
                sumScore: function () { //100
                    console.log('sumScore函数被调用')
                    // this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算
                    return (this.mathScore-0) + (this.englishScore-0)
                }
            },

            computed: { //定义计算属性选项
                //这个是单向绑定，默认只有getter方法
                sumScore1: function () { //计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会重新计算，只有发生改变 的时候才会重新计算
                    console.log('sumScore1计算属性被调用')
                    return (this.mathScore-0) + (this.englishScore-0)
                },

                sumScore2: { //有了setter和getter之后就可以进行双向绑定
                    //获取数据
                    get: function() {
                        console.log('sumScore2.get被调用')
                        return (this.mathScore-0) + (this.englishScore-0)
                    },
                    //设置数据， 当 sumScore2 计算属性更新之后 ，则会调用set方法
                    set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值
                        console.log('sumScore2.set被调用')
                        var avgScore = newValue / 2
                        this.mathScore = avgScore
                        this.englishScore = avgScore
                    }
                }
            },
            
        })

        
    </script>
</body>
</html>

computed 选项内的计算属性默认是 getter 函数，所以上面只支持单向绑定，当修改数学和英语的数据才会更新总分，而修改总分不会更新数据和英语

如果是用户输入的，那会直接拼接起来，因为用户输入的数字也会被当成字符串。可以使用number来解决这个问题

<td><input type="text" v-model.number="python" /></td>
<td><input type="text" v-model.number="vue"></td>
<td><input type="text" v-model.number="selenium"></td>

上面当我们输入时，vue会监听我们输入的内容，这样大大降低了性能，我们可以使用lazy，当失去光标的时候再执行

<td><input type="text" v-model.number.lazy="python" /></td>
<td><input type="text" v-model.number.lazy="vue"></td>
<td><input type="text" v-model.number.lazy="selenium"></td>

实战

图片切换（图片放自己的路径）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <img :src="images[currenIndex].imageSrc" alt=""><!--    按索引取图片-->
        <br>
        <button @click="preImage">上一张</button> <!--  绑定点击事件-->
        <button @click="nextImage">下一张</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    images:[
                        {id:1,imageSrc:"../image/1.jpg"},
                        {id:2,imageSrc:"../image/2.jpg"},
                        {id:3,imageSrc:"../image/3.jpg"},
                    ],
                    currenIndex:0
                }
            },
            methods:{  <!--    点击下一张按钮时调用这个方法-->
                nextImage(){
                    this.currenIndex++;
                    if (this.currenIndex == 3){
                        this.currenIndex=0;
                    }
                },
                preImage(){

                    if (this.currenIndex == 0) {
                        this.currenIndex=3;

                    }
                    this.currenIndex--;
                }
            },
            created(){ //组件，ajax
                setInterval(()=>{
                    this.currenIndex++;
                    if (this.currenIndex == 3){
                        this.currenIndex=0;
                    }
                },2000)
        }
        })
    </script>
</body>
</html>

标签：el,常用,vue,app,Vue,指令,new,data,属性
来源： https://www.cnblogs.com/zouzou-busy/p/11483757.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9