Vue 2.0 由浅入深-指令

指令

指令是可以写在DOM元素的小命令，他们以v-为前缀，Vue就能识别这是一个指令并保持语法的一致性。如果你需要对HTML进行底层操作的话，这种方式是非常有用的。

1. v-text

v-text 更新元素的文本内容，不解析html 相当于更新元素的 innerText文本内容

html 代码

<div v-text='txt'></div>

javascript 代码

new Vue({
  el:"#app",
  data:{
    txt:"<b>b标签</b>"
  } 
})

页面渲染结果（不解析b标签，原格式输出）
<b>b标签</b>

2. v-html

v-text 更新元素的html，解析html 相当于更新元素的 innerHTMLhtml代码内容

html 代码

<div v-text='html'></div>

javascript 代码

new Vue({
  el:"#app",
  data:{
    html:"<b>b标签</b>"
  } 
})

页面渲染结果(解析b标签输出加粗的文本)
b标签

查看演示

3. v-show

v-show 根据表达式之真假值，切换元素的 display CSS 属性,元素即使隐藏也存在DOM中

html 代码

<div v-show='flag'></div> 根据flag的布尔值切换 元素的display

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:true
  } 
})

页面渲染结果
此时 div 的display css 不做改变，v-show只会在表达式 为 false 时 改变display=none，为true不做改变

4. v-if

v-if 根据表达式的值的真假条件渲染元素,也就是说元素会被销毁或重新创建

html 代码

<div v-if='flag'></div> 根据flag的布尔值，来控制元素是否被 创建或销毁，销毁后不再存在DOM中

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

页面渲染结果
此时 div 的将不被渲染出来，div 不存在于 DOM中

5. v-else

v-else v-if的else语句 代表表达式为false 的时候渲染元素
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

html 代码

<div v-if='flag'>A</div>  如果flage为 `trun`则创建元素
<div v-else='flag'>B</div>  如果flage为`false`则创建元素

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

页面渲染结果
此时 div B 将被创建

6. v-else-if

v-else-if v-if的else-if语句
v-else-if 元素必须紧跟在带 v-if的元素的后面，否则它将不会被识别。

html 代码

<div v-if="type === 'A'"> 如果type == A 则创建 divA元素 并中断执行
  A
</div>
<div v-else-if="type === 'B'"> 如果type == B 则创建 divA元素 并中断执行
  B
</div>
<div v-else-if="type === 'C'"> 如果type == C 则创建 divA元素 并中断执行
  C
</div>
<div v-else>  如果条件都不满足 执行
  Not A/B/C
</div>

javascript 代码

new Vue({
  el:"#app",
  data:{
    type:'C'
  } 
})

页面渲染结果
此时 div c 将被创建

v-show与v-if 实例演示

7. v-for

v-for 基于源数据多次渲染元素或模板块

创建 vue实例

new Vue({
  el:"#app",
  data:{
    arr:["张","王","李","赵"],
    arr2:["张","王","李","张"],
    obj:{'key1' : 'val1','key2' : 'val2','key3' : 'val3'}
  },
})

输出数组arr

//输出arr 的值
<span v-for(val in arr)>{{val}}</span >
张 王 李 赵
//输出 arr 的下标和值 (第一个参数是val  第二个是key)
<span v-for((val,index) in arr)>{{index}}:{{val}}</span >
0:张  1:王  2:李  3:赵

输出对象obj

//输出obj的值
<span v-for(val in obj)>{{val}}</span >
val1   val2   val3
//输出 obj的key 和 val (第一个参数是val  第二个是key)
<span v-for((val,key) in obj)>{{key}}:{{val}}</span >
key1:val1   key2:val2   key3:val3

vue 2.0 可以输出对象重复的对象 比如 arr2 有两个 张

//输出obj的值
<span v-for(val in arr2)>{{val}}</span >
张 王 李 张

当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个 唯一key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。提高性能

<span v-for((val,index) in arr2) :key='index'>{{val}}</span >
张 王 李 张

查看v-for实例演示

8. v-on

v-on 用来绑定事件 用法 v-on:事件="函数"；函数可传入$event参数获取事件对象

<div id="app">
   <button v-on:click="push($event)">点击</button> //点击button执行push方法
   {{arr}} //展示数据
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5] //定义数据
    },
    methods:{  //事件方法 定义在 methods 选项中
        push:function(e){
            //输出 event 事件对象
            console.log(e)
            //方法里的this 代表vue实例
            this.arr.push(6)  //向数组追加数据
        }
    }
})

v-on可以简写为@

<button v-on:click="test">v-on</button>
<button @click="test">@</button>

$event.target 获取当前dom对象

new Vue({
    el:"#app",
    methods:{
        test2:function(e){
            alert(e.target.innerHTML) //弹出当前元素的内容
        }
    },
})

查看v-on演示

