Vue-Directives

• 基本指令

1. v-cloak
2. v-once

• 条件渲染指令

1. v-if(v-else)
2. v-show

• 列表渲染指令

1. v-for

• 数组更新检测
• 方法与事件
• v-model（表单）

一、基本指令

v-cloak

作用：解决初始化慢导致的页面闪动，常与display：none结合使用

*加载缓慢的情况下，页面会出现如{{msg}}，加载完之后才会显示对应的内容，影响用户体验。v-cloak解决了这个问题。

v-once

作用：定义它的元素只能渲染一次，后续都不会再渲染

例：

<style>
  [v-cloak]: {
    display: none
  }

</style>

<div id="app">
  <div v-cloak>{{msg}}</div>
  <span v-once>{{word}}</span>
  <hr>
  <button @click='changeEnglish'>点击修改</button>
</div>

new Vue({
  el: '#app',
  data: {
    msg: '今天周一',
    word: 'Today is Monday.'
  },
  methods: {
    changeEnglish() {
      this.msg = '今天周二' //中文修改
      this.word = 'Today is Tuesday' //v-once 使得英文不会被修改
    }
  }
})

二、条件渲染指令

v-if（v-else）

v-if后面接的是等号，等号后面接的是布尔值；if true显示if后面的内容，if false显示else后面的额内容。

• 真正的渲染
• v-else需要紧跟在v-if后面
• v-else-if（vue.2.1.0新增）
• key管理可复用的元素（key唯一，提供key值来决定是否复用该元素）

例：点击按钮，用户、密码框切换

<div id="app">
  <template v-if="ok === 'you'">
    用户名：<input type="text" value="请输入用户名" key="userName">
  </template>
  <template v-else>
    密码：<input type="password" value="" key="userPass">
  </template>
  <button @click='clickChange()'>点击切换</button>
</div>

new Vue({
  el: '#app',
  data: {
    ok: 'you'
  },
  methods: {
    clickChange() {
      if (this.ok === 'you') {
        this.ok = ''
      } else {
        this.ok = 'you'
      }
    }
  }
})

这里如果不加key，会有bug

*用v-for更新已渲染过的列表时，它默认采用的是“就地复用”的原则，也就是如果数据项顺序发生了改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处的元素。

*如果想跟踪每个节点的身份，从而重用或重新排列现有元素，可使用key。

*在表单或者选框中，加上key，可以使得原先填写的内容或勾选的选项，虽有顺序或切换的变化,但是原先填写的内容或勾选处始终跟着原来对应的项。

v-show

• 简单的切换display属性
• v-show=‘条件’  当条件为true时，则内容显现
• v-show不支持template语法
• v-show不支持v-else

<span v-show='3>1'>{{num}}</span>

总结：

v-if

• 当条件不成立时，不会渲染
• 切换开销较大，适合不太变化的场景
• 实时渲染：页面显示，元素渲染；不显示，元素移除（切换用户、密码的例子可以看出，当从用户切换到密码时，页面中用户代码会被移除）

v-show

• 无论成不成立都会渲染
• 首次渲染开销较大，但切换开销较小，因此适合经常变化的场景
• 只是改变了display的属性，元素会一直在页面中

应用：

• 渲染的结果根据时间而变化，推荐v-if
• 频繁切换页面推荐v-show

三、列表渲染指令

v-for

应用：

• 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用列表渲染指定v-for。

• v-for写在要遍历的元素上

两种使用场景：

• 遍历多个对象

遍历多个对象，遍历的一定是数组

这里的fruit值的是  {name:'banana'} ...

<div id="app">
  <ul>
    <li v-for='fruit in fruits'>{{fruit.name}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:[
   {name:'banana'},
   {name:'apple'},
   {name:'orange'}
   ]
  }
})

带索引的写法

<div id="app">
  <ul>
    <li v-for='(fruit,index) in fruits'>{{index}}---{{fruit.name}}</li>
  </ul>
</div>

• 遍历一个对象的多个属性

<div id="app">
  <ul>
    <li v-for='value in fruits'>{{value}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:{
   a:'banana',
   b:'apple',
   c:'orange'
   }
  }
})

带value key index的写法（v--k--i   顺序不可变）

<div id="app">
  <ul>
    <li v-for='(value,key,index) in fruits'>第{{index}}个是{{value}}，键是{{key}}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
   fruits:{
   a:'banana',
   b:'apple',
   c:'orange'
   }
  }
})

