Vue2.0笔记——常用指令

Posted 2020-10-31

常用指令

v-model指令

该指令用于数据的双向绑定，即通过input text文本框，和Vue进行双向的显示。
一般用于表单元素。
只需要这样编写挂载目标：

<div id="app">
    <input type="text" v-model="message"/><br/>
    文本框的内容为:{{message}}
</div>

Vue实例的内容跟上节一样不用变。
通过对文本框的输入，Vue实例会自动解析并绑定到{{message}}进行渲染。

v-model为Vue的内部指令，到后面我们是可以指令的。

v-for指令

该指令，顾名思义，使用来循环的。
我们通过，手动编写和循环介绍:
1.首先在Vue实例的data选项中建立数组

data:{
    arr:[‘51CTO‘,‘走着路‘,‘Vue‘,‘v-for‘]
}

2.然后再div中编写

<div id="app">
    <ol>
        <li>51CTO博客</li>
        <li>走着路</li>
        <li>Vue</li>
        <li>v-for</li>
    </ol>
    <hr/>
    <ul>
        <li v-for="val in arr">{{val}}</li>
    </ul>
</div>

ol是手动写的有序列表，下面的ul是我们通过v-for指令的无序列表。运行可看到显示成功。
但如果想要索引和值，那么修改:

<li v-for=‘(val,key) in arr‘>{{key}}={{val}}</li>

即可,注意，括号里val在前，而模板显示时时，key在前。需注意。

v-on指令

用于绑定事件的,类似onclick,onblur等等。
用法：v-on:事件="函数"
既然使用事件，那么就要有一个新的选项methods来制定方法。
例如：

<div id=‘app‘>
    <button v-on:click="sayHi()">点击方法，sayHi</button>
    <button @mouseover=‘mousevoer()‘>鼠标经过</button>
</div>

<script>
    var vm = new Vue({
        el:‘#app‘,
        data:{
            arr:[‘51CTO‘,‘走着路‘,‘Vue‘,‘v-for‘]
        },
        methods:{
            sayHi:function(){
                console.log(‘HelloWorld‘);
            },
            mousevoer(){
                console.log(‘mouseover‘);
            }
        }
    })
</script>

然后，打开控制台，点击按钮，控制台就会显示HelloWorld，点击多次，前面会有数字显示次数。

v-on指令可以简写为@

v-once指令

用于只绑定一次

<input type="text" v-model="message"/><br/>
<h2 v-once>{{message}}</h2>
<h3>{{message}}</h3>

尽管v-model绑定message如何更改，message值总会变，但是h2通过v-once指令，它却只能显示一次，即‘HelloWorld‘这个初始绑定。而h3却始终动态渲染。

---

其余常用的v-if,v-show在 条件渲染 中介绍
v-bind在 Class与Style绑定 中介绍