Vue instruction

V-text and V-HTML compare to innerHTML and innerText

You want to insert text into the DOM, or if you don’t assign it, you get the value of the node.

V-html can render with tags, but V-text can’t.

V-bind – short: One-way pass supports a lot.

V-model two-way data binding supports only form elements

V-on binding event abbreviation @

Event modifier

@click.stop=”del(tiem.id)” supports chain operations

.stop prevents bubbling

. Prevent Prevents default events

.capture Uses event capture mode when adding event listeners

.self fires the callback only if the event fires on the element itself (such as when it is not a child element)

The. Once event is triggered only once.

<! - click event will only trigger a - > < v - on a: click once = "doThis" > < / a >Copy the code

Customize the alias of the key modifier with vue.config.keycodes. name = key value.

Key modifier

<! Call 'vm.submit()' only if 'key' is' Enter '--> <input V-on :keyup. Enter ="submit">Copy the code

Keymodifier aliases can be customized using the global config.keyCodes object:

// You can use 'V-on :keyup.f1' vue.config.keycodes.f1 = 112Copy the code

You can use the following modifier to implement a listener that fires a mouse or keyboard event only when the corresponding key is pressed

.ctrl  .alt  .shift  .meta

<! -- Alt + C --> <input v-on:keyup.alt.67="clear"> <! -- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div>Copy the code

Mouse button modifier 2.2.0 is added

.left    .right   .middle

These modifiers restrict the handler to responding only to a particular mouse button.

The. Exact modifier allows you to control events triggered by the exact combination of system modifiers.

<! <button V-on :click.ctrl.exact="onCtrlClick">A</button> <! <button V-on :click. CTRL ="onClick">A</button>Copy the code

Styles in VUE

:class=”[]” {}

Style =”{color:’red’}”

Binding style

123

V – and for the key

This is the {{I}} p tag. If you don’t write key, you’ll get a yellow warning.

V - for = "item in the items"Copy the code

{{item}} will loop out all the values in the key/value pair

In the V-for block, we can access all of the parent scope’s properties. V-for also supports an optional second parameter, the index of the current item.

Items: [{message: 'Foo'}, {message: 'Bar'}]Copy the code

You can also iterate over an object’s property with v-for.

v-for="(value, name, index) in object" object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10'}Copy the code

Do not use non-primitive values such as objects or arrays as v-for keys. Use a string or numeric value.

 在