Vue2.0指令-（2）

2017-07-20 本文已影响129人 addin_gao

1.指令含义：

directive（指令）是特殊的带有前缀 v- 的命令，指令的值限定为绑定表达式，指令的职责就是当表达式的值改变时把某些特殊的行为应用到DOM上。

2. 内部常用指令:

**v-if 指令 **: 根据表达式的值（true or false）在DOM中生成或者移除一个元素
<body>
<div id="app">
<p v-if=" true ">会显示</p> //会在结构中显示
<p v-if=" value ">会显示</p> //会在结构中显示
<p v-if=" false ">不会显示</p> //不会在结构中显示
<p v-if=" msg ">不会显示</p> //不会在结构中显示
</div>
<script>
new Vue({
el:'#app',
data:{
value:true,
msg : false
}
})
</script>
</body>

1、若v-if想要切换多个元素，可以这样使用<template v-if> ..多个标签对...<template>
2、用key属性可以管理可复用元素，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>
现在，每次切换时，输入框都将被重新渲染

**v-show 指令 **：根据表达式的值（true or false）显示或者隐藏一个元素，在DOM结构中有显示
<body>
<div id="app">
<p v-show=" true ">会显示</p>
<p v-show=" value ">会显示</p>
<p v-show=" false ">不会显示</p>
<p v-show=" msg ">不会显示</p>
</div>
<script>
new Vue({
el:'#app',
data:{
value:true,
msg : false
}
})
</script>
</body>

v-show显示

v-show和v-if不一样，它不支持<template>语法，v-if和v-show都能控制DOM元素的显示和隐藏，但是在切换v-if模块时，vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或者子组件，v-if是真是的条件渲染，它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

因此v-if有更高的切换消耗，而v-show只是简单基于css切换，v-show有更高的初始渲染消耗，所以频繁切换使用v-show，运行条件不大可能改变则用v-if较好

v-else 指令：就是js中else的意思，它必须跟着v-if，还有v-else-if也是
<body>
<div id="app">
<p v-if="value">it's ok</p>
<p v-else> it's not ok</p>
</div>
<script>
new Vue({
el:'#app',
data:{
value:false,
}
})
</script>
</body>
v-model 指令：用在input,select,text,checkbox,radio等表单控件上创建双向数据绑定

v-model 代码

v-model 效果

在v-model指令后还可以添加多个参数（number，lazy，debounce）
① - number：能将用户的输入自动转成Number类型，如果转换为NaN，则返回原值
② - lazy：默认下v-model在input事件中同步输入框的值和数据，我们可以添加一个lazy特性，将数据改到在change事件中发生

<div id="app">
     <input type="text" v-model.lazy="value">
     <span>{{value}}</span>
</div>
 <script>
    new Vue({
        el:'#app',
        data:{
            value:'内容是在change事件后,输入框失去焦点才改变',
        }
    })
</script>

③ - trim：自动过滤用户输入的首尾空格，<input v-model.trim="msg">

**v-for 指令： ** vue提供的循环指令，和js的forEach差不多，先看一段代码

  <body>
      <div id="app">
            <!-- 模板迭代 -->
             <span>模板迭代</span>
            <ul>
                <template v-for="(item,index) in 'items' ">
                    <li>{{ item }}-{{index}}</li>
                </template>
            </ul>
            <span>对象迭代</span>
            <ul>
                <li v-for="(value,key,index) in obj">
                    <span>{{value}}-{{key}}-{{index}}</span>
                </li>
            </ul>
            <span>数组迭代</span>
            <ul>
                <li v-for="(item,index) in gc">
                    <span>{{item.name}}-{{index}}</span>
                    <span>{{item.age}}-{{index}}</span>
                </li>
            </ul>
            <span>整数迭代</span>
            <ul>
                <li v-for="i in 10">{{i}}</li>
            </ul>
            <span>字符串迭代</span>
             <ul>
                <li v-for="i in 'span' ">{{i}}</li>
            </ul>
      </div>
      <script>
        new Vue({
            el:'#app',
            data:{
                gc:[
                    {name:'zhangsan',age:10},
                    {name:'lisi',age:21},
                    {name:'wangwu',age:22},
                    {name:'wangwu',age:22}
                ],
                obj:{
                    name :'gc',
                    age :28
                }
            }
        })
       </script> 
</body>

07.png

v-for 在组件中的应用：一个简单的例子todo-list，可以先跳过，学了组件再回看:(重要)

