Vue.js記法:v-modelによるinputのI/Oバインド

Input TextBox

<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

Multiple Textarea

<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea>

CheckBox
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <div id='example-3'> <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> </div> new Vue({ el: '#example-3', data: { checkedNames: [] } }) Radio <div id="example-4"> <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> <br> <span>Picked: {{ picked }}</span> </div>
new Vue({ el: '#example-4', data: { picked: '' } })


Select
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
new Vue({ el: '...', data: { selected: '' } })

Multiple Selected
new Vue({ el: '#example-6', data: { selected: [] } }) Select By v-for <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span>
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } })

Data Bind

<input type="radio" v-model="pick" v-bind:value="a">
//on selected vm.pick === vm.a <select v-model="selected"> <option v-bind:value="{ number: 123 }">123</option> </select> //on selected
typeof vm.selected // => 'object' vm.selected.number // => 123

.lazy DataBind
//onChange, not onKeyDown
<input v-model.lazy="msg" >

.number DataBind
//convert value to float number. on parseFloat error, return oldvalue.
<input v-model.number="age" type="number">

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

Vue.js記法：event関連

event処理関数１：（パラメータ）

<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div>

new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } })

event処理関数２：（パラメータ、イベント）

<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>

// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } }

イベント修飾子

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 --> <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> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，
同时浏览器可能会向你展示一个警告。
请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

KeyDown event処理

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

<input v-on:keyup.page-down="onPageDown"> //keyNameを利用

<input v-on:keyup.13="submit">　//KeyCodeおすすめしない。古い書き方

• .enter
• .tab
• .delete (delete and backspace)
• .esc
• .space
• .up
• .down
• .left
• .right
グローバルキーコード宣言： config.keyCodes

　　Vue.config.keyCodes.f1 = 112

システムキー

• .ctrl
• .alt
• .shift
• .meta

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

ctrキーとctr+shiftキーの区別

<button @click.ctrl="onClick">A</button> //ctr+shift同時押下も有効

<button @click.ctrl.exact="onCtrlClick">A</button>　// ctr+shift同時押下無効

<button @click.exact="onClick">A</button>//どのシステムキーも押下されずの場合、

マウスevent

• .left
• .right
• .middle

Vue.js記法:v-forの追記

v-forに固定数値の利用

<div> <span v-for="n in 10">{{ n }} </span> </div>

v-forに関数の利用

<li v-for="n in even(numbers)">{{ n }}</li>

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

 <template>にv-for

<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>

Vue.js記法:配列の処理

配列に監視しているメソッド

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

新配列を作る

• filter()
• concat() 
• slice()

配列を監視できない処理

• vm.items[indexOfItem] = newValue
  監視方法：Vue.set(vm.items, indexOfItem, newValue)
• vm.items.length = newLength
  監視方法：vm.items.splice(newLength)

VUEに後追加した属性Vue.set(object, propertyName, value)

var vm = new Vue({

data: { userProfile: { name: 'Anika' } } })

Vue.set(vm.userProfile, 'age', 27) //方法１ vm.$set(vm.userProfile, 'age', 27) //方法２　
//方法３：オブジェクト属性の追加
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })