vueJs2.0学习笔记（五）

事件处理

可以使用v-on监听事件触发命令

实例：
HTML：

<div id="divOne">
            <button v-on:click="counter+=1">点击</button>
            <p>{{counter}}</p>
        </div>

JS：

var app = new Vue({
                            el:"#divOne",
                            data:{
                                counter:0
                            }

                })

接收方法

在v-on直接插入命令是不明智的，因为实际开发中命令很复杂，很长。所以v-on里应该放的是方法名。

把上面的计数器可以改成下面的方法：

实例：
HTML：

<div id="divOne">
            <button v-on:click="meth">点击</button>
            <p>{{counter}}</p>
        </div>

JS：

var app = new Vue({
                            el:"#divOne",
                            data:{
                                counter:0
                            },
                            methods:{
                                meth:function(counter){
                                     this.counter+=1;
                                }
                            }     
                })

内联方法

在方法比较简单的时候，也可以采用内联的方式。
实例：
HTML：

<div id="divOne">
            <button v-on:click="meth('counter')">点击</button>
            <p>{{counter}}</p>
        </div>

JS：

var app = new Vue({
                            el:"#divOne",
                            data:{
                                counter:0
                            },
                            methods:{
                                meth:function(){
                                     this.counter+=1;
                                }
                            }     
                })

观察可见，我在click中直接把参数给了meth方法，而不是在js部分添加参数。

事件修饰符

来源于Vuejs2.0教程

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

键值修饰符

用来监听键盘事件的。
来源于Vuejs2.0教程

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

实例：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

表单输入绑定

基础用法

最简单的方式就是使用v-model来实现双向绑定。

实例：
HTML：

<div id="app">
            <input v-model="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>
        </div>

JS：

    var app = new Vue({
                el:"#app",
                data:{
                    message:"",
                }
            })

多行文本

方式就是把input换成textarea。

复选框

实例：
HTML：

<div id="app">
            <input type="checkbox" id="football" value="football" v-model="checkFav" />
            <label for="football">football</label>
            <input type="checkbox" id="basketball" value="basketball" v-model="checkFav" />
            <label for="basketball">basketball</label>
            <p>您喜欢的运动是：{{checkFav}}</p>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    checkFav:[],
                }
            })

PS:注意checkFav中，属性是数组的形式，因为多选框其实是插入的含义。
在label标签中，用for来绑定表单。
如果单是复选框，呈现的是逻辑值。

单选框

单选框与复选框的操作类似。

实例：
HTML：

<div id="app">
            <input type="radio" id="man" value="man" v-model="checkSex" />
            <label for="man">man</label>
            <input type="radio" id="woman" value="woman" v-model="checkSex" />
            <label for="woman">woman</label>
            <p>您的性别是：{{checkSex}}</p>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    checkSex:"",
                }
            })

选择列表

单选实例：
HTML：

<div id="app">
            <select v-model="selectCh">
                <option disabled="true" value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span> 您的选择是：{{selectCh}}</span>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    selectCh:"",
                }
            })

多选实例：
HTML：

<div id="app">
            <select v-model="selectCh" multiple="">
                <option disabled="true" value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span> 您的选择是：{{selectCh}}</span>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    selectCh:[],
                }
            })

PS:在单选列表的基础上，将select设置为Multiple（多选）。并且设置双向绑定为数组的形式。
但是并没有发现单选和多选的显示上有什么区别（求大神赐教！）

动态绑定

实例：
HTML：

<div id="app">
            <select v-model="selectCh">
                <option v-for="option in options" v-bind:value="option.value">
                    {{option.tex}}
                </option>

            </select>
            <span> 您的选择是：{{selectCh}}</span>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    selectCh:"A",
                    options:[
                        {tex:"A",value:"A"},
                        {tex:"B",value:"B"},
                        {tex:"C",value:"C"}
                    ]
                }
            })

绑定value

我们知道单选，复选和列表默认是布尔值，但有时候我么不想绑定的是布尔值，那么就可以使用绑定value的方式进行修改。

来自vuejs教程的实例：
HTML：

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

JS：

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

修饰符

.lazy

我们知道默认的情况下，输入框和数据是绑定同步更新的。但是使用了lazy后，可以在点击确定按钮，或者按下enter键后才更新。

实例：
HTML：

<div id="app">
            <input v-model.lazy="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>
        </div>

JS：

var app = new Vue({
                el:"#app",
                data:{
                    message:"",
                }
            })