8. 1事件修饰符

  • .stop

阻止冒泡
原生阻止冒泡方式需要先获取事件对象 然后通过 e.stop.proPagation()来阻止冒泡

//原生：
function(e){
   e.stopPropagation()
}
//Vue: @事件.stop="执行方法"
<button @click.stop="c2"></button>
  • .prevent

阻止默认事件
原生方式，通过事件对象 e.preventDefault()

//原生：
function(e){
   e.preventDefault()
}
//Vue: @事件.prevent ="执行方法"
<a href="https://www.baidu.com/" target="_blank" @click.prevent="d"></a>
  • .capture

添加事件监听器时使用事件捕获模式
通俗的说，冒泡是由内而外，如果外面元素添加 capture 则优先先执行；

<div id="obj1" v-on:click.capture="doc">
    obj1
    <div id="obj2" v-on:click.capture="doc">
        obj2
        <div id="obj3" v-on:click="doc">
            obj3
            <div id="obj4" v-on:click="doc">
                obj4
            </div>
        </div>
    </div>
</div>

点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3； 由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。

查看事件修饰符实例演示

9. v-bind

v-bind 绑定DOM属性 可以简写为 “ : ”

创建vue实例

new Vue({
    el:"#app",
    data:{
        src:"https://cn.vuejs.org/images/logo.png",
        a:"a",
        b:"b",
        c:"c",
        ble:true
    }   
})

img标签绑定 src

<img :src="src"/>
//执行结果 <img src="https://cn.vuejs.org/images/logo.png"/>

绑定元素class

<p :class="a"></p>
//执行结果 <p class="a"></p>

根据条件绑定元素class

<p :class="{a:true}">:class="{类值:真就添加类假则不添加}"</p>
//执行结果 <p class="a"></p>
<p :class="ble?a:b">:class="ble?a:b" 如果 ble为true 则添加a 否则添加b</p>

添加多个class名绑定class数组

<p :class="[a,b]">:class="[class1,class2]"</p>
//执行结果 <p class="a b"></p>
<p :class="[a,{b:true}]">:class="[a,{b:true}]"</p>
//执行结果<p class="a b"></p>
<p :class="[a,ble?c:b]">:class="[a,ble?c:b]" </p>
//执行结果<p class="a c"></p>

查看v-bind实例演示

9. v-model

v-model指令，他能轻松实现表单输入和应用状态之间的双向绑定。

input文本框

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

textarea 文本框

<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>Message is: {{ message }}</p>

复选框
单个复选框绑定布尔值

//html
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
//js
new Vue({
    el:'#app',
    data:{
        checked :false,
    }
})

多个复选框绑定数组

<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>
//js
new Vue({
    el:'#example-3',
    data:{
        checkedNames:[],
    }
})

绑定单选框 绑定字符串

<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>
//js
new Vue({
    el:'#example-3',
    data:{
        picked:'',
    }
})

下拉框
v-model 作用在下拉框时要绑定给select 标签上，而不是 option，单选项是绑定字符串 多选项绑定数组

<select v-model="message5" name="">
  <option value="数据1" selected="selected">数据1</option>
  <option value="数据2">数据2</option>
</select>

new Vue({
el:'#app',
data:{
    message5:"数据1"
}
})

查看v-model演示案例

10 v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

不在进行vue编译，直接以源格式输出

<span v-pre>{{ this will not be compiled }}</span>

输出出来： {{ this will not be compiled }}

查看v-pre实例演示

11 v-cloak

vue实例未编译完成前 带有 v-cloak指令的元素都是隐藏的直到编译结束,这样有效的避免了 {{}} 闪烁的问题。
需要配合 css使用 先定义css [v-cloak] {display: none;}

<style type="text/css">
[v-cloak] {
  display: none;
}
</style>
<p v-cloak>{{msg}}</p>

查看v-cloak演示

12 v-once

这个指令，只渲染元素和组件一次，之后数据改变时 插值处的内容不会改变

查看v-once实例演示

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,086评论 0赞 29
  • 2018-02-08
    前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 800评论 0赞 3
  • Vue官方教程笔记（Vue 1.X）
    1.安装 可以简单地在页面引入Vue.js作为独立版本，Vue即被注册为全局变量，可以在页面使用了。 如果希望搭建...
    Awey阅读 11,122评论 4赞 129
  • iOS表视图UITableView之基础篇（一）
    UITableView是iOS开发中使用最频繁，也是最重要的视图控件,在常用的APP中随处可见。它继承于UIScr...
    热雪ss阅读 3,228评论 3赞 13
  • 由一个梦所想起的
    我站在一片郁郁葱葱的高山草甸里，欣赏着头顶上的星辰，尽情吐纳着这难得的清新空气，仿佛置身于天堂。我不知道自己为何深...
    草石阅读 163评论 0赞 1