Vue学习（二）指令详解

（一）单数据流指令：常用控制DIV或者按纽等的显示/隐藏，或者样式Class的属性，把js对象的属性值显示到视图（DOM)中，即只要改变了JS对象的属性值，自动会渲染到DOM。

v-bind（可以缩写冒号：）举例：

取得href的值
<a v-bind:href="url"></a>
控制按纽有效/失效
<button v-bind:disabled="someDynamicCondition">Button</button>
在绑定class或者内联style时，支持其他类型的值，如数组或对象。如：

<div id="example">
    <div v-bind:class="[classA,{classB:isB,classC:isC}]"></div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#example',
        data: {
          classA:'A',
          isB:false,
          isC:true
        }
    })

</script>

内联Style:

data: {
activeColor: 'red',
fontSize: 30

}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

（二）双数据指令:通常用在表单输入控件上，即双向的更新，这个最常用。

Vue提供了一个新的指令：v-model进行双向数据的绑定，注意不是v-bind。

例子1：文本输入框

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

例子2：大文本框

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

例子3：复选框

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

例子4：单选框

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

例子5：下拉选择框

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

修饰符的使用：

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：


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

.number

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

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

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
.trim

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

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

（三）事件绑定

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

示例：

<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}

})

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

示例：

<div id="example-2">

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

（四）其它辅助指令

v-if：

常用在控制div元素或者HTML元素上，例如：

在 <template> 元素上使用 v-if 条件渲染分组

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

v-show

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

v-else-if，顾名思义，充当 v-if 的“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-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

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

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

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

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

    v-repeat
    数组变动检测
    内置过滤器
        1.filterBy(0.12版本)
        2.orderBy(0.12版本)

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

Template循环渲染多标签

</ul>

表格动态行

<div id="app">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
      </thead>
      
      <tbody v-if="UserList.length > 0">
        <tr v-for="item in UserList" >
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr><td colspan="3">没有数据奥！</td></tr>
      </tbody>
    </table>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
       UserList: []
      }
    });

    // 每秒钟插入一条数据。
    setInterval(function () {
      app.UserList.push({'name': 'malun', 'age': 18, 'address': '北京黑地下室'});
    }, 1000);
</script>

    v-text
    v-html
    v-ref
    v-el
    v-pre
    v-cloak

Vue学习（二）指令详解

表格动态行

猜你喜欢