创新实训进度（六）——vue.js学习笔记2

创新实训进度（六）

vue.js学习笔记2——指令学习

v-if 指令
条件渲染指令，根据表达式的真假来删除和插入元素。用于条件性渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染（truthy：是指布尔值ture还包括其他数据类型转换为布尔值时为真的值）

<div id="app">
    <h1 v-if="yes">Yes!</h1>
    <h1 v-if="no">No!</h1>
    <h1 v-if="count>15">{{count}}</h1>
    <h1 v-if="name.indexOf('B')>=0">{{name}}</h1>
</div>

<script>
    var app = new Vue({
        el:"#app",
           data:{
              yes:true,
              no:false,
              count:10,
              name:'A'
           }
       })
</script>

还可以使用v-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-show指令
条件渲染，v-if是条件满足时才渲染元素，v-show先渲染元素，控制css显示和隐藏

<div id="app">
    <button v-on:click="display">显示隐藏</button>
    <div v-show="isShow">显示</div>
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            display:function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-if和v-show的区别在于v-if在条件不满足时，不会渲染对应元素，v-show在条件不满足时，会渲染元素，只是加了隐藏样式。
v-for 指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"，其中items是一个数组，item是当前被遍历的数组元素。

<div id="app">
    <ul>
        <li v-for="(item,index) in items">
            {{index}}--{{item}}
        </li>
    </ul>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:[1,2,3,4,5]
        }
    })
</script>

v-on指令
用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

<div id="app">
    <button v-on:click="add">click+1</button>
    <div>数值增加了{{counter}}次</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            counter:0
        },
        methods:{
            add:function () {
                this.counter++;
            }
        }
    })
</script>

事件修饰符要放在绑定事件的名称之后如：
v-on:click.stop=“***”

.stop 阻止冒泡事件
.prevent 阻止表单默认事件
.capture 改变冒泡顺序（捕获）
.self 在冒泡事件中，点击目标是自身才触发事件
.once 事件执行一次
.passive 增强性能的优化修饰符

vue还提供按键修饰符获取键盘事件值

.enter 回车键
.tab 制表符
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格
.up 上箭头
.down 下箭头
.left 左箭头
.right 右箭头

v-model指令
让表单元素和数据实现双向绑定（映射关系）(表单元素设置了之后会忽略掉value，checked，selected），常用在表单 <input>及<textarea>、<select>标签上。

<div id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })
</script>

v-bind 指令
给元素绑定属性v-bind:id=”idName”,也可以自定义绑定自定义属性v-bind：data=“dataName”

<div id="app">
    <div>
        <button v-bind:id="attrbuteId" v-bind:data-index="index" v-on:click="getAttr">属性绑定</button>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            attrbuteId: "10", //绑定id属性的值
            index:"1", //绑定自定义属性index的值
        },
        methods:{
            getAttr:function (event) {
                console.log("button的id值为："+event.target.id);
                console.log("button的自定义属性index值为："+event.target.dataset.index);
            }
        }
    })
</script>