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键

<div id="example">
  <h2>1. 绑定监听</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>
  <h2>2. 事件修饰符</h2>
  <a href="http://www.baidu.com" @click.prevent="test4">百度一</a>
  <div style="width: 200px;height: 200px;background: red" @click="test5">
    <div style="width: 100px;height: 100px;background: blue" @click.stop="test6">
    </div>
  </div>
  <h2>3. 按键修饰符</h2>
  <input type="text" @keyup.13="test7">
  <input type="text" @keyup.enter="test7">
</div>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {},
    methods: {
      test1(event) {
        alert(event.target.innerHTML)
      },
      test2 (msg) {
        alert(msg)
      },
      test3 (msg, event) {
        alert(msg+'---'+event.target.textContent)
      },
      test4 () {
        alert('点击了链接')
      },
      test5 () {
        alert('out')
      },
      test6 () {
        alert('inner')
      },
      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }
    }
  })
</script>

<div id="app">
<h2>双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.topperCase()}}</p>
<p v-text="msg"></p>   <!-- 如textContent-->
<p v-html="msg"></p>  <!-- 如innerHtml-->
<h2>一、强制数据绑定</h2>
<a href="url">访问指定站点1</a> <!-- 错误写法 -->
<a v-bind:href="url">访问指定站点2</a>
<a :href="url">访问指定站点3</a>
<img v-bind:src="imgUrl">
<img :src="imgUrl">

<h2>二、强制事件监听</h2>
<button v-on:click="clickButton">点击1</button>
<button @:click="clickButton2(msg)">点击2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>

<script>
var vm = new vue({  
     el: '#app', 
     data: { 
              msg: 'game over',
              url: 'http://www.baidu.com'，
               imgUrl:'https://cn.vuejs.org/images/logo.png'
       },
      method: {
          clickButton() {
            alert('点击了')；
           },
          clickButton2(content) {
            alert(content)；
        }
     }
})

二、计算属性和监视

<!--1.计算属性
在computed 属性对象中定义计算属性的方法 ，在页面中使用{方法名}显示计算结果
2 监视属性
通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 通过回调函数：getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算
-->
<div id="demo">
    姓：<input type="text" placeholder="姓氏" v-model="firstName">
    <br />
    名：<input type="text" placeholder="名字" v-model="secondName">
    <br />
    姓名1（单向）<input type="text" placeholder="姓名" v-model="fullName1">
    <br />
    姓名2（单向）<input type="text" placeholder="姓名" v-model="fullName2">
    <br />
    姓名3（双向）<input type="text" placeholder="姓名" v-model="fullName3">
</div>
<script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'a',
            secondName: 'b',
            fullName2: 'ab',
        },
        computed: {
            // 什么时候执行：初始化显示/相关的data属性数据发生改变时
            // 计算并返回当前属性的值
            fullName1: function () { //方式一：拼接姓名，是计算属性中的一个方法 ，计算返回值作为属性值
                return this.firstName + ' ' + this.secondName;
            },
            fullName3: {
                // 回调函数： 计算并返回当前属性的值
                // 回调函数是自己定义的，自己未调用，但执行了；注意：什么时候调用？用来做什么？
                // 当需要读取当前属性值时回调，
                get() {
                    return this.firstName + ' ' + this.secondName;
                },
                // 当属性值发生改变时，回调
                set(value) {
                    const  names = value.split(' ');
                    this.firstName = names[0];
                    this.secondName = names[1];
                }
            }
        },
        watch: {
            // 监视secondName
            secondName: function (value) {
                this.fullName2 = this.firstName + ' ' + value;
            }
        }
    });
    vm.$watch('secondName', function (value) {
        this.fullName2 = this.firstName() + ' ' + value;
    });
</script>