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 会检测不到（不会重新渲染）：
- 改变数组指定项：
this.arr[0] = "car" - 改变数组长度：
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
- stop：定义在内层元素，阻止事件向上冒泡（
<button @click.stop='btnClick()'>） - prevent：提交事件并阻止页面重载（
<form action="" @submit.prevent="handle">...，handle 为触发事件执行函数） - self：定义在外层元素，只作用在元素本身而非子元素的时候调用（与 stop 相反，如 button 的外层 div）
- once：只执行一次的方法（
<button @click.once='btnClick()'>）
键盘事件
<input @keyup.13 = "submit"> <!-- 13即enter键，具体查看键盘编码号 -->
其中Vue提供了键盘事件的简写：
- .enter
- .tab
- .delete
- ...
表单与 v-model
输入框和编辑框
- 使用
v-model指令用于在表单类元素（可以用于 input 框，以及 textarea 等）上双向绑定事件； - 框内所显示的值只依赖于所绑定的数据，不再关心初始化时插入的 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>
单选按钮
- 单个单选按钮，直接用
v-bind绑定一个布尔值，用v-model是不可以的； - 多个单选按钮组合使用时需要
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>
复选框
- 单个复选框，直接用定一个布尔值，可以用
v-model或v-bind； - 多个复选框组合使用时需要
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>
下拉框
- 单选下拉框，所绑定的
value值初始化可以为数组或字符串，有value直接优先匹配一个value值，没有则匹配一个text值； - 多选下拉框需要
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>
总结：
- 对于单选，初始化最好给定字符串，
v-model此时绑定的是静态字符串或者布尔值； - 对于多选，初始化最好给定一个数组。
绑定值
<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>
