一焦蘑、模塊

1拾给、定義

• 1.動態(tài)的 html 頁面
  2.包含了一些 JS 語法代碼
  ???a. 雙大括號表達式
  ???b. 指令(以 v-開頭的自定義標簽屬性)

a.雙大括號表達式

• 語法: {{exp}}
• 功能: 向頁面輸出數(shù)據
• 可以調用對象的方法

2.指令一：強制數(shù)據綁定：

• 功能: 指定變化的屬性值
• 完整寫法: v-bind:xxx='yyy' //yyy 會作為表達式解析執(zhí)行
• 簡潔寫法: :xxx='yyy'

3.指令二：綁定事件監(jiān)聽：

• 功能: 綁定指定事件名的回調函數(shù)
• 完整寫法:
  v-on:keyup='xxx' v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'
• 簡潔寫法: @keyup='xxx'
  @keyup.enter='xxx'
  @click="test"
• 綁定事件test未指定參數(shù)時抽减，默認傳$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. 綁定監(jiān)聽</h2>
  <button @click="test1">test1</button>
  <button @click="test2('abc')">test2</button>
  <button @click="test3('abcd', $event)">test3</button>
  <h2>2. 事件修飾符</h2>
  <a  @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>一昧廷、強制數(shù)據綁定</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>二、強制事件監(jiān)聽</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)；
        }
     }
})

二淹办、計算屬性和監(jiān)視

<!--1.計算屬性
在computed 屬性對象中定義計算屬性的方法 眉枕，在頁面中使用{方法名}顯示計算結果
2 監(jiān)視屬性
通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性
當屬性變化時, 回調函數(shù)自動調用, 在函數(shù)內部進行計算
3. 通過回調函數(shù)：getter/setter 實現(xiàn)對屬性數(shù)據的顯示和監(jiān)視
計算屬性存在緩存, 多次讀取只執(zhí)行一次 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: {
            // 什么時候執(zhí)行：初始化顯示/相關的data屬性數(shù)據發(fā)生改變時
            // 計算并返回當前屬性的值
            fullName1: function () { //方式一：拼接姓名，是計算屬性中的一個方法 怜森，計算返回值作為屬性值
                return this.firstName + ' ' + this.secondName;
            },
            fullName3: {
                // 回調函數(shù)： 計算并返回當前屬性的值
                // 回調函數(shù)是自己定義的速挑，自己未調用，但執(zhí)行了副硅；注意：什么時候調用姥宝？用來做什么？
                // 當需要讀取當前屬性值時回調恐疲，
                get() {
                    return this.firstName + ' ' + this.secondName;
                },
                // 當屬性值發(fā)生改變時腊满，回調
                set(value) {
                    const  names = value.split(' ');
                    this.firstName = names[0];
                    this.secondName = names[1];
                }
            }
        },
        watch: {
            // 監(jiān)視secondName
            secondName: function (value) {
                this.fullName2 = this.firstName + ' ' + value;
            }
        }
    });
    vm.$watch('secondName', function (value) {
        this.fullName2 = this.firstName() + ' ' + value;
    });
</script>