四、数组更新检测

<div id="app">
  <div v-for="fruit in arr">{{fruit}}</div>
</div>

new Vue({
  el: '#app',
  data: {
    arr: ['apple', 'banana', 'orange']
  }
})

以下代码均在此代码基础上修改

• 变异方法

.push()　　往数组的末尾添加一个元素，返回的是添加完元素后整个数组的长度

.pop()　　将数组的最后一个元素删除，返回的是删除的那个元素

.shift()　　将数组的第一个元素删除，返回的是那个删除的元素

.unshift()　　在数组的第一个元素位置添加一个元素，返回的是添加完元素后整个数组的长度

.splice()　　

含三个参数：

第一个参数表示开始操作的位置（索引）

第二个参数表示要操作的长度

第三个参数表示可选参数（可以添加一个元素，但是这个元素会自动跳到数组索引为0的位置上）

.sort()　　给数组排序

.reverse()　　翻转数组

<div id="app">
  <div v-for="fruit in arr">{{fruit}}</div>
  <button @click='num1'>点击排序</button>
  <button @click='num2'>点击翻转</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    arr: ['apple', 'banana', 'pizza'],
  },
  methods: {
    num1(a, b) {
      this.arr.sort((a, b) => {
        return a.length - b.length
      })
    },
    num2(){
    this.arr.reverse()
    }
  }
})

• 修改数组的某一项内容

Vue.set(该数组，要修改的那一项的索引，替换的内容)

Vue.set(app.arr,1,"mango")

• 修改数组的长度

.splice(索引) 从哪一项开始删除后面的内容，包括这一项

app.arr.splice(1) //["banana","pizza"] 页面上还有apple 

• 重塑数组（不会改变原来的数组，而是返回一个新的数组）

.filter（）过滤

{{matchpp}}

computed: {
    matchpp() {
      return this.arr.filter(function(pro) {
        return pro.match(/pp/)
      })
    }
  }

.concat()  合并

......
matchpp() {
      return this.arr.concat('water','juice') 
　　　　//[ "apple", "banana", "pizza", "water", "juice" ]
    }
......

.slice(开始索引，结束索引)  返回选定的元素

......
matchpp() {
      return this.arr.slice(1,2) //[ "banana" ]
    }
......

五、方法与事件

例：点击按钮数字加1

<div id="app">
  {{count}}
  <button @click='add1(1)'>点击加1</button>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    add1() {
      this.count += 1
    }
  },
  // addNum(count) {
  // count = count || 1
  // this.count += count
  // }
})

*如果方法中带有参数，但是调用时没有加括号，默认传原生事件对象event

修饰符

.stop

阻止单击事件向上冒泡

<div id='app'>
  <div @click='divClick' style='100px;height:100px;background:skyblue'>
    <button @click.stop='btnClick'>点击</button>
  </div>
</div>

new Vue({
  el: '#app',
  methods: {
    divClick() {
      alert('div被点击了')
    },
    btnClick() {
      alert('btn被点击了')
    }
  }
})

.prevent

提交事件并且不重载页面

<div id='app'>
  <form action="" @submit.prevent='hangle'>
    <button type='submit'>提交</button>
  </form>
</div>

new Vue({
  el: '#app',
  methods: {
    hangle() {
      alert('sub提交')
    }
  }
})

.self

只是作用在元素本身而非子元素的时候调用

<div id='app'>
  <div @click.self='divClick' style='100px;height:100px;background:skyblue'>
    <button @click='btnClick'>点击</button>
  </div>
</div>

.once

只执行一次

<button @click.once='aaa'>这个按钮只能执行一次哦</button>

可以监听键盘事件：

<input @keyup.13 = 'submitMe'>
<input @keyup.enter = 'submitMe'>

submitMe(){
    alert('enter被按了')
    }

*vue提供了一些如enter，可以直接使用

 

六、表单与v-model

v-model

v-model作用：用于表单类元素上的双向绑定事件

v-model默认做了两件事

<input type="text" v-model="message"/>
//相当于
<input typt="text" :value="message" @input="message = $event">

• input框、textarea

<div id='app'>
 <input type="text" v-model='msg'>
 {{msg}}
</div>


new Vue({
el:'#app',
data:{
msg:''
}
})

*所显示的值只依赖于所绑定的数据，不再关心初始化时插入的value

 

