Vue.js 学习笔记三,一些基础指令,v-bind,v-on

时间:2019-09-17
本文章向大家介绍Vue.js 学习笔记三,一些基础指令,v-bind,v-on,主要包括Vue.js 学习笔记三,一些基础指令,v-bind,v-on使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在笔记二的基础上继续写

v-bind指令,为属性绑定数据

    <!--v-bind指令可以绑定属性-->
        <div v-html="msg2" v-bind:title="mytitle"></div>
        <input type="text" :value="mytitle+'+加点字符串'" />    

在<script>标签中添加 mytitle属性。

<script>
        var v = new Vue({
            el: '#divApp',
            data: {
                msg: '我只有在加载完成后才显示',
                msg2: '<h1>哈哈哈哈,我是H!</h1>',
                mytitle:'这是title'
            }
        })

    </script>

可以用v-bind,也可以用它的简写方式 :,效果一样。另外在要绑定的属性里,可以写符合js规则的表达式

页面,div绑定了title,文本框绑定了value,并且value是mytitle属性值+一个字符串

v-on指令 绑定事件

<!--v-on绑定事件-->
        <input type="button" value="我是个按钮"  v-on:onclick="show" v-on:mouseout="moveout" />

JS代码

var v = new Vue({
            el: '#divApp',
            data: {
                msg: '我只有在加载完成后才显示',
                msg2: '<h1>哈哈哈哈,我是H!</h1>',
                mytitle:'这是title'
            },
            methods: {//定义当前vue实例所有的可用方法
                show: function () {
                    alert('我点按钮了!');
                },
                moveout: function () {
                    alert('鼠标移走了!');
                }
            }
        })

给vue实例增加一个methods属性,用来定义实例所有的可用方法,在按钮的点击事件中定义show方法,在鼠标移出事件中,定义moveout方法,这里就不贴页面效果了。

上一篇

Vue.js 学习笔记 二,一些输出指令

原文地址:https://www.cnblogs.com/luyShare/p/11532073.html