Vue2.0-3.0 入门到实战 - 2 vue指令

1 Vue 指令

v- 前缀的 特殊标签属性

1 v-html="表达式"  可以解析 文本html  类似 innerHtml

2 v-show  与 v-if

v-show="表达式"  true 表示 显示   false 标识隐藏 

v-if="表达式"  true 表示 显示   false 标识隐藏 

区别 

当v-show 的值为false 时  此时在标签中 任然存在 ,同时被标记为 display:none 

适用用频繁切换显示与隐藏的场景

当v-if 的值为false时 ,在标签中 不存在

3 v-if  与 v-else  与 v-else-if

使用时需要在相邻的地方使用

<div id="app">
  {{ msg }}

    <p v-if="type==='1'">  类型1 </p>
    <p v-else>  类型2</p>

    <p v-if="state===1">  状态1 </p>
    <p v-else-if="state===2">  状态2</p>
    <p v-else-if="state===3">  状态3</p>
    <p v-else>  状态4</p>
</div>



<script type="text/javascript" src="../static/js/vue.js"></script>

<script>

  const app = new Vue({
    el:'#app',
    data:{
      type : '1',
      state : 1,
    }
  })


</script>

 4 v-on  注册事件 = 添加监听 + 提供处理逻辑

v-on:事件名 = '内联语句'

v-on:事件名 = 'methods中的函数名'

例:

v-on:click='count++'

v-on:  在频繁输入时比较繁琐  ,可以替代为 @

v-on:    =   @ 

v-on:click='count++'     等价于   @click='count++'

5 v-bind

v-bind:属性名 = "表达式"

v-bind:  在频繁输入时比较繁琐  ,可以替代为 :

例 <img v-bind:src="imgurl">  等价于  <img :src="imgurl"> ​​​​​​​

imgurl 在 data中 初始化

const app = new Vue({
  el:'#app',
  data:{
    type : '1',
    state : 1,
    imgurl : "./xxx/xxx/x.png",
    list:["item1","item2","item3","item4"]
  },
  methods:{
      fn(){
          alert("点击了按12213钮")
      }
  }
})

6 v-for

 v-for = "(item,index) in 数组"

<li v-for = "(item,index) in list">
        {{item}} -- {{index}}
</li>

/*
item1 -- 0
item2 -- 1
item3 -- 2
item4 -- 3
*/

7 v-for 中的 :key

作用: 给列表中的项添加唯一标识.便于Vue 进行列表项的正确排列复用

8 v-model

作用:给表单使用,双向绑定数据 ,可以快速获取或设置表单内容

 小知识: +new Date() 时间戳

小知识:@keyup.enter   键盘回车的时候触发

<input @keyup.enter="fn" type="text" v-model="username">

小知识:v-model.trim  去空格

小知识:v-model.number 转数字

小知识 @click.stop="fn()"  阻止 事件冒泡  等价于 e.stopPropagation()

小知识 @click.prevent 阻止默认行为

9 v-bind:class  与 v-bind:style  增强 (简写 :class  :style)

<div :class="firstClass"></div>
<br/>
<div :class="firstClass2"></div>


//--------

firstClass:{
   color:true,
   wh:true,
   wh2:false
},
firstClass2:["color","wh"]

 小知识  可以通过延时器完成防抖的功能

 // 防抖 操作
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{

        },300)