<body>
    <!-- 没看组件部分的可跳过，看了组件再来看 -->
    <div id='app'>
        <input type="text" v-model="todolist" @keyup.enter="addText">
        <!-- 监听keyup事件，有修饰符.enter，指按了enter键了才触发后面函数 -->
        <ul>
            <li is="todo-list" v-for="(item,index) in gc"  :title="item" @remove="gc.splice(index,1)"></li>  
            <!-- 若这里没用is属性写,直接用的组件名称，而且不加 :key=" xxx "属性则会报一个警告 component lists rendered with v-for should have explicit keys -->
            <!-- is 属性可看我写的组件中的is属性详解文档 -->
        </ul>
    </div>
    <script>
    // 我们来做一个简单的todoList的列子

        // 定义一个全局组件
    Vue.component('todo-list',{
            template:'<li>{{title}} <button @click="$emit(\'remove\')">X</button></li>',//组件模板
            //@cilck绑定的点击事件，@是v-on：的简写方式，$emit('xx')能派发子组件的触发的事件，父组件能通过监听此事件(@xx='...')然后执行代码
            props:['title']   //接受父组件传来的数据，然后用在此组件模板中
        })
    new Vue({
        el:'#app',
        data:{
            gc:[
                '第1个未做的',
                '第2个未做的',
                '第3个未做的'
            ],
            todolist :''
        },
        methods:{
            // 定义一个函数添加用
            addText(){
                this.gc.push(this.todolist); //往遍历的数组中添加数据
                this.todolist = ''  //清空输入框的值
            }
        }
     })
    </script> 
</body>

07-v-for在组件中的使用.gif

v-for 和 v-if 当它们处于同一节点， v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}  //会先循环再判断
</li>

vue与v-for有关数组数据变化而视图不更新的情况以及解决办法--传送门

** v-text 和 v-html 指令： **

<body>
    <div id="app">
        <span v-text="gc"></span>
        <!-- 和下面相同 -->
        <span>{{gc}}</span>  
        <span v-html="gc"></span>
        <!-- 和下面相同 -->
        <span>{{gc}}</span>
        <!-- 最终都渲染出<span>value</span> -->
        <!-- v-text和v-html指令区别在于v-html能解析标签，而text不能 -->
    </div>
    <script>
         new Vue({
            el:'#app',
            data:{
               gc : 'value'
            }
        })
       </script> 

    </script>
</body>

** v-on 指令： ** 事件绑定和监听指令，用在普通元素上时，只能监听原生DOM事件，使用在自定义元素组件上时，可以监听子组件触发的自定义事件，在监听原生DOM事件时，可以用特殊变量$event把它传入方法eg: v-on:click ="add($event)",其指令简写方式为 @click ，当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
事件修饰符:
- .stop 阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>
- .prevent 阻止默认事件触发 <form v-on:submit.prevent="onSubmit"></form>
- .capture 开启事件捕获
- .self 仅仅本元素才触发此绑定事件,子孙元素不能触发
- .once 仅仅触发一次，不能多吃触发

使用修饰符时，顺序很重要@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

键值修饰符：监听键盘事件
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right

可以通过全局 config.keyCodes 对象自定义键值修饰符别名：
// 可以使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112

修饰键
- .ctrl
- .alt
- .shift
- .meta
滑鼠按键修饰符
- .left
- .right
- .middle
** v-bind指令：**用于相应更新HTML特性。

绑定src ：

![]({{ imgUrl }})是错误写法,正确为![](imgUrl)

绑定 class：

1、对象语法：
<div v-bind:class="{ active: isActive }"></div>         //isActive为真就添加active样式
2、数组语法：
<div v-bind:class="[activeClass, errorClass]">       //2个类名都会渲染上
3、用在组件上：
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>
最终渲染成为：<p class="foo bar baz boo">Hi</p>

绑定内联样式style：

1、对象语法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
2、数组语法：
<div v-bind:style="[baseStyles, overridingStyles]">
3、自动添加前缀：
当 v-bind:style使用需要使用特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
4、多重值：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">从 2.3 开始你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

** v-pre指令：** 编译时跳过当前元素和它的子元素，可以用来显示原始的标签及内容，跳过大量没有指令的节点会加快编译。
** v-ref指令：** 此指令能拿到当前组件内的DOM元素包括子组件，通过this.$refs.xx，注意当v-ref和v-for一起使用时，注册的值就是一个数组,2.0已经改版，变为属性，以下是直接使用属性的方式

<span ref='ids' ></span>
js中可以通过this.$refs.ids 拿到上面的标签span

Vue2.0指令-（2）

1.指令含义：

2. 内部常用指令:

猜你喜欢

热点阅读