在笔记二的基础上继续写
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的简写是@。
上一篇
下一篇