javaScript前端VUE

javaScript前端VUE

常用指令v-model

•v-model 一般用于表单元素(input) 双向数据绑定

•

•

•{{msg}}

•

常用指令v-if

•new Vue({

• el:’#box’,

• data:{

• flag:true

• }

•

• });

•

•

你能看到我吗

•

常用指令- v-for 循环

    <ul>

        <li

v-for=“value,index
in arr”>

            {{value}}

{{index}}

        </li>

    </ul>

解释: value 是你遍历的元素,index 是元素的索引 arr 是数组名称

常用指令 v-for

•遍历json

•

• {{ value}}{{key}}{{index}}

  value是值 ，key是键 ，index是索引 ，名字可随便起 但注意顺序

  基础事件v-on:click=“show()”

  •new Vue({

  • el:’#box’,

  • data:{ //数据

  • arr:[‘apple’,‘banana’,‘orange’,‘pear’],

  • json:{a:‘apple’,b:‘banana’,c:‘orange’}

  • },

  • methods:{ //methods 用来绑定事件的属性

  • show:function(){ //事件触发时所调用的函数

  • alert(1);

  • }

  • }

  • });

  •

  •

  •

  点击事件案例

  • new Vue({

  • el:’#box’,

  • data:{ //数据

  • arr:[‘apple’,‘banana’,‘orange’,‘pear’]

  },

  • methods:{

  • add:function(){

  • this.arr.push(‘tomato’);

  • }

  • }

  • });

  •

  •

  •
  

  •

  •

• • {{value}}

  •

  •

  ​

  显示隐藏指令 v-show=“true/fale”

  •window.οnlοad=function(){

  • new Vue({

  • el:’#box’,

  • data:{ //数据

  • flag:true

  • }

  • });

  • };

  •

  •

  案例点击隐藏

  •new Vue({

  •el: ‘#box’,

  •data: {

  •msg:false

  •},

  •methods: {

  •show: function() {

  •this.msg=true; //点击更改标记为true true 代表隐藏

  •}

  •}

  •});

  •

  •一个按钮

  •

  •

  事件对象 event

  new Vue({

  el: ‘#box’,

  methods: {

  show:function(e){

  alert(e.clientX);//鼠标点击的横坐标位置

  alert(e.button);//鼠标哪个键点击了左键是0 右键是1

  }

  ​ }

  });

  按钮

  事件冒泡

  new Vue({

  el:’#box’,

  methods:{

  showDiv:function(){

  alert(1);

  },

  show:function(ev){

  alert(ev);

  //ev.cancelBubble=true; 通过属性阻止冒泡

  ev.stopPropagation(); //调用方法阻止冒泡

  }

  }

  });

  ​ 通过 $event 将事件作为参数传递

  <button id=“bt” @click=“show($event)”>点击按钮

  ​ // <button id=“bt” @click.stop=“show()”>点击按钮 vue自带的方式阻止冒泡行为,不用传递事件对象

  阻止事件默认行为

  new Vue({

  el:’#box’,

  methods:{

  show:function(ev){

  alert(ev);

  ev.preventDefault();//调用事件对象中的方法,阻止默认行为

  }

  }

  });

  <a
  href=“http:www.baidu.com” @click=“show($event)”>点击进入

  键盘事件

  •new Vue({

  • el:’#box’,

  • data:{

  • },

  • methods:{

  • keydown:function(ev){

  • //keyCode是事件对象中的属性可以获取键的编码

  • alert(“按下了”+ev.keyCode);

  • },

  • keyup:function(){

  • alert(“松开了”);

  • }

  • }

  •});

  •

  • <input type=“text” @keydown=“keydown($event)”/>
  

  • <input type=“text” @keyup=“keyup()”/>

  •
  ({

  • el:’#box’,

  • data:{

  • },

  • methods:{

  • keydown:function(ev){

  • //keyCode是事件对象中的属性可以获取键的编码

  • alert(“按下了”+ev.keyCode);

  • },

  • keyup:function(){

  • alert(“松开了”);

  • }

  • }

  •});

  •

  • <input type=“text” @keydown=“keydown($event)”/>
  

  • <input type=“text” @keyup=“keyup()”/>

  •
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined
  undefined