[鼠年全马] W20 - Vue心得笔记 - 指令篇(前)

最近被上级塞了一堆很赶的专案, 上礼拜就算硬挤也挤不出时间...
只好这礼拜趁连假来补稿, 充实一下连假的生活, 来个端午连假每日一篇计画

#Vue指令

趁天气好, 脑袋清晰的时候, 赶紧来把基本观念複习完毕吧~

首先我们可以看到Vue官网指令的部分
哇夭寿 指令有一大堆

虽然有这么多个指令, 但绝大部分是原生js就有的东西, 只是换个写法, 待我娓娓道来

#v-text

v-text用途很简单是最好理解的一个指令, 意义就如他的指令名称一样, 是让元素带入指定的文字呈现, 用途类似原生js的textContent
举上次来乱的例子来说:

var app = new Vue({    el: '.app',    data: {        message: 'Hello 我是来乱的!'    }})

// 双花括号写法如下<div class="app">    {{ message }}</div>// 上下两种写法得到的结果相同// v-text写法如下<div class="app" v-text="message"></div>

#v-html

v-html跟v-text在我的理解上是一样的, 差别在v-html可以放html语法
但是!!!
它只能放单纯的html, 没办法绑定Vue元件的资料
例如:

var app = new Vue({    el: '.app',    data: {        message: 'Hello 我是来乱的!',        myhtml: '<span>{{ message }}</div>'    }})

<div class="app" v-html="myhtml"></div>

最后呈现的结果会长这样:

#v-show

v-show用途如其名, 判断元素是否显示, 我个人常把这个指令用在与CSS动画的搭配上
既然说是判断, 就知道它的内容必须放布林值(true/false)
写法会像这样:

// v-show判断message是否有值, 有值就显示, 没值就隐藏<div class="app" v-text="message" v-show="message"></div>

这边要注意的是, 它不是判断渲染或不渲染, 而是显示或隐藏, 代表一开始就会把元素渲染出来了!!

#v-if、v-else-if、v-else

这三个指令, 它的用途和v-show也类似, 不过是判断元素是否渲染
注意是渲染唷!!!
是渲染唷!!!
渲染唷!!!
这边的v-if判断跟所有程式语言的if判断式是一样的概念, 条件达成就渲染, 没达成就跳下一个判断
举个简单的例子:

var app = new Vue({    el: '.app',    data: {        shownumber: 1,        message1: "shownumber 是1",        message2: "shownumber 是2",        message3: "shownumber 不是1也不是2",    }})

// shownumber为1时渲染message1// shownumber为2时渲染message2// 都不是则渲染message3<div v-text="message1" v-if="shownumber === 1"></div><div v-text="message2" v-else-if="shownumber === 2"></div><div v-text="message3" v-else></div>

#v-for

看到for就知道要跑迴圈了
v-for也是和所有程式语言的for迴圈是一样的概念
用法如下:

<div v-for="(item,index) in 10" v-bind:key="index">{{ item }}</div>

这边会发现 v-for迴圈带了两个参数

最后把 item 用双花括号显示出来会长这样

在最后v-for範例中有用到一个还没提到的指令v-bind, 后面带了key
这部分, 下次会再说明, 祝大家端午连假愉快

PS.今天真是热爆天