澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

vue.js小总括

Vue.js 的主干是四个同意采用简单的沙盘语法来证明式地将数据渲染进 DOM 的系统;

一.插值

 

v-once

透过动用 v-once 指令,你也能进行一回性地插值,当数码变动时,插值处的内容不会更新。但请小心这会影响到该节点上有着的数据绑定:

span v-once>这个将不会改变: {{ msg }}

命令带有前缀 v-,以象征它们是 Vue 提供的优良性状;

v-html

双大括号会将数听别人声明为不足为道文书,而非 HTML 代码。为了输出真正的 HTML,你要求选用 v-html 指令:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: </p>

那个 span 的从头到尾的经过将会被更换来为属性值 rawHtml,直接当作HTML——会忽视深入解析属性值中的数据绑定。

您的站点上动态渲染的自便 HTML 恐怕会非常危殆,因为它非常轻便引致 XSS攻击。请只对可信内容使用 HTML 插值,绝不要对客户提供的内容使用插值。

 

使用 JavaScript 表达式

Vue.js 都提供了一心的 JavaScript 表明式帮忙。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

 这几个表明式会在所属 Vue 实例的多少作用域下作为 JavaScript 被深入分析。有个限定正是,种种绑定都只能分包单个表达式,所以上边包车型大巴例证都不会生效

<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

v-for 指令能够绑定数组的多少来渲染四个项目列表;

二.v-bind与v-on的缩写

 

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="isButtonDisabled">Button</button>

<!-- 缩写 -->
<button :disabled="isButtonDisabled">Button</button>

说明下:如果isButtonDisabled的值是 nullundefinedfalse,则 disabled 性情以致不会被含有在渲染出来的 <button> 元素中。

为了让客户和你的使用进行相互影响,大家可以用 v-on 指令增加四个平地风波监听器,通过它调用在 Vue 实例中定义的主意;

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

 

三.规格渲染

Vue 还提供了 v-model 指令,它能轻轻便松达成表单输入和采用状态之间的双向绑定。

v-if

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

 

在 <template> 成分上接收 v-if

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

能够动用 v-bind 指令将待办项传到循环输出的各样组件中;

v-else

你能够行使 v-else 指令来表示 v-if 的“else 块”:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 成分必得紧跟在带 v-if 也许 v-else-if 的因素的后面,不然它将不会被识别。

 

v-else-if

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

一个 Vue 应用由四个通过 new Vue 创制的根 Vue 实例,以致可选的嵌套的、可复用的组件树组成。

用 key 管理可复用的成分

Vue 会尽可能赶快地渲染成分,平日会复用原来就有成分实际不是从头最初渲染。这么做除了使 Vue 变得要命快之外,还会有此外一些功利。比如,即使你允许顾客在不一样的登入格局之间切换:

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

那就是说在上面的代码中切换 loginType将不会免去顾客已经输入的内容。因为三个模板使用了平等的元素,<input> 不会被轮流掉——仅仅是替换了它的placeholder

如此也不总是适合实际须求,所以 Vue 为你提供了朝气蓬勃种办法来注解“这两个元素是完全独立的,不要复用它们”。只需增多二个兼有唯风流浪漫值的 key 属性就能够:

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

现行反革命,每一回切换时,输入框都将被重新渲染。注意,<label> 成分照旧会被急迅地复用,因为它们从不增加key 属性。

 

v-show

<h1 v-show="ok">Hello!</h1>

今非昔比的是带有 v-show的因素始终会被渲染并保留在 DOM 中。v-show只是简短地切换来分的 CSS 属性display

专一,v-show 不帮衬 <template> 成分,也不援助 v-else。

除开数量属性,Vue 实例还暴光了一些卓有作用的实例属性与方法。它们都有前缀 $,以便与客商定义的性情区分开来。

v-if vs v-show

诚如的话,v-if 有越来越高的切换费用,而v-show有更加高的上马渲染费用。由此,假设急需特别频繁地切换,则接收v-show 较好;如若在运作时规格相当少改动,则选用 v-if 较好。

 

v-if 与 v-for 一同行使

v-ifv-for 一齐行使时,v-for 具有比 v-if 更高的优先级

