Vue.js（二)

个人笔记整理，有误欢迎指正

作者 Mr.Woo 日期 2017-03-23
学习笔记 Vue.js
Vue.js（二)

Vue.js（二）

Vue中常用的指令（Directives）

带特殊前缀的 HTML 特性，可以让 Vue.js 对一个 DOM 元素做各种处理。比如：<div v-text="message"></div>；这里的 div 元素有一个 v-text 指令，其值为 message；Vue.js 会让该 div 的文本内容与 Vue 实例中的 message 属性值保持一致。

Directives 可以封装任何 DOM 操作。比如 v-attr 会操作一个元素的特性；v-repeat 会基于数组来复制一个元素；v-on会绑定事件等。

Vue.js提供了不少常用的内置指令，主要有：

  • v-once指令
  • v-if指令
  • v-show指令
  • v-else指令
  • v-for指令
  • v-on指令
  • v-bind指令

当然这里不一一列举，如果需要了解其它指令，可以进入官网: https://vuefe.cn/v2/api/#%E6%8C%87%E4%BB%A4

3.1 v-once指令

执行一次性地插值，当数据改变时，插值处的内容不会更新。

<script>
    //创建一个vue实例,或者可以理解为viewmodel，它连接着view与model
     var app = new Vue({
            el:'#box',
            data:myData
    })

    //vue中的model
    var myData = {
            message:'Hello World'
    }
</script>

<body>
    //vue中的view    
    <div id="box">
        <p>能够改变的值：{{message}}</p>
        <p v-once>不能够改变的值：{{message}}</p>
    </div>
</body>

通过控制台输入app.message='Mr.Woo',可发现在有指令v-once的标签中值是不能改变，而没有该指令值会被改掉。

3.2 v-if指令

条件渲染指令，根据表达式的真假来添加或删除元素。其语法结构是：v-if="expression"，其中expression是一个返回bool值的表达式，其结果可以是true或false，也可以是返回true或false的表达式。

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                show:true,
                hide:false

            ｝
    })
</script>

<body>
    //vue中的view    
    <div id="box">
        <p v-if="show">显示</p>
        <p v-if="hide"不显示</p>
    </div>
</body>

3.3 v-show指令

也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                show:true,
                hide:false

            ｝
    })
</script>

<body>
    //vue中的view    
    <div id="box">
        <p v-show="show">显示</p>
        <p v-show="hide">不显示</p>
    </div>
</body>

v-show和v-if的区别：

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

3.4 v-else指令

可以用v-else指令为v-if或v-show添加一个“else块”。注意：v-else前一兄弟元素必须有 v-if 或 v-else-if。

（1）v-if和v-else结合

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                name:'woo',
                name2:'zoo'

            ｝
    })
</script>

<body>
    //vue中的view    
    <div id="box">
        //两者只有一个符号条件
        <p v-if="name == 'woo'">{{name}}</p>
        <p v-else>{{name2}}</p>
    </div>
</body>

（2）v-else-if 和 v-else 结合

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                score:5
            ｝
    })
</script>

<body>    
    <div id="box">
        <p v-if="score >= 90">优秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
    </div>
</body>

3.5 v-for指令

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。

该指令之值，必须使用特定的语法(item, index) in items, 为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                people:[
                    {name:'zs'},
                    {name:'ls'}
                ]
            ｝
    })
</script>

<body>    
    <ul>
        <li v-for="p in people">{{p.name}}</li>
    </ul>
</body>

另外v-for也可以为数组索引指定别名（或者用于对象的键）：

  • <div v-for="(item, index) in items"></div>
  • <div v-for="(val, key) in object"></div>
  • <div v-for="(val, key, index) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

<div v-for="item in items" :key="item.id">
    {{ item.text }}
</div>

3.6 v-bind指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：

v-bind:src=”imageSrc” 可以缩写： :src=”imgaeSrc”

:class=”{ red: isRed }” 或 :class=”[classA, classB]” …

:style=”{ fontSize: size + ‘px’ }” 或 :style=”[styleObjectA, styleObjectB]” …

绑定一个有属性的对象，比如：v-bind=”{ id: someProp, ‘other-attr’: otherProp }”

…

语法结构：v-bind:argument="expression"

因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。 

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                people:[
                    {name:'zs'},
                    {name:'ls'},
                    {name:'xd'}
                ],

                activeNumber:3
            ｝
    })
</script>

<body>    
    <ul >
        <li v-for="(p,index) in people" :class="index == activeNumber ? 'active':''">
                {{p.name}}
        </li>
    </ul>
</body>

3.7 v-on指令

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

常用的修饰符包括：

.stop 调用 event.stopPropagation()；停止冒泡。

.prevent 调用 event.preventDefault(); 停止监听原生事件。

.capture 添加事件侦听器时使用 capture 模式。

.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once 触发一次。

使用手法：

  • <!-方法处理器 –>
  • <!-内联语句 –>
  • <!-缩写 –>
  • <!-停止冒泡 –>
  • <!-阻止默认行为 –>
  • <!-阻止默认行为，没有表达式 –>
  • <!串联修饰符 –>
  • <!-键修饰符，键别名 –>
  • <!-键修饰符，键代码 –>
  • <!-单击事件最多将触发一次 –>

示例代码：

<script>
     var app = new Vue({
            el:'#box',
            data:｛
                content:'Mr.Woo'
                fontColor:'black'
            ｝,
            methods:{

                changeColor:function(){

                    this.fontColor='red'
                }
            }
    })
</script>

<body id="box">    
    <p :style="{color:fontColor}">{{content}}</p>
    <button @click="changeColor">改变颜色</button>
</body>

在上面示例中接触到了新的methods方法，通过这个方法可以直接通过 app 实例访问这些方法，或者在指令表达式中使用,方法中的 this 自动绑定为 Vue 实例。

FEATURED TAGS
学习笔记 Vue.js