不是第一

Vue常用指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令.

  • v-if
  • v-show
  • v-for
  • v-text
  • v-html
  • v-clock
  • v-bind
  • v-on
  • v-model

v-if , v-show指令

v-if = "expression" : 根据表达式的真假来删除和插入元素

v-show = "expression" : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来

  • 我们用的指令中，v-if也是比较多的。
    • 当你设置为false的时候，当前条件块里包含的元素会被销毁，如果包含的是组件，则组件对应的生命周期函数（beforeDestroy，destroyed等）会执行。
    • 当你设置为true的时候，当前条件块里的元素会被重建，如果包含的是组件，则组件对应的生命周期函数（created，mounted等），计算属性，watch等会执行，相当于重新渲染。

v-if 例子 v-else

  • v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
<body>
  <div id="app">
    <h1 v-if="yes">yes!</h1>
    <h1 v-if="age > 16">age : {{age}}</h1>
    <h1 v-if="name.indexOf('i') > 0">name : {{name}}</h1>

    <a v-if="yes">yes</a>
<a v-else>No</a>

  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        yes: false, // 如果是true则显示内容 , false则不会显示
        age: 18,
        name: 'wickson'
      }
    })
  </script>
</body>

v-show 例子

<body>
    <div id="app">

        <div class="show">

            <h2 v-show='show'>
                healo apple store
            </h2>

        </div>

        <button @click='handleShow'> 动态显示</button>

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleShow() {
                this.show = !this.show
            }
        }
    })
</script>

v-for 指令

v-for = "item in items" : 基于一个数组渲染一个列表

v-for = "(item,index) in list"第一个参数是原数据 ，第二参数 index：

v-for = "(value,key,index) in listObject"v-for对对象进行循环： 此时第一个参数是 属性值 value，第二个参数是key，第三个参数是index（下标）

  • V-for循环遍历数组时推荐使用of，语法格式为(item，index)

item:迭代时不同的数组元素的值 index:当前元素的索引

  • V-for循环遍历对象时推荐使用in，语法格式为(item,name,index)

item:迭代时对象的键名键值 name:迭代时对象的键名 index:当前元素的索引

例子

<div id="app">
    <table style="width: 400px; height: 600px;" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
            </tr>

        </thead>
        <tbody>
            <tr v-for = "item in items">
                <td align="center">{{item.name}}</td>
                <td align="center">{{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                { name: 'well', age: '20' }, 
                { name: 'good', age: '19' }, 
                { name: 'nice', age: '18' }, 
                { name: 'ok', age: '17' }
            ]
        }
    })
</script>

 <!-- //使用in，index是一个可选参数，表示当前项的索引 -->
<div v-for="(item,index) in items"></div>
<!-- //使用of -->
<div v-for="item of items"></div>
<!--  -->
  <div id="app">
    <!-- v-for是vue中的遍历（循环）指令。(item index) in data，item是遍历的每一项名称，index是每一项的索引值 -->
    <!-- <p v-for="(item, index) in simpleList">索引值：{{index}}---数据：{{item}}</p> -->
    <!-- <p v-for="(obj, i) in objectList">索引值：{{i}}--id：{{obj.id}}--name：{{obj.name}}</p> -->
    <!-- <p v-for="(count, index) in 10">这是第{{count}}次循环，索引为{{index}}</p> -->

    <div>
      <input type="text" v-model="id">
      <input type="text" v-model="name">
      <button @click="add">添加</button>
    </div> 

    <!-- key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性 -->
    <p v-for="item in objectList" :key="item.id">
      <input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>

    var vue = new Vue({
      el: '#app',
      data: {
        simpleList: [1, 2, 3, 4, 5, 6],
        objectList: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '赵六' }
        ],
        id: '',
        name: '',
      },
      methods: {
        add() {
          const obj = {id: this.id, name: this.name}
          this.objectList.unshift(obj)
        }
      }
    })
</script>

v-text , v-html , v-clock指令

v-text : 会覆盖原有标签中的内容. 将data中的数据作为字符串去处理

v-html : 会见data作为html标签去渲染

v-clock : 占位符指令 , 会替换掉自己的这个占位 , 不会把整个元素清空

例子

<div id="app">
    <div v-clock>{{msg}} 你好</div>
    <div v-text="msg1">你好</div>
    <div v-html="msg2"></div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            msg: "我是v-clock",
            msg1: "我是v-text",
            msg2: "<div>我是v-html</div>"
        }
    })
</script>

v-bind , v-on 指令

v-bind : v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。 简写为一个冒号[ : ]

v-on : Vue提供的事件绑定指令. 可以简写成@

动态绑定class之动态添加class

//html
<div :class="{'active':isActive}"></div>
// 类名 active 依赖于数据 isActive ,当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名。
//或者

<div :class="{'active':isActive, 'active2':isActive2}"></div>

//  对象形式(绑定并判断多个)
//第一种（用逗号隔开）
<div :class="{ 'active': isActive, 'sort': isSort }"></div>

//第二种（放在data里面）
//这种方法用于已确定使用的样式，但是现在某种样式不显示或显示
<div :class="classObject"></div>
 
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}




// 前后都可以加静态css类名
<div :class="['sort',isActive ? 'active' : '' ,'sort2' ]"></div>
//或者
<div :class="[isActive?'active':'']"></div>
//或者
<div :class="[isActive==1?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'']"></div>
//或者
<div :class="[isActive==index?'active':'no-active']"></div>