诚如的话,v-if 有更加高的切换花费,而 v-show 有越来越高的发端渲染费用。因而,若是急需相当频仍地切换,则应用 v-show 较好;假使在运维时规格少之又少改造,则选取 v-if 较好。

四.列表渲染v-for

 

八个数组的v-for

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

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 块中,大家具有对父功用域属性的通通访问权限。v-for还帮衬三个可选的第叁个参数为当下项的目录。

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

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

结果:

Parent - 0 - Foo
Parent - 1 - Bar

你也足以用 of 替代 in 作为分隔符,因为它是最临近 JavaScript 迭代器的语法:

<div v-for="item of items"></div>

当 v-if 与 v-for 一同使用时,v-for 具备比 v-if 更加高的先行级。

五个对象的 v-for

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

结果:

John
Doe
30

你也可以提供第3个的参数为键名:

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

结果:

firstName: John
lastName: Doe
age: 30

其四个参数为索引:

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

在遍历对象时,是按 Object.keys(卡塔尔(英语:State of Qatar)的结果遍历,可是不可能承保它的结果在不相同的 JavaScript 引擎下是相近的。

 

key

为了给 Vue 三个提醒,以便它能跟踪每个节点的身价,进而重用和另行排序现存成分,你需求为每项提供三个唯意气风发key 属性。理想的 key 值是每项都有的且唯后生可畏的 id。

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

建议尽量在选拔 v-for 时提供 key,除非遍历输出的 DOM 内容特别简单,可能是特意重视暗中同意行为以获得品质上的进级。

<div v-for="item in items" :key="item.id">

数组更新检查实验

  <!-- 内容 -->

形成方法与替换数组

Vue.js 包装了被旁观数组的变异方法,故它们能触发视图更新。被包裹的章程有:push(卡塔尔(قطر‎, pop(卡塔尔(英语:State of Qatar), shift(卡塔尔(قطر‎, unshift(卡塔尔(英语:State of Qatar), splice(卡塔尔, sort(卡塔尔(قطر‎, reverse(卡塔尔(قطر‎

你展开调节台,然后用后边例子的 items 数组调用多变方法:example1.items.push({ message: 'Baz' })

变异方法 (mutation method卡塔尔(قطر‎,一概而论,会变动被这么些主意调用的原始数组。相比之下,也是有非变异 (non-mutating method卡塔尔 方法,举例:filter(), concat()slice()。那个不会修改原始数组,但三番两次返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

</div>

注意事项

出于 JavaScript 的约束,Vue 不可能检查测量试验以下改动的数组:

  • 当你使用索引直接设置三个项时,比方:vm.items[indexOfItem] = newValue
  • 当您改改数组的长短时,举例:vm.items.length = newLength

为了然决第大器晚成类标题,以下三种办法都足以兑现和 vm.items[indexOfItem] = newValue 相同的功能,同期也将触发状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了减轻第二类主题素材,你能够应用 splice:

example1.items.splice(newLength)

提出尽量在采用 v-for 时提供 key,除非遍历输出的 DOM 内容很简单,或许是特意正视默许行为以获取质量上的晋级换代。

对象改良质量评定注意事项

要么出于 JavaScript 的范围,Vue 不可能检查测验对象属性的充裕或删除:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

对于已经创设的实例,Vue 不可能动态加多根级其余响应式属性。可是,能够动用 Vue.set(object, key, value)艺术向嵌套对象加多响应式属性。比如,对于:

ar vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

您能够拉长三个新的age属性到嵌套的userProfile对象:

Vue.set(vm.userProfile, 'age', 27)

你还足以采用 vm.$set 实例方法,它只是大局Vue.set 的别名:

vm.$set(this.userProfile, 'age', 27)

临时你只怕须求为本来就有目的给与七个新特性,举例选拔 Object.assign()_.extend()。在这里种情形下,你应有用多个指标的品质成立二个新的目的。所以,假诺你想增加新的响应式属性,不要像这么:

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

您应当如此做:

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

 

显示过滤/排序结果

突发性,大家想要展现贰个数组的过滤或排序别本,而不实际改造或重新载入参数原始数据。在此种气象下,能够成立重回过滤或排序数组的思索属性。

<li v-for="n in evenNumbers">{{ n }}</li>

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

在思忖属性不适用的意况下 (比如,在嵌套 v-for 循环中卡塔尔国 你能够应用二个method 方法:

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

 

值域 v-for

<div>
  {{ n }} 
</div>

能够用 v-on 指令监听 DOM 事件,并在触发时运转一些 JavaScript 代码。

template-v-for

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

 

八个零零器件的 v-for

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的本子里,当在组件中利用 v-for 时,key 今后是必需的。

只是,任何数据都不会被自动传送到零器件里,因为零器件有本人独立的功效域。为了把迭代数据传递到零部件里,大家要用 props

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

不自动将 item 注入到构件里的原故是,那会使得组件与 v-for 的运作紧密耦合。鲜明组件数据的根源能够使组件在其余地方重复使用

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

留意这里的is="todo-item"天性。这种做法在选拔 DOM 模板时是十二分必要的,因为在 <ul> 元素内只有 <li> 成分会被作为有效内容。这样做达成的职能与<todo-item>风流倜傥律,然而足以避开一些秘密的浏览器拆解分析错误。

Vue.component('todo-item', {
  template: '
    <li>
      {{ title }}
      <button v-on:click="$emit('remove')">X</button>
    </li>
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

示例:

v-for 与 v-if

当它们处于同大器晚成节点,v-for 的先行级比 v-if 越来越高,那代表 v-if 将分头重复运营于各样 v-for 循环中。当你想为仅部分有个别项渲染节点时,这种事前级的体制会万分常有用,如下:

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

地点的代码只传递了未产生的 todos。

而大器晚成旦你的指标是有原则地跳过巡回的实行,那么能够将 v-if 置于外层成分 (或 <template>卡塔尔(英语:State of Qatar)上。如:

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

 

五.事件管理

<div id="example-1">

事件处理方法

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

  <button v-on:click="counter += 1">Add 1</button>

内联微处理机中的方法

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

有的时候也亟需在内联语句微机中做客原来的 DOM 事件。能够用万分变量 $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)
  }
}

  <p>The button above has been clicked {{ counter }} times.</p>

事件修饰符

修饰符是由点开首的下令后缀来代表的。

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

    ...

    ...

接收修饰符时,顺序很关键;相应的代码会以类似的各种发生。因而,用 @click.prevent.self 会阻止全体的点击,而@click.self.prevent 只会阻止对成分自己的点击。

<!-- 点击事件将只会触发一次 2.1.4 新增-->
<a v-on:click.once="doThis"></a>

不像别的只可以对原生的 DOM 事件起效果的修饰符,.once 修饰符还是能被用到自定义的零器件事件上。

<!-- the scroll event will not cancel the default scroll behavior 2.3.0 新增 -->
<div v-on:scroll.passive="onScroll">...</div>

Vue 为那个修饰符额外提供了 .passive修饰符来升高活动端的质量。比方,在滚动的时候,浏览器会在全体育赛事件管理完成之后再触及滚动,因为浏览器并不知道那些事件是还是不是在其处理函数中被调用了event.preventDefault().passive修饰符用来更为告诉浏览器这么些事件的暗中同意行为不会被裁撤。

绝不把 .passive 和 .prevent 一齐利用。被动处理函数无法拦截私下认可的事件表现。

</div>

按钮修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

万事的按钮小名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

能够透过全局 config.keyCodes 对象自定义按钮修饰符别称:

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

var example1 = new Vue({

机动相称开关修饰符(2.5.0 新增添卡塔尔

你也可径直将KeyboardEvent.key纸包不住火的自由有效按钮名调换为 kebab-case 来作为修饰符:

<input @keyup.page-down="onPageDown">

在地点的例证中,管理函数仅在$event.key === 'PageDown' 时被调用。

有部分开关 (.esc以致有着的方向键卡塔尔国 在 IE9 中有例外的 key值, 如若你想援救 IE9,它们的放松权利别称应该是首推。

  el: '#example-1',

系统修饰键(2.1.0 新扩展卡塔尔(قطر‎

可以用如下修饰符来完毕仅在按下相应按钮时才触发鼠标或键盘事件的监听器。

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

当心:在 Mac 系统键盘上,meta 对应 command 键 (⌘卡塔尔(英语:State of Qatar)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞卡塔尔(英语:State of Qatar)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆卡塔尔(英语:State of Qatar)。在其它特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以至随后继付加物,比方 奈特 键盘、space-cadet 键盘,meta 被标识为“META”。在 Symbolics 键盘上,meta 被标志为“META”或许“Meta”。

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

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请小心修饰键与健康开关不一致,在和 keyup事件联合用时,事件触发时修饰键必得处于按下情状。换句话说,只有在按住 ctrl 的图景下放出其余按钮,技巧接触keyup.ctrl。而独有释放 ctrl也不会接触事件。

  data: {

.exact 修饰符(2.5.0 新增)

.exact 修饰符允许你决定由标准的系统修饰符组合触发的平地风波。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

    counter: 0

鼠标按键修饰符(2.1.0 新扩大卡塔尔(英语:State of Qatar)

  • .left
  • .right
  • .middle

那些修饰符会节制处理函数仅响应特定的鼠标开关。

  }

六.表单输入绑定v-model

你能够用v-model 指令在表单<input><textarea>要素上创立双向数据绑定。

v-model 会忽略全数表单成分的 valuecheckedselected 特性的初阶值而连续几天将 Vue 实例的数额作为数据来自。你应有经过 JavaScript 在组件的 data慎选中声称开始值。

对此需求接受输入法 (如中文、朝鲜语、立陶宛语等卡塔尔(قطر‎ 的言语,你会意识 v-model 不会在输入法结合文字进程中拿走更新。如果您也想管理这些历程,请使用 input 事件。

})

文本

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

 

多行文本

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

在文书区域插值 (<textarea></textarea>卡塔尔 并不会收效,应用 v-model来代替。

 

复选框

单个复选框,绑定到布尔值:

<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>
  Checked names: {{ checkedNames }}
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

看下边三个例子:

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的 true-valuefalse-value 天性并不会潜濡默化输入控件的value 性子,因为浏览器在提交表单时并不会蕴藏未被入选的复选框。假如要作保表单中那五个值中的三个可见被交给,(例如“yes”或“no”卡塔尔(قطر‎,请换用单选按键。

v-on:click.prevent.self 会阻止享有的点击,而 v-on:click.self.prevent 只会阻止对元素本身的点击。

单选开关

<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>
  Picked: {{ picked }}
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

 

选择框

单选时:

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  Selected: {{ selected }}
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

如果 v-model表明式的起始值未能合营任何选取,<select> 成分将被渲染为“未选中”状态。在iOS 中,那会使客户不或者选拔第三个筛选。因为这么的景观下,iOS 不会触发 change 事件。因而,更推荐像上面这样提供三个值为空的剥夺选项。

多选时 (绑定到叁个数组卡塔尔(英语:State of Qatar):

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  Selected: {{ selected }}
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

v-for 渲染的动态选项:

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

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

<!-- 点击事件将只会触发三遍 -->
<a v-on:click.once="doThis"></a>

修饰符.lazy,.number,.trim

 

.lazy

在私下认可意况下,v-model 在历次 input 事件触发后将输入框的值与数据举办同步 (除了上述输入法结合文字时卡塔尔。你能够加多 lazy 修饰符,进而转换为利用 change 事件展开协同:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

 

.number

假如想活动将客户的输入值转为数值类型,能够给 v-model 增加 number 修饰符:

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

那平时很有用,因为就算在type="number" 时,HTML 输入成分的值也总会回来字符串。

<div v-on:scroll.passive="onScroll">...</div>

.trim

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

 

本条 .passive 修饰符尤其能够提高活动端的品质。

毫无把 .passive 和 .prevent 一同使用,因为 .prevent 将会被忽视,同期浏览器恐怕会向您来得三个警戒。请深深记住,.passive 会告诉浏览器你_不_想阻止事件的暗许行为。

 

 

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

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

 

 

 

.exact 修饰符允许你决定由规范的类别修饰符组合触发的风浪。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

 

数量展现绑定:

<input v-model="message" placeholder="edit me">

<p>Message is: {{ message }}</p>

 

 

 

多行文本:

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

(js代码 省略)

 

 

单个复选框,绑定到布尔值:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

 

 

三个复选框,绑定到同二个数组:

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:vue.js小总括

相关阅读