Vue内置指令

---

前言

一、基本指令

1.v-cloak

1. v-cloak后面不需要配表达式，并且这个指令在Vue实例编译结束时移除，通常结合display：none使用

<style>
  [v-cloak] {display: none;}
</style>
-----------------------------
<div id="app" v-cloak>
    {{message}}
</div>
-----------------------------
 data: {message: 'hello'},
//为甚用这个：在Vue实例没有编译完成时，此时div在网页显示的内容是 {{message}}，而不是对应的数据
//给用户一种体验差的感觉，使用这个指令配合dispaly:none就可以解决这个问题，在{{message}}没有解析
//完成的时候不显示，在解析完成后显示对应的数据并且移除v-cloak

2.v-once（了解）

1. v-once也是一个不需要表达式的指令，作用是它定义的元素只会被渲染一次，即使之后数据改变也不会影响它里面的原数据

二、条件渲染指令

1.v-if

2. v-if,v-else根据条件渲染或销毁DOM元素，需要注意的是必须连续写，之间不能有其他标签

<p v-if="status === 1">if显示</p>
<p v-else-if="status === 2">if else显示</p>
<div v-else>else显示</div>

3. Vue渲染元素时，会复用已有的元素而不是重新渲染，给元素加上key则可以重新渲染（这句话说的太抽象，没懂）

2.v-show

4. 与v-if的用法基本一致，只不过v-show值为false时会隐藏元素display:noe，而不会直接干掉元素。结构上的不同

3.v-show与v-if的区别与选择

5. v-if是真正的条件渲染，从结构上干掉或者渲染元素，条件为false不会编译，条件为true才会编译
6. 而v-show则是通过css样式显示或者隐藏，无论条件为真或假都会编译。
7. v-show适用于频繁切换的条件。而v-if消耗性能，适合不经常改变的场景。

三、列表渲染指令v-for

1.基本用法

注意：遍历数组或者对象都需要搭配in或者of使用

1.遍历数组

1. 需要遍历数组或者枚举一个对象的时候就会用到v-for

<div id="app">
    <ul>
      <li v-for="book of books">{{book.name}}</li>
    </ul>
</div>
------------------------------------------------
 data: {
      books: [
        { name: 'vue实战' },
        { name: '数据结构' }
      ]
    },
//这里主要是用v-for将li标签循环渲染，循环多少次就插入多少个li标签
/*
这里有个问题，使用in也可以遍历，但是与js的语法冲突，使用in遍历数组
取出来的是下标，而不是下标对应的元素，这里使用in取出来的直接就是下标
对应的元素（也就对象），然后再去访问这个对象的name属性，这样竟然不报错，奇怪
*/

2. 在使用v-for遍历循环的时候支持传递一个（一个：量词）参数当作索引

 <li v-for="(book , index) of books">{{index}} {{book.name}} </li>
 //需要注意的是，第一个参数是取出来的元素，第二个参数才是数组下标

2.遍历对象

1. v-for也可以遍历对象属性

 <span v-for="value in user">{{value}}</span>
 ----------------------------------------------
  user: {
        name: 'John',
        gender: '男',
        age: 26
      }
/*
网页渲染结果：
<span>John</span>
<span>男</span>
<span>26</span>
*/

2. 在遍历对象时，有两个可选的参数，分别是键名key和索引index

 <ul>
	   <li v-for="(value,key,index) in user">
	     {{index}}-{{key}}:{{value}}
	   </li>
</ul>
------------------------------------------------------
data: {
      user: {
        name: 'John',
        gender: '男',
        age: 26
      }
    },
/*
渲染后的效果：
<li>0-name:John</li>
<li>2-age:26</li>
<li>1-gender:男</li>
*/

3.迭代整数（感觉没什么用）

 <span v-for="n in 10">{{n}}</span>
/*
渲染效果：12345678910
*/

4.关于迭代插入的元素和遍历语法与js冲突问题

1. 迭代插入的元素：v-for指令在哪个标签上，就插入哪个标签。比如v-for在标签p上，然后循环了十次，此时的p标签（包括里面的内容）就有10个
2. 遍历语法与js冲突问题：

/*
在JavaScript中：
1.for in
(1)遍历对象取出的是key
(2)遍历数组取出的是index
2.for of
(1)无法遍历普通对象
(2)遍历数组取出的是数组元素 

在Vue中
Vue中的v-for in 和v-for of 如果只有一个参数
(1)遍历数组：取出的是数组元素
(2)遍历对象：取出的是的value

注意区分与Javascript的区别
*/

2.数组方法

1. 常用数组方法

---------改变原数组----------
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
---------不改变原数组，返回新数组----------
filter()
concat()
slice()

以上的用法与Javascript一致：见笔记JavaScript数组

  app.books.push({ name: '操作系统' });

  app.books.unshift({ name: '计算机网络' });

  app.books.shift();

  app.books.reverse();

2. 使用filter()过滤并不会重新渲染整个数组对应的列表。vue而是会最大化的复用DOM元素。即数组中的某一条数据没有改变的时候，它对应的视图（或者叫DOM）也不会重新渲染。而是复用
3. 注意：使用数组索引改变元素不会使视图重新渲染app.books[0] = xxx

3. 数组过滤与排序

1. 当不想改变元素组，而是想用数组副本来做排序或者过滤时可以使用计算属性

 <li v-for="book of filterBooks">{{book.name}}</li>
 --------------------------------------------------
 computed: {
      filterBooks() {
        return this.books.filter(function (book) {
          return book.name.match(/vue实战/);
        })
      }
    }
//这里用的是过滤举例。排序也是一样的

四、方法与事件

1.基本用法（v-on）

1. v-on的表达式可以是JavaScript语句，也可以是methods内的函数

{{counter}}
<button @click="counter++">+</button>
<button @click="counter--">-</button>

<button @click="increment()">+</button>
<button @click="increment(10)">+10</button>
---------------------------------------------
 methods: {
      increment(count) {
        count = count || 1;
        this.counter += count;
      }
    }
/*
在methods中定义了供v-on调用的方法,
注意：
(1)v-on调用的方法可以不跟括号，不跟括号会自动把Js原生事件对象event传入函数（第一个参数接收）

(2)v-on调用的方法加上括号则不会传任何实参。如果不打算传参数，括号其实都是可以省略不写的

(3)v-on调用的方法如果需要传递参数，并且需要使用Js事件对象event，则可以使用'$evnet'访问
	把$event当作实参传递给methods对应的方法，代码如下⬇
*/
 <a href="www.baidu.com" @click="handleClick('禁止打开',$event)">打开链接</a>
 ------------------------------------------------------------------------------
 handleClick(message, event) {
        event.preventDefault();
        alert(message)
      }

2.修饰符

Js基础不太好，事件有些看不懂，补完事件回来做笔记。《Vue.js实战》5.4.2修饰符