例子

(1) 事件修饰符

  • .stop 阻止事件继续传播
  • .prevent 事件不再重载页面
  • .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
  • .self 只当在 event.target 是当前元素自身时触发处理函数
  • .once 事件将只会触发一次
  • .passive 告诉浏览器你不想阻止事件的默认行为
<!-- 阻止单击事件继续传播 -->

<a v-on:click.stop="doThis"></a>



<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>



<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat"></a>



<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>



<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>



<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div v-on:click.self="doThat">...</div>



<!-- 点击事件将只会触发一次 -->

<a v-on:click.once="doThis"></a>



<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->

<!-- 而不会等待 `onScroll` 完成 -->

<!-- 这其中包含 `event.preventDefault()` 的情况 -->

<div v-on:scroll.passive="onScroll">...</div>

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<template>
 
    <!-- 
        v-bind : 用户绑定属性的指令. 也可以简写成 :
        <button :title="msg">这是一个按钮</button>
    -->
    <button v-bind:title="msg">这是一个按钮</button>

    <!-- 
        v-on : 事件绑定指令. 可以简写为@
        <button @:click="show">点击我</button>
    -->
    <button v-on:click="show">点击我</button>
 
</template>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "我是一个按钮"
        },
        methods: {
            show() {
                alert("点一下玩一年");
            }
        }
    })
</script>
(1) 对象语法
 <!-- //进行类切换的例子 -->
<div id="app">
<!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
<!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
<div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>
<!-- 1. 渲染结果 -->
<!--因为hasError: false，所以text-danger不被渲染-->
<div class = "is-active"></div>

数组语法

<div id="app">
<!--数组语法：errorClass在data对应的类一定会添加-->
<!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
<p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
activeClass: false,
errorClass: 'text-danger'
}
})
</script>
<!-- 1. 渲染结果 -->
<!--因为activeClass: false，所以is-active不被渲染-->
<p class = "text-danger"></p>

直接绑定数据对象

<div id="app">
<!--在vue实例的data中定义了classObject对象，这个对象里面是所有类名及其真值-->
<!--当里面的类的值是true时会被渲染-->
<div :class="classObject">12345</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject:{
'is-active': false,
'text-danger':true
}
}
})
</script>
<!-- 1. 渲染结果 -->
<!--因为'is-active': false，所以is-active不被渲染-->
<div class = "text-danger"></div>

动态绑定class



<div v-if="props.cfgView" :class="{a:form.resource == '卫星',b:form.resource == '路网', modle_chart:true} ">
     
      </div>
 <!-- 绑定 单个 -->
<div :class="{ curryChecked : t.id === radioChecked }" >     
</div>
<!--  绑定多个 -->
<div
   class="step-item"
   :class="{
     finish: s.index < active,
     curryStep: s.index === active,
     allfinish: isAllFinish,
   }"
>
</div>


 <!-- style：对象、模板字符串 -->
<div
  v-if="isShowImgs"
  class="admin-info-header__img"
  :style="{ padding: `0 ${calcImgBoxPaddingX}` }"
>
</div>

<div
  :style="{ color: isTemplate === true ? '' : '#A7B1C7' }"
>
</div>

<!-- 对象 结合方法 -->
<div class="system-icon-basics" :style="bgColor(item)">
<script>
    // 动态设置icon的背景色
    bagColor(item) {
      let bgColoe = {};
      if (item.appName === 'app1') {
        bgColoe = {
          background: '#83E254',
          'box-shadow': '0 5px 12px 0 rgba(82,196,25,0.53)',
        };
      } else if (item.appName === 'app2') {
        bgColoe = {
          background: '#FF6850',
          'box-shadow': '0 5px 12px 0 rgba(255,0,0,0.33)',
        };
      } else if (item.appName === 'app3') {
        bgColoe = {
          background: '#FEB416',
          'box-shadow': '0 5px 12px 0 rgba(254,174,4,0.53)',
        };
      } else {
        bgColoe = {
          background: '#6DA6FF',
          'box-shadow': '0 5px 12px 0 rgba(109,166,255,0.53)',
        };
      }
      return bgColoe;
    } 
</script> 
</div>

v-model 指令

v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改

v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改

v-model //双向绑定 修饰符
//v-model.lazy  : 失去焦点后更新数据
<input type="password" v-model.lazy="pwd"  ></input>
{{pwd}}
// v-model.trim  : 去除空格
<input type="password" v-model.trim="pwd"  ></input>

例子

<div id="app">
    <h5>{{msg}}</h5>
    <div>
        我是v-model<br />
        <input type="text" name="" id="" v-model:value="msg">
    </div>
    <div>
        我是v-bind<br />
        <input type="text" name="" id="" v-bind:value="msg">
    </div>
    <button v-on:click="changeMsg">点击我</button>
</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "我是一个按钮"
        },
        methods: {
            changeMsg() {
                this.changeMsg1()
            },
            changeMsg1() {
                this.msg = "我现在不是按钮了"
            }
        }
    })
</script>
(1) 修饰符 - .lazy

默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

(2) .number

自动将用户的输入值转化为数值类型

<input v-model.number="msg">

(3) .trim

自动过滤用户输入的首尾空格

<input v-model.trim="msg">