主要复习了一些vue相关事件处理，还有数据双向绑定（多选框，复选框等）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>title</title>
</head><body><div id="app"><!-- 事件处理 --><div class="count" style="border: 1px solid red; margin: 20px;padding: 20px;">通过按钮控制，写出一个简易的计数器count: {
{
count}}<button v-on:click="add">+1</button><!-- <button v-on:click="count++">+1</button> 可以直接卸载内部（如果代码量少的话）--><!-- <button @click="add">+1</button>这个是缩写形式 --><button @click="subtraction">-1</button><!--加入参数--><button @click="addnum(2)">+2</button><button @click="addnum(4)">+4</button><br><!-- 事件修饰符 -->vue提供的时间修饰符：<li>.stop</li><li>.prevent</li><li>.capture</li><li>.self</li><li>.once</li><li>.passive</li><!-- 阻止单击事件继续传播 --><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><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 案件修饰符 --><input type="text" @keyup.enter="console.log(inputVal)" v-model="inputVal" placeholder="按回车得到输入的内容">Vue 提供了绝大多数常用的按键码的别名：<li>.enter</li><li>.tab</li><li>.delete (捕获“删除”和“退格”键)</li><li>.esc</li><li>.space</li><li>.up</li><li>.down</li><li>.left</li><li>.right</li></div><!-- v-model绑定选框 --><div style="border: 1px solid red; margin: 20px;padding: 20px;">单个复选框绑定布尔值：<input type="checkbox" id="ckb" v-model="ckbVal"><label for="ckb"> {
{
ckbVal}} </label><br>绑定到data中的值是false或true <br><br><br>多个复选框绑定到同一个数组: <br><input type="checkbox" id="坤坤" v-model="ckbStr" value="坤坤"><label for="坤坤">坤坤</label><input type="checkbox" id="王坚" v-model="ckbStr" value="王坚"><label for="王坚">王坚</label><input type="checkbox" id="飞飞" v-model="ckbStr" value="飞飞"><label for="飞飞">飞飞</label><br>选中的值为：{
{
ckbStr}} <br>需要给input绑定value值，并将model绑定到数组<br><br><br>单选按钮<input type="radio" id="one" value="one" v-model="radioVal"><label for="one">one</label><input type="radio" id="two" value="two" v-model="radioVal"><label for="two">two</label><br> 选中的值为 {
{
radioVal}} <br>需要将 radio的value绑定到同一个data数据上<br><br><br>下拉选择框(select): <br><select v-model="selectVal"><option value="" disabled>请选择</option><option value="坤坤">坤坤</option><option value="飞飞">飞飞</option><option value="王坚">王坚</option></select>选中的内容是: {
{
selectVal}}<br><br>多选框(select): <br><select v-model="selectMVal" multiple><option value="" disabled>请选择</option><option value="坤坤">坤坤</option><option value="飞飞">飞飞</option><option value="王坚">王坚</option></select>选中的内容是: {
{
selectMVal}}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script>var app = new Vue({
el: '#app',methods: {
add: function () {
this.count++},subtraction: function () {
this.count--},addnum(num) {
this.count += num},doThis() {
conosole.log('aaaaa')}},data: {
count: 0,inputVal: '',ckbVal: false,ckbStr: [],radioVal: '',selectVal: "",selectMVal: []},})</script>
</body></html>