vue.js常用語法-有解無憂

（注：此筆記較長，提取了vue常用的語法功能，作為工具可搜索關鍵字查看）

1、文本：使用 {{...}}（雙大括號）的文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

2、html

　　使用v-html指令輸出html的值

3、屬性：屬性的值使用 v-bind ,可系結樣式等

　　以下實體判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：

 <div v-bind:>
    v-bind:class 指令
  </div>

4、運算式：支持js

5、指令：帶有 v- 前綴的特殊屬性，

用于在運算式的值改變時，將某些行為應用到 DOM 上，例子， v-if 指令將根據運算式 seen 的值(true 或 false )來決定是否插入 p 元素，

<div id="app">
    <p v-if="seen">現在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

6、引數：在指令后用冒號指明

　　系結：

<div id="app">
    <pre><a v-bind:href="https://www.cnblogs.com/icemargin/p/url">菜鳥教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

　　監聽:

<a v-on:click="doSomething">

7、修飾符

修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式系結，例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件呼叫 event.preventDefault()：

8、用戶輸入

　v-model實作雙向系結，在 input、select、textarea、checkbox、radio 等表單控制元件元素自動更新系結的元素的值，

9、按鈕的事件可以使用 v-on 監聽事件

10、過濾器

<!-- 在兩個大括號中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

　　過濾器可以串聯：

{{ message | filterA | filterB }}

　　過濾器是 JavaScript 函式，因此可以接受引數：

{{ message | filterA('arg1', arg2) }}

11、縮寫

　　Vue.js 為兩個最為常用的指令提供了特別的縮寫

　　v-bind

<!-- 完整語法 -->
<a v-bind:href="https://www.cnblogs.com/icemargin/p/url"></a>
<!-- 縮寫 -->
<a :href="https://www.cnblogs.com/icemargin/p/url"></a>

　　v-on

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

12、條件判斷

　　v-if

　　v-else

　　v-else-if

　　v-show

<div id="app">
<h1 v-show="ok">Hello!</h1>
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>

13、回圈陳述句

　　v-for：需要用site in sites 的特殊語法

　　v-for使用方式一

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

　　輸出結果：

　　v-for使用方式二：通過模板使用

<ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>

　　輸出結果：

　　v-for使用方式三：通過物件屬性使用

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鳥教程',
      url: 'http://www.runoob.com',
      slogan: '學的不僅是技術，更是夢想！'
    }
  }
})
</script>

　　輸出結果：

　　多個引數

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

　　輸出結果：

　　v-for使用方式四：迭代整數

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

　　輸出結果：

14、反轉字串：message.split('').reverse().join('')

<div id="app">
  <p>原始字串: {{ message }}</p>
  <p>計算后反轉字串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實體
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

　　輸出結果：

　　（此處message更新，reversedMessage也會同步更新）

　　另一種寫法

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

15、computed 的getter和setter方法：computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 呼叫 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '菜鳥教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

16、監聽屬性：watch 會監聽自身變化的值，實時改變

<div id = "app">
    <p style = "font-size:25px;">計數器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">點我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('計數器值的變化 :' + oval + ' 變為 ' + nval + '!');
});
</script>

　輸出效果：每點擊一次按鈕，資料+1，watch會自動監控值的變化并同步做出反應

　watch的第二個案例，米與千米

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
    var vm = new Vue({
    el: '#computed_props',
    data: {
        kilometers : 0,
        meters:0
    },
    methods: {
    },
    computed :{
    },
    watch : {
        kilometers:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 1000
        },
        meters : function (val) {
            this.kilometers = val/ 1000;
            this.meters = val;
        }
    }
    });
    // $watch 是一個實體方法
    vm.$watch('kilometers', function (newValue, oldValue) {
    // 這個回呼將在 vm.kilometers 改變后呼叫
    document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "，修改后值為: " + newValue;
})
</script>

　　輸出效果：

　　改為10：

17、v-bind 系結樣式有幾種方式總結：

　　1）系結樣式名class顯示與否控制，可用多個屬性來動態顯示

　　2）系結class為資料里的一個物件的方式

　　3）還可以系結回傳物件的屬性

　　4）可以把陣列傳給class

　　5）可以用三元運算式來切換class

　　6）可以直接在v-bind：style直接設定樣式

　　7）可以直接系結一個樣式物件

