- 使用 `{{ }} / <span v-text="msg"></span>` 綁定數據- `{{ }}` 純文本綁定，單向，隨vm變化而變化- `<span v-once>{{ msg }}</span>` 純文本，單次，不跟隨vm變化- `<span v-html="msg"></span>` 不轉義html標簽，綁定html

- 使用 `v-bind` 指令綁定數據至標簽屬性- `<a v-bind:id="msgId"></a> 簡寫 <a :id="msgId"></a>`

//加減乘除、三元運算、方法調用{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>//錯誤用法<!-- 這是語句，不是表達式 -->{{ var a = 1 }}<!-- 流控制也不會生效，請使用三元表達式 -->{{ if (ok) { return message } }}

- 使用 `|` 對原始值進行處理- 用于屬性綁定與 `{{ }}`- `{{ msg | capitalize }} <a :id="msgId | formatId"></a>`- 可以串聯 `{{ msg | filterA | filterB }}`- 可以接收參數 `{{ msg | filterA(arg1, arg2) }}`

- 帶有 `v-` 前綴的特殊屬性- 當其表達式的值改變時相應地將某些行為應用到 DOM 上- `v-bind/v-for/v-html/v-on/v-if/...`- `v-bind` 縮寫 `<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a><a :href="url" rel="external nofollow" rel="external nofollow" ></a>`- `v-on` 縮寫 `<a v-on:click="doSomething"></a><a @click="doSomething"></a>`

//全局注冊Vue.filters('capitalize',value=>{ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})//局部注冊filters: { capitalize: function (value, arg1) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }}//使用<span>{{msg | capitalize(arg1) }}

//全局注冊// 注冊一個全局自定義指令 v-focusVue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() }})//局部注冊directives: { focus: { // 指令的定義--- }}//使用<input v-focus />

var vm = new Vue({ name:'root', // 數據 data: { a: 1 } / Function, // data類型根實例為Object，組件中為Function props:[]/{}, // 設置父組件傳遞給子組件的數據限制 computed:{}, // 計算屬性 watch:{}, // 監控屬性 methods:{}, // 事件操作 // 資源 directives:{}, // 內部指令 filters:{}, // 內部過濾器 components:{}, // 內部組件 // 生命周期：實例創建 => 編譯掛載 => 組件更新 => 銷毀 beforeCreate(){ console.log('beforeCreate ==> 實例創建') }, created(){ // 可以操作data, 但未生成DOM（未掛載）發起異步請求，初始化組件狀態數據 data console.log('created ==> 實例創建完成，屬性已綁定') }, beforeMount(){ console.log('beforeMount ==> 模板編譯/掛載之前') }, mounted(){ // 已生成DOM到document中，可訪問this.$el屬性 console.log('mounted ==> 模板編譯/掛載之后') }, beforeUpdate(){ console.log('beforeUpdate ==> 組件更新之前') }, updated(){ // 操作DOM $('#box1') console.log('updated ==> 組件更新之后') }, activated(){ // 操作DOM $('#box1') console.log('activated ==> 組件被激活時（for keep-alive組件）') }, deactivated(){ console.log('deactivated ==> 組件被移除時（for keep-alive組件）') }, beforeDestroy(){ // 解除事件綁定，銷毀非Vue組件實例等 如：this.$off('event1') select2.destory() console.log('beforeDestroy ==> 組件銷毀之前') }, destroyed(){ console.log('destroyed ==> 組件銷毀之后') }})

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }})

data: { firstName: 'Foo', lastName: 'Bar'},computed: { fullName: function () { return this.firstName + ' ' + this.lastName }}

computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}

