vue.js学习（二）

前言

继续前面的学习，上文链接

正文

继续指令和事件的学习

指令

vue实例化
下面的示例都用到这个实例化的vue.

var a={
    a:1
    }
var vm=new Vue({
    el:"#box",
    data:{
        url:"img/home.jpg",
        data:a,
        seen:false,
        url:'img/img1.jpg'，
        message:'<p>插入标签</p>'
        }，
    methods:{
        show:function(e){
            console.log(e)
            }
        }，
        show1:function(e){
        console.log(e.keyCode)}

})

4.v-bind

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的属性，例如：

<img v-bind:src="url"/>

5.v-if

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素（PS：不是隐藏），它的基本语法如下：v-if=”exp”，exp是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<div id="box1"><div class="" v-if="seen">显示</div></div>

6.v-show

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性，用法和v-if类似。

7.v-else

可以用v-else指令为v-if“else块”。v-else元素必须立即跟在v-if的后面——否则它不能被识别。例：

//当seen的值为true是，v-else的标签不显示；反之，显示
<div id="box1">
    <div class="aa" v-show="seen">显示</div>
    <div class="bb" v-else>隐藏</div>
</div>

8.v-html

添加html，例：

<div id='box'>
    <div v-html='message'></div>
</div>

---

常用指令到这儿就学的差不多了，接下来学习事件。

事件

前面已经提到过事件可以用指令v-on来进行绑定，这儿就不做介绍了。一提到事件，首先想到的应该是事件对象，事件冒泡和事件阻止了。下面依次介绍。

1.事件对象

事件对象中保存了当前被触发事件的一些相关的属性信息，如事件源、事件发生时的鼠标位置、事件按键等。
原生js获取方法：
IE中可以window.event直接获取，而Firefox中则不可以，可通过如下方法获取：
1）var event = window.event || arguments.callee.caller.arguments[0];
2）通过参数传。function(e) { var event = window.event || e; }
vue获取方法：

@click="show($event)//$event即为事件对象

2.事件冒泡

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

3.事件阻止

原生js实现事件阻止：
在IE里使用 window.event.cancelBubble = true;
在Firefox里使用 event.stopPropagation();
vue实现事件阻止：
1.原生js中的方法依然可以用。
2.vue特有的方法

<div id="box" @click="show1()">
    <input type="button" id="" value="点击" @click.stop="show()" />       
</div>

键盘事件-键码

例如通过方向键来触发事件时，可以进行如下书写。up,down,left,right.

<input type="text" id="" value="" @keydown.left="show()" />
<input type="text" id="" value="" @keydown.37="show()" />

今天就到这儿~