vue入门2----vue事件监听、计算属性和监视watch

一、模块

1、定义

• 1.动态的 html 页面
  2.包含了一些 JS 语法代码
     a. 双大括号表达式
     b. 指令(以 v-开头的自定义标签属性)

a.双大括号表达式

• 语法: {{exp}}
• 功能: 向页面输出数据
• 可以调用对象的方法

2.指令一：强制数据绑定：

• 功能: 指定变化的属性值
• 完整写法: v-bind:xxx='yyy' //yyy 会作为表达式解析执行
• 简洁写法: :xxx='yyy'

3.指令二：绑定事件监听：

• 功能: 绑定指定事件名的回调函数
• 完整写法:
  v-on:keyup='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
• 简洁写法: @keyup='xxx'
  @keyup.enter='xxx'
  @click="test"
• 绑定事件test未指定参数时，默认传$event,代表事件对象，event.target.innerHTML
• 事件修饰符
  .prevent : 阻止事件的默认行为 event.preventDefault()，比如a标签的href和 a中click事件
  .stop : 停止事件冒泡 event.stopPropagation()
• 按键修饰符
  .keycode : 操作的是某个键的keycode值，如@keyup.13 等于@keyup.enter
  .enter : 操作的是enter键

  
1. 绑定监听
  test1
  test2
  test3
  
2. 事件修饰符
  百度一
  

    

    
  
  
3. 按键修饰符
  
  

双大括号表达式
{{msg}}
{{msg.topperCase()}}
   
  
一、强制数据绑定
访问指定站点1 
访问指定站点2
访问指定站点3



二、强制事件监听
点击1
点击2