Vue.js的使用方法及常用指令

vue使用流程:

1.引vue.js

2.new Vue({

          el:'#box',

          data:{myData:'hello Vue'}

});

3.<div id="{{myData}}“></div>

常用指令:

v-model="数据"

v-show="true/false" 是否显示

v-hide="true/false" 是否隐藏

v-if="true/false"    彻底删除

v-else="true/false"

**if和show区别:

a)show  display

b)if  DOM删除

三 事件:

v-on:click=""

简写:@click=""

传参:@click="show(1,2)"

methods:{

show:function(a,b){

alert(a+b);

}

}

事件对象:

阻止事件冒泡:

1.ev.stopPropagation();

2.@click.stop="show1()"

阻止默认行为:

1.ev.preventDefault();

2.@contextmenu.prevent="show()"

@contextmenu.stop.prevent

键盘事件:

v-on:keyup="show"

v-on:keydown=""

keyup.键码=""

vue帮咱们封装的常用键:

@keyup.enter=""

@keyup.left=""

@keyup.right=""

@keyup.up=""

@keyup.down=""

@keyup.delete=""

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容