var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 發生改變，這個函數就會運行 question: function (newQuestion) { this.answer = '正在輸入...' this.getAnswer() } }, methods: { // _.debounce 是一個通過 lodash 限制操作頻率的函數。 // 在這個例子中，我們希望限制訪問yesno.wtf/api的頻率 // ajax請求直到用戶輸入完畢才會發出 getAnswer: _.debounce( function () { if (this.question.indexOf('?') === -1) {  this.answer = '需要一個問題標識/'?/''  return } this.answer = '請稍候...' var vm = this axios.get('https://yesno.wtf/api')  .then(function (response) {  vm.answer = _.capitalize(response.data.answer)  })  .catch(function (error) {  vm.answer = 'Error! Could not reach the API. ' + error  }) }, // 這是我們為用戶停止輸入等待的毫秒數 500 ) }})

data:()=>{ return { isActive: true, hasError: false, classObj:{ 'active':true, 'align-left':true, }, activeClass: 'active', errorClass: 'text-danger', styleObj:{ color: 'red', fontSize: '13px' }, activeColor: 'red', fontSize: 30, baseStyles:{color: 'red'}, overridingStyles: { fontSize: '20px'} }}

<div v-bind:class="classObj"></div>//<div class="active align-left"></div><div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>//<div class="static active"></div>

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div v-bind:style="styleObj"></div>// <div style=" color:'red'; fontSize:'13px'; "></div>

<div v-bind:class="[activeClass, errorClass]">// <div class="active text-danger">// 使用三元表達式<div v-bind:class="[isActive ? activeClass : '', errorClass]">// 數組語法中使用對象語法<div v-bind:class="[{ active: isActive }, errorClass]">//綁定style<div v-bind:style="[baseStyles, overridingStyles]">

<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>

<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>

<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>

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"></template>

data: { items: [ {message: 'Foo' }, {message: 'Bar' } ] object: {  firstName: 'John',  lastName: 'Doe',  age: 30 }}

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>

<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>

<div v-for="(value, key) in object"> {{ key }} : {{ value }}</div>

<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index"></my-component>

<li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }}</li>

<ul v-if="shouldRenderTodos"> <li v-for="todo in todos"> {{ todo }} </li></ul>

<div v-for="item in items" :key="item.id"> <!-- 內容 --></div>

data: { numbers: [ 1, 2, 3, 4, 5 ]},computed: { evenNumbers: function () { return this.numbers.filter(function (number) {  return number % 2 === 0 }) }}

<div id="example-3"> <button @click="say('hi')">Say hi</button> <button @click="say('what')">Say what</button></div>new Vue({ el: '#example-3', methods: { say: function (message) {  alert(message) } }})

<button v-on:click="warn('hello', $event)">Submit</button>methods: { warn: function (message, event) { // 現在我們可以訪問原生事件對象 if (event) event.preventDefault() alert(message) }}

<!-- 阻止單擊事件冒泡 --><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><!-- 點擊事件將只會觸發一次 2.1.4--><a v-on:click.once="doThis"></a><!-- 組件中的原生事件 --><my-component @click.native="onClick"></my-component>

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

<!-- 同上 --><input v-on:keyup.enter="submit">

<!-- Alt + C --><input @keyup.alt.67="clear">

<input v-model="something">// 等同于<input v-bind:value="something" v-on:input="something = $event.target.value">

// 文本框<input v-model="message" placeholder="edit me">// 文本域（支持換行）<textarea v-model="message" placeholder="add multiple lines"></textarea>// 復選框// 單選（返回 true/false ）<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>// 多選 （返回一個數組 ['jack', 'john']）<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span>//單選框 （返回選中的值）<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label>// 下拉框// 單選 （返回選中的值）<select v-model="selected"> <option>A</option> <option>B</option> <option>C</option></select>// 多選（返回一個數組 ['A','B']）<select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option></select>

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option></select>

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">// 當選中時vm.toggle === vm.a// 當沒有選中時vm.toggle === vm.b

<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >// 自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值）<input v-model.number="age" type="number">// 過濾用戶輸入的首尾空格<input v-model.trim="msg">

<currency-input v-model="price"></currency-input>Vue.component('currency-input', { template: ' <span>  $  <input  ref="input"  v-bind:value="value"  v-on:input="updateValue($event.target.value)"  > </span> ', props: ['value'], methods: { // 不是直接更新值，而是使用此方法來對輸入值進行格式化和位數限制 updateValue: function (value) {  var formattedValue = value  // 刪除兩側的空格符  .trim()  // 保留 2 小數位  .slice(0, value.indexOf('.') + 3)  // 如果值不統一，手動覆蓋以保持一致  if (formattedValue !== value) {  this.$refs.input.value = formattedValue  }  // 通過 input 事件發出數值  this.$emit('input', Number(formattedValue)) } }})