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:οnclick="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方法，这里就不贴页面效果了，v-on的简写是@。

 

上一篇

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

下一篇

Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯

转载于:https://www.cnblogs.com/luyShare/p/11532073.html