1 事件监听

1.1 v-on的使用

语法糖：v-on:click可以写成@click

 <div class="app">
     {{num}}
     <button @click="increment">加一</button>
 </div>
 <script src="js/vue.js"></script>
 <script>
     const app = new Vue({
         el: '.app',
         data: {
             num: 1,
         },
         methods: {
             increment() {
                 this.num++;
             },
         },
     });
 </script>

通过v-on监听事件，并指向一个methods中的函数。

1.2 v-on参数

 <button @click="increment">加一</button>

• 如这行代码，指向methods中的函数并没有加()，如果不需要参数，方法的后面可以不添加()
• 括号内无参数时,Vue会把浏览器生成的event事件对象作为参数传入到方法中

<button @click="btn3Click(abc, $event)">按钮3</button>

如果需要同时传入某个参数，同时需要event时，可以通过$event传入。

1.3 v-on修饰符

使用方法：

  <button @click.stop="increment">加一</button>

常用的修饰符：

.stop：阻止事件冒泡，调用

.prevent：阻止默认事件

.enter：监听回车键

.once：该事件只触发一次

2 条件判断

2.1 v-if、v-else-if、v-else、v-show

  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>

v-if后面的条件为false时，对应的元素、标签及其子元素不会渲染。

2.2 v-if和v-show的区别

<h2 v-if="isShow" id="aaa">{{message}}</h2>
<h2 v-show="isShow" id="bbb">{{message}}</h2>

当isShow为true时，两者都会渲染，但是当isShow为false时，v-if所在的标签不会渲染在DOM中，而v-show所在的标签会在DOM中，只是隐藏起来，相当于display：none；

3 循环遍历

3.1 v-for遍历对象

ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

可以得到值、名、索引号

3.2 v-for遍历数组

<ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>

可以得到元素、索引值

3.3 使用v-for时增加key属性

<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
</ul>

key的作用主要是为了高效的更新虚拟DOM

• 不加key时：比如在B和C之间加一个F，Diff算法默认执行起来是把C更新成F，D更新成C，E更新成D，最后再插入E。
• 加入key时，Diff算法就可以正确的识别此节点找到正确的位置区插入新的节点。 注意key绑定元素，而不是索引号

4 案例练习

一个购物车案例，用来练习事件监听和循环遍历。

duheng678.github.io/Vue---demo1…

5 v-model

5.1 用法

<div class="app">
    <h2>{{message}}</h2>
    <input type="text" v-model="message" />
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '.app',
        data: {
            message: '起飞',
        },
    });
</script>

• 在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
• 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。 所以，通过v-model实现了双向的绑定。

5.2 原理

<div class="app">
    <input type="text" v-model="message" />
    <input type="text" :value="message" @input="message = $event.target.value" />
    <h2>{{message}}</h2>
</div>

v-model可以理解为语法糖，等同于v-bind绑定value，然后v-on监听input事件。

5.3 v-model结合radio,checkbox,select使用

v-model结合radio

<div class="app">
    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex" />
        男生
    </label>
    <label for="woman">
        <input type="radio" id="woman" value="女" v-model="sex" />
        女生
    </label>
    <h2>您的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '.app',
        data: {
            sex: '男',
        },
    });
</script>

通过v-model将radio的value值和data中的sex联接在一起，点击男生就会将sex的值改为男，反之为女。

v-model结合checkbox

<div class="app">
    <!-- 1.单选------------------------------------------ -->
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree" />
        同意协议
    </label>
    <h2>同意协议吗：{{isAgree}}</h2>
    <!-- 2.多选------------------------------------------------ -->
    <label v-for="item in balls" :for="item">
        <input type="checkbox" :id="item" :value="item" v-model="hobbies" />
        {{item}}
    </label>
    <h2>你的爱好是{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '.app',
        data: {
            isAgree: true,
            hobbies: [],
            balls: ['篮球', '足球', '棒球', '橄榄球', '网球'],
        },
    });
</script>

v-model结合select

<div class="app">
    <!-- 1.单选----------------------------------------------------- -->
    <select name="" id="" v-model="ball">
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="棒球">棒球</option>
        <option value="网球">网球</option>
    </select>
    <h2>选择{{ball}}</h2>
    <!-- 2.单选----------------------------------------------------- -->
    <select name="" id="" v-model="balls" multiple>
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="棒球">棒球</option>
        <option value="网球">网球</option>
    </select>
    <h2>选择{{balls}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '.app',
        data: { ball: '篮球', balls: '' },
    });
</script>

5.4 修饰符

• lazy:按下enter或者失去焦点时才会改变
• number: 默认情况下，v-model赋值的都是string类型,加上.number会把它转为Number
• trim:去除输入的两边空格，换行符等等