vue--常用指令

Posted 2021-03-22 zouzou-busy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--常用指令相关的知识，希望对你有一定的参考价值。

安装

官网：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>

以上是关于vue--常用指令的主要内容，如果未能解决你的问题，请参考以下文章