vue五个指令入门示例

指令是带有前缀 v-，以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为

本文介绍5个指令的用法，他们分别是v-bind、v-if 、v-for 、v-on、v-model

1.v-bind指令

示例代码

<div id="app">
           <span v-bind:title="vbind">
                    span的title属性有值，鼠标移过来能看见！
            </span>
</div>
<script>
            var app = new Vue({
                el: '#app',
                data: {
                    vbind:"看到了吧"
                }
                })
</script>

该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

注意:span 元素的title属性特点是：鼠标停留在上面就会显示出来

效果

image.png

2.v-if、v-for条件与循环指令

v-if
代码

<div id="app">
            <span v-bind:title="vbind">
                    span的title属性有值，鼠标移过来能看见！
            </span>
            <p v-if="vif">现在你看到我了</p>
        </div>
        
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    vbind:"看到了吧",
                    vif:true
                }
                })
        </script>

效果

image.png

注意:如果vif值没有定义，将不会显示，控制台会报异常vif找不到

v-for

<div id="app">
            <span v-bind:title="vbind">
                    span的title属性有值，鼠标移过来能看见！
            </span>
            <p v-if="vif">现在你看到我了</p>
            <ol>
                    <li v-for="todo in todos">
                      {{ todo.text }}
                    </li>
            </ol>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    vbind:"看到了吧",
                    vif:false,
                    todos: [
                            { text: '学习 JavaScript' },
                            { text: '学习 Vue' },
                            { text: '整个牛项目' }
                    ]
                }
                })
        </script>

效果

image.png

3.v-on 指令-添加事件监听器

点击事件

v-on:click="方法名"

<div id="app">
                <p>{{ message }}</p>
                <button v-on:click="reverseMessage">反转消息</button>
</div>
 <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message:"上 海 ！"
                },
                methods: {
                    reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                    }
                }
                })
</script>

效果

image.png

4.v-model - 实现表单输入和应用状态之间的双向绑定

<div id="app">
                <p>{{ message }}</p>
                <button v-on:click="reverseMessage">反转消息</button>
                <input v-model="message">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message:"上 海 ！"
                },
                methods: {
                    reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                    }
                }
                })
        </script>

效果

image.png

vue应用的message的值会跟随输入的值变化而变化,初始化的时候input的值也被vue应用的message赋值，实现双向绑定

5.其他指令

v-html
该指令可以把demohtml变量数据解析成html

<p v-html="demohtml"></p>

最后编辑于：2020.01.06 16:28:55