　　8）可以同時系結多個樣式物件

　　此段于https://www.runoob.com/vue2/vue-class-style.html

18、v-on:事件監聽

　　事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再多載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回呼 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能點擊一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

　　按鍵修飾符

　　Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">

　　記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

　全部的按鍵別名：

.enter
.tab
.delete (捕獲 "洗掉" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

　　實體

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

19、關于表單的雙向資料系結：v-model

　　input和textarea 元素的資料系結

<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="編輯我……">
  <p>訊息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本輸入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鳥教程\r\nhttp://www.runoob.com'
  }
})
</script>

　　輸出效果：改變文本框內容，顯示資訊同步改變

　　復選框的資料雙向系結

　　復選框如果是一個為邏輯值，如果是多個則系結到同一個陣列：

<div id="app">
  <p>單個復選框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多個復選框：</p>
  <input type="checkbox" id="runoob" value="https://www.cnblogs.com/icemargin/p/Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="https://www.cnblogs.com/icemargin/p/Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="https://www.cnblogs.com/icemargin/p/Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>選擇的值為: {{ checkedNames }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

　　效果：

選中前選中后

　　單選框的資料系結

<div id="app">
  <input type="radio" id="runoob" value="https://www.cnblogs.com/icemargin/p/Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="https://www.cnblogs.com/icemargin/p/Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>選中值為: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})
</script>

　　效果：

選中第一個選中第二個

　　select串列資料系結

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">選擇一個網站</option>
    <option value="https://www.cnblogs.com/icemargin/p/www.runoob.com">Runoob</option>
    <option value="https://www.cnblogs.com/icemargin/p/www.google.com">Google</option>
  </select>
 
  <div id="output">
      選擇的網站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

　　效果：

20、v-model的修飾符

　　.lazy: 轉變為change事件中同步

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

　　.number

　　如果想自動將用戶的輸入值轉為 Number 型別（如果原值的轉換結果為 NaN 則回傳原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

<input v-model.number="age" type="number">

　　.trim

　　自動過濾首尾空格

<input v-model.trim="msg">

21、組件

　　組件component是vue.js最強大的功能，幾乎所有頁面都可以用獨立復用組件來組成

　　注冊全域組件的語法，tagName 為組件名，options 為配置選項

Vue.component(tagName, options)

　　呼叫方式

<tagName></tagName>

　　全域組件實體

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注冊
Vue.component('runoob', {
  template: '<h1>自定義組件!</h1>'
})
// 創建根實體
new Vue({
  el: '#app'
})
</script>

　　區域組件，只能在當前實體使用

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定義組件!</h1>'
}
 
// 創建根實體
new Vue({
  el: '#app',
  components: {
    // <runoob> 將只在父模板可用
    'runoob': Child
  }
})
</script>

　　組件的屬性prop，作業是接收父組件傳輸的資料，需要顯式宣告

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注冊
Vue.component('child', {
  // 宣告 props
  props: ['message'],
  // 同樣也可以在 vm 實體中像 "this.message" 這樣使用
  template: '<span>{{ message }}</span>'
})
// 創建根實體
new Vue({
  el: '#app'
})
</script>

　　動態prop：通過v-bind 實作動態效果

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>
 
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>

　　注意: prop 是單向系結的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來，

　　prop驗證

Vue.component('my-component', {
  props: {
    // 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證)
    propA: Number,
    // 多個可能的型別
    propB: [String, Number],
    // 必填的字串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的物件
    propE: {
      type: Object,
      // 物件或陣列默認值必須從一個工廠函式獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函式
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

　　當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制臺的警告，

　　type 可以是下面原生構造器：

String
Number
Boolean
Array
Object
Date
Function
Symbol

　　type 也可以是一個自定義構造器，使用 instanceof 檢測，

　　prop的自定義事件

　　父組件是使用 props 傳遞資料給子組件，但如果子組件要把資料傳遞回去，就需要使用自定義事件！

　　使用v-on

使用 $on(eventName) 監聽事件
使用 $emit(eventName) 觸發事件

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
</script>

　　如果你想在某個組件的根元素上監聽一個原生事件，可以使用 .native 修飾 v-on

<my-component v-on:click.native="doTheThing"></my-component>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143534.html

標籤：JavaScript

上一篇：Node.js 路由

下一篇：elementUI中el-table表格自定義表頭