Vue 常用指令

By admin in 计算机教程 on 2019年5月6日

 使用了 vue 的指令后,表达式是 JS 表达式,变量是 VUE 实例中的数据属性。

一.插值

1 常用指令

v-once

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

span v-once>这个将不会改变: {{ msg }}
  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-bind指令
  • v-model
  • v-on指令
  • v-text指令

v-html

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的
HTML,你需要使用 v-html 指令:

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

这个 span 的内容将会被替换成为属性值 rawHtml,直接作为
HTML——会忽略解析属性值中的数据绑定。

你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致
XSS攻击。请只对可信内容使用 HTML
插值,绝不要对用户提供的内容使用插值。

1.1 v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

使用 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-if="expression"

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

expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:

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的值是 nullundefined
false,则 disabled 特性甚至不会被包含在渲染出来的 <button>
元素中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>

        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

v-on 缩写

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

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

显示结果如下、

三.条件渲染

图片 1

v-if

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

注意:v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

在 <template> 元素上使用 v-if

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

 

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
的元素的后面,否则它将不会被识别。

1.2 v-for指令

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>

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

用 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-for="item in items"

v-show

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

不同的是带有 v-show的元素始终会被渲染并保留在 DOM
中。v-show只是简单地切换元素的 CSS 属性display

注意,v-show 不支持 <template> 元素,也不支持 v-else。

items是一个数组,item是当前被遍历的数组元素。

v-if vs v-show

一般来说,v-if
有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
较好;如果在运行时条件很少改变,则使用 v-if 较好。

示例代码:

v-if 与 v-for 一起使用

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

<body>
    <div id="app">
        <table style="width: 400px; height: 600px;" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>

            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td align="center"> {{item.name}}</td>
                    <td> {{item.age}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},]
        }
    })
</script>

四.列表渲染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>

1.3
v-bind 指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class

一个对象的 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

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

<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()
的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

v-bind:argument="expression"

key

为了给 Vue
一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一
key 属性。理想的 key 值是每项都有的且唯一的 id。

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

建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM
内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

 

数组更新检测

1.4 v-model

变异方法与替换数组

Vue.js
包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(),
pop(), shift(), unshift(), 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/)
})

v-model(表单元素设置了之后会忽略掉value,checked,selected),常用在表单 <input> 及 <textarea>

让表单元素和数据实现双向绑定(映射关系)

示例代码

<div id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</div>

</body>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })
</script>

 

 

1.5
v-on 指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:

<a v-on:click="doSomething">

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。 Greet按钮将它的单击事件直接绑定到greet()方法,而Hi按钮则是调用say()方法。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue.js
为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

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





 

 

Vue.js为最常用的两个指令v-bindv-on提供了缩写方式。v-bind指令可以缩写为一个冒号,v-on指令可以缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

 

1.6 v-text指令主要是防止页面首次加载时 {{}}
出现在页面上。将对象中数据变量值显示在绑定的标签内容上。

v-text="expresstion"

 

 

参考文献:

vue中如何实现数据的双向绑定

Vue.js——60分钟快速入门

官网:https://cn.vuejs.org/v2/guide/

注意事项

由于 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)

对象更改检测注意事项

还是由于 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'
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有