vue 补充学习

// 数据属性
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
// 实例属性
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

1. 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

2. 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但要留心这会影响到该节点上的其它数据绑定：

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

3. 从 vue 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束

动态参数预期是一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。

某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。

<!-- 这会触发一个编译警告（有空格） -->
<a v-bind:['foo' + bar]="value"> ... </a>

Class

在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

使用它的时候：

<my-component class="baz boo"></my-component>

等价于：

<p class="foo bar baz boo">Hi</p>

条件渲染

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

具有唯一值的 key 属性（使用场景：两个元素是完全独立的，不要复用它们）

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

每次切换时，输入框都将被重新渲染。<label> 元素仍然会被高效地复用，因为它们没有添加 key 属性。

区别 v-if 和 v-show :

带有 v-if 为false的元素不会被渲染出来。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。v-show 不支持 <template> 元素，也不支持 v-else。

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

可以用 v-for 来遍历一个对象的属性。

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

由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，可以使用以下两种方式实现：

Vue.set(vm.items, indexOfItem, newValue)

vm.$set(vm.items, indexOfItem, newValue)

Vue 不能检测对象属性的添加或删除

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

age 属性到嵌套的 userProfile 对象：

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

还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

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

有时可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()

// 响应式属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

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

// 1 2 3 4 5 6 7 8 9 10

vue官方不推荐在同一元素上使用 v-if 和 v-for。

如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。

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

事件

事件修饰符

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

<!-- 点击事件将只会触发一次 .once 修饰符还能被用到自定义的组件事件上 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成 -->
<!-- .passive 会告诉浏览器你不想阻止事件的默认行为 -->
<div v-on:scroll.passive="onScroll">...</div>

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

按键修饰符

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

// 按键修饰符
<input v-on:keyup.13="submit">
// 系统修饰符
<!-- Alt + C -->
<input @keyup.alt.67="clear">

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

表单输入绑定

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 作为 prop 并将 input 作为事件；
checkbox 和 radio 使用 checked作为 prop 并将 change 作为事件；
select 字段将 value 作为 prop 并将 change 作为事件。

// 文本

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

// 多行文本

<textarea v-model="message" placeholder="add multiple lines"></textarea>

// 复选框（checkedName是一个数组）

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

// 单选按钮

<div id="example-radio">
  <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>
</div>

// 选择框

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

修饰符

.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。可以通过添加 lazy 修饰符，转变为使用 change 事件进行同步：

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

.number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符.

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

.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符.

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

posted @ 2019-09-22 17:34 cecelia 阅读(96) 评论(0) 收藏举报

刷新页面返回顶部

cecelia

vue 补充学习

对动态参数的值的约束

公告