二、事件处理

2.1绑定监听

1.v-on:xxx="fun"

2.@xxx="fun"

3.@xxx="fun(参数)"

4.默认事件形参:event

5.隐含属性对象:$event

2.2事件修饰符

1..prevent:阻止事件的默认行为event.preventDefault()

2..stop:停止事件冒泡event.stopPropagation()

2.3按键修饰符

1.keycode:操作的是某个keycode值的键

2..keyName:操作的某个按键名的键(少部分)

三、计算属性与监视

3.1计算属性-computed

1.要显示的数据不存在，要通过计算得来。

2.在computed对象中定义计算属性。

3.在页面中使用{{方法名}}来显示计算的结果。

3.2监视属性-watch

1.通过通过vm对象的$watch()或watch配置来监视指定的属性

2.当属性变化时,回调函数自动调用,在函数内部进行计算

四、条件渲染指令v-if与v-show

1.如果需要频繁切换v-show较好

2.当条件不成立时,v-if的所有子节点不会解析(项目中使用)

实例分析：

代码：

    <body>
        <div id="root">
            

            <h2 >当前的n值是:{{n}}</h2>
            <button @click="n++">点我n+1</button>

            <div v-show="n===1">Angular</div>
            <div v-if="n===2">react</div>
            <!-- 后面可以有elseif但给别的div打断即不奏效 -->
            <!-- <div>@</div> -->
            <div v-else-if="n===3">Vue</div>
            <div v-else>haha</div><br><br><br>

            <template v-if="n===1">
                <h2>h</h2>
                <h2>h</h2>
                <h2>h</h2>
            </template>
        </div>

       
    </body>

代码解释：主要功能是有个按钮当按下时n值会发生变化，当n值=1，2，3时，v-if和v-show监测到n值发生变化时会对应显示对应的符号，注意后面的语句可以有elseif但给别的div打断即不奏效！

效果：

学习Vue核心语法 | 青训营笔记

一、数据绑定

1.1单向数据绑定

1.2双向数据绑定

重点：MVVM模型