Vue 基础（2）

https://cn.vuejs.org/

方法与事件

当方法有参数，但@click指定方法时没有加括号@click="handle"会默认传原生事件对象(object MouseEvent)

<div id="app">
    {{count}}
    <button @click="handle()">加1</button>       <!-- 建议当方法有参数时即使不传参也加上括号 -->
    <button @click="handle(10)">加10</button>    
</div>

<script>
    let app = new Vue({
        el: "#app",
        data: {count: 0}
        methods: {
            hadnle: function(count) {
                count = count || 1;
                this.count += count
            }
        }
    })

</script>

数组更新

涉及数组的操作中，可使用js更改数组的方法：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse
• ...

但其中两种情况下数组变动Vue会检测不到（不会重新渲染）：

1. 改变数组指定项：this.arr[0] = "car"
2. 改变数组长度：this.arr.length = 1

解决方法：

Vue.set(app.arr, 0, "car")      // 改变数组指定项（arr[0]）
app.arr.splice(0)               // 改变数组长度（删除数组所有元素）

数组过滤：

datra: {
    arr: ["book", "pen", "pencil"]
},
computed: {
    matchOO: function() {
        return this.arr.filter(function (value){
            return value.match(/oo/)
        })
    }
}

修饰符

在Vue中传入Event对象用$event

1. stop：定义在内层元素，阻止事件向上冒泡（<button @click.stop='btnClick()'>）
2. prevent：提交事件并阻止页面重载（<form action="" @submit.prevent="handle">...，handle为触发事件执行函数）
3. self：定义在外层元素，只作用在元素本身而非子元素的时候调用（与stop相反，如button的外层div）
4. once：只执行一次的方法（<button @click.once='btnClick()'>）

键盘事件

<input @keyup.13 = "submit">    <!-- 13即enter键，具体查看键盘编码号 -->

其中Vue提供了键盘事件的简写：

1. .enter
2. .tab
3. .delete
4. ...

表单与v-model

输入框和编辑框

1. 使用v­-model指令用于在表单类元素（可以用于input框，以及textarea等）上双向绑定事件；
2. 框内所显示的值只依赖于所绑定的数据，不再关心初始化时插入的value。

<div id="app">
    <button v-on:click="reverse()">reverse</button>
    <input v-model="content">
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            content: "hello World",
        },
        methods: {
            reverse(){
                this.content = this.content.split("").reverse().join("")
            }
        }
    })
</script>

单选按钮

1. 单个单选按钮，直接用v-­bind绑定一个布尔值，用v­model是不可以的；
2. 多个单选按钮组合使用时需要v­-model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意。

<div id="app">
    <input type="radio" value="apple" v-model="checks">apple                     <!-- 多个复选框 -->
    <input type="radio" value="banana" v-model="checks">banana
    <input type="radio" value="orange" v-model="checks">orange
    选中：{{checks}}
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            checks: ""
        }
    })
</script>

复选框

1. 单个复选框，直接用定一个布尔值，可以用v-­model或v-­bind；
2. 多个复选框组合使用时需要v-­model来配合value使用，v­model绑定一个数组；如果绑定的是字符串则会转化为布尔值，与所有绑定的复选框的checked属性相对应。

<div id="app">
    <input type="checkbox" value="apple" v-model="checks">apple                     <!-- 多个复选框 -->
    <input type="checkbox" value="banana" v-model="checks">banana
    <input type="checkbox" value="orange" v-model="checks">orange
    选中：{{checks}}
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            checks: []
        }
    })
</script>

下拉框

1. 单选下拉框，所绑定的value值初始化可以为数组或字符串，有value直接优先匹配一个value值，没有则匹配一个text值；
2. 多选下拉框需要v-­model来配合value使用，v-­model绑定一个数组，与复选框类似。

<input type="text" v-model="value"> {{value}}        

<textarea v-model="msg">xxx</textarea> {{msg}}

<input type="radio" v-bind:checked="singleRadio">                               <!-- 单个单选框：绑定布尔值 -->

<input type="radio" name="checks" v-model="checkName" value="apple"> apple
<input type="radio" name="checks" v-model="checkName" value="orange"> orange    <!-- 多个单选框，使用name关联，通过v-model绑定选中的按钮的value值 -->
<input type="radio" name="checks" v-model="checkName" value="banana"> banana
选中：{{checkName}}

<input type="checkbox" value="apple" v-model="checks">apple                     <!-- 多个复选框 -->
<input type="checkbox" value="banana" v-model="checks">banana
<input type="checkbox" value="orange" v-model="checks">orange
选中：{{checks}}

<select v-model="seleted">
    <option value="apple">apple</option>
    <option value="banaba">banana</option>
    <option value="orange">orange</option>
</select>
选中：{{seleted}}

<select v-model="seleted" multiple>
    <option value="apple">apple</option>
    <option value="banaba">banana</option>
    <option value="orange">orange</option>
</select>
选中：{{selectedmul}}

<script>
    let app = new Vue({
        el: "#app",
        data: {
            value: "Hello World!",
            msg: "Hello",
            singleRadio: true,
            checkName: "apple",
            checks: "xyxyxyx",
            seleted: [],
            selectedmul: []
        }
    })
</script>

总结：

1. 对于单选，初始化最好给定字符串，v-­model此时绑定的是静态字符串或者布尔值；
2. 对于多选，初始化最好给定一个数组。

绑定值

<input type="radio" v-model="picked" v-bind:value="value"> {{picked}}

<input type="checkbox" v-model="toggle", :true-value="value1" :false-value="value2">    <!-- 选中和不选中对应不同的值 -->

{{toggle == value1}}
{{toggle == value2}}

<select v-model="valueSelect" :value="{num: 1}">
    <option value="apple">apple</option>
    <option value="banaba">banana</option>
    <option value="orange">orange</option>
</select>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            picked: true,
            value: "Hello World!",
            toggle: true,
            value1: "选中",
            value2: "不选中",
            valueSelect: {}
        }
    })
</script>