• 单选框

单个单选框，v-bind绑定布尔值（v-model不生效）

多个单选框，使用v-model配合value使用，绑定选中的单选框的value值，绑定的初始值可以随意给

<div id='app'>
  苹果<input type="radio" name="checks" value="苹果" v-model="checkname"> <br>
  香蕉<input type="radio" name="checks" value="香蕉" v-model="checkname"> <br>
  橘子<input type="radio" name="checks" value="橘子" v-model="checkname"> <br>
  现在选中的是---{{checkname}}
</div>


new Vue({
  el: '#app',
  data: {
   checkname:''
  }
})

• 复选框

单个复选框

v-bind v-model 均可使用

 v-bind单个复选框 <input type="checkbox" v-bind:checked = 'onCheck1'> <br>
 v-model单个复选框 <input type="checkbox" v-model='onCkeck1'>


new Vue({
  el: '#app',
  data: {
   onCheck1:true
  }
})

多个复选框

使用v-model，绑定一个数组

如果绑定的是字符串，则会转化为true，false，与所有绑定的复选框的checked属性相对应

苹果 <input type="checkbox" value='苹果' v-model='onCheck2'>
香蕉 <input type="checkbox" value='香蕉' v-model='onCheck2'>
橘子 <input type="checkbox" value='橘子' v-model='onCheck2'>
{{onCheck2}}


new Vue({
  el: '#app',
  data: {
   onCheck2:[]
  }
})

• 下拉框

v-model一定是绑定在select上

 

单选下拉框

<select v-model="sele">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="橘子">橘子</option>
  </select>
  {{sele}}


new Vue({
  el: '#app',
  data: {
    sele: [] //sele:''
  }
})

多选下拉框

按住ctrl键选择

<select v-model="sele" multiple>
   <option value="苹果">苹果</option>
   <option value="香蕉">香蕉</option>
   <option value="橘子">橘子</option>
</select>
{{sele}}


new Vue({
  el: '#app',
  data: {
    sele: []
  }
})

总结

如果是单选，初始化给定字符串，因为v-model此时绑定的是字符串或者布尔值。

如果是多选，初始化给定一个数组。

 

绑定值

单选按钮

只要给单选按钮v-bind一个value值，此时v-model绑定的就是这个value值

<div id="app">
  一个单选框<input type="radio" v-model='picked' v-bind:value='value'> <br>
  picked---{{picked}}
  value---{{value}}
</div>


new Vue({
  el: '#app',
  data: {
    picked: true,
    value: '111'
  }
})

复选框

要求：选中和不选中的value不一样

<div id="app">
  复选框 <br>
  <input type="checkbox" v-model='toggle' :true-value='value1' :false-value='value2'> <br>
  {{toggle == value1}} -- {{value1}}<br>
  {{toggle == value2}} -- {{value2}}
</div>


new Vue({
  el: '#app',
  data: {
    toggle: true,
    value1: '被选中',
    value2: '未被选中'
  }
})

下拉框

在select标签上绑定value值对option没有影响；

在option标签上绑定value值，v-model绑定的就是这个value的值。

 

修饰符

.lazy

v-model默认是在input输入时实时同步输入框的数据

.lazy可以使其在失去焦点或者敲回车键之后再更新

<div id="app">
 <input type="text" v-model='changeSth'> {{changeSth}}
 <input type="text" v-model.lazy='lazySth'> {{lazySth}}
</div>


new Vue({
  el: '#app',
  data: {
  changeSth:'',
  lazySth:''
  }
})

.number

输入的内容，只要都是数字内容则实时转化为数字类型

<div id="app">
 <input type="text" v-model.number='isNum'> <br>
 {{isNum}}---{{typeof isNum}}
</div>


new Vue({
  el: '#app',
  data: {
  isNum:''
  }
})

.trim

过滤输入框中的首尾空格

<div id="app">
 <input type="text" v-model.trim='trimStr'> <br>
 {{trimStr.split('').length}}
</div>


new Vue({
  el: '#app',
  data: {
  trimStr:''
  }
})

自定义指令

• 全局自定义指令

<div id="app">
        获取焦点：<input type="text" v-focus>
</div>

<script>
  Vue.directive('focus',{
        inserted(el){
             el.focus()
         }
      })
   new Vue({
       el: '#app'
   })
</script>

• 局部自定义指令

new Vue({
  el: '#app',
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
})