1、基本指令

1.1、v-text

解析文本

    <p v-text="msg">{{msg}}</p>

    data{
        msg:'你好'
    }

1.2、v-html

解析html

<h2 v-html="content"> </h2>

data:{
    content:"<a href=’www.baidu.com>百度</a> ",
    }

1.3、v-bind

v-bind 的基本用途是动态更新 HTML 绑定属性详细看《vue-内置指令-1-v-bind》)

1.4、v-on指令的作用

用来绑定事件监听器

<div id="app">
      <span :class="{sColor:active}">{{text}}</span>
      <button @click="changeOn">点我变色</button>
    </div>

 <style>
      .sColor{
        color:red;
      }
    </style>

data:{
        text:'我会变色',
        active:false,
      },
      methods:{
        changeOn(){
          if(this.active==false){
            alert(this.active);
            this.active=true;
          }else{
            this.active=false;
          }
        }
      }

1.5、语法糖？

在不影响功能的情况下，添加某种简单的语法也能实现效果

优点：使用语法糖可以简化代码，更便于程序员开发。

v-bind的语法糖？ v-bind 的语法糖就是去掉 v-bind 替换成冒号， :属性名=表达式”

<div :class="className">

v-on的语法糖？ 绑定事件监听器 v-on 的语法糖就是去掉 v-on 替换成@

<button @click="add">+1</button>

1.6、v-cloak

网络慢，文件较大，解决初始化慢，页面闪动和display:none;配合使用

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

1.7、v-once

定义它的元素和组件只渲染一次

<p v-once></p>

2、条件渲染指令

2.1、v-if、v-else-if、v-else

v-if的作用:根据表达式的真假切换元素的显示状态

后面接等号，等号后的内容必须是布尔值，为真，则渲染

缺点： Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。只会渲染变化的元素，也就是说，input元素被复用了。

解决方法：加key，唯一，提供key值可以来决定是否复用该元素

<p v-if="0>1">{{}}</p>
<p v-else-if="2>1">{{}}</p>
<p v-else>{{}}</p>

2.2、v-show

修改元素的display属性,实现隐藏。结果为布尔值。

2.3、v-if与v-show的区别

v-if：是动态的向DOM树内添加或者删除DOM元素

v-show的元素永远存在也页面中，本质就是标签display设置为none，控制隐藏

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

 <div id="app">
      <span v-if="isShow">{{text}}</span><br>
      <span v-show="isShow">{{msg}}</span>
    </div>

 data:{
        text:'我是v-if',
        msg:'我是msg',
        isShow:false
      },

v-if&&v-show.png

3、列表渲染指令：v-for

用法: 一定要写在遍历的元素上，v-for后面接等号
当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-for。
两种使用场景：

1）、遍历多个对象

//vueMeth 自定义的变量
/vueMeth in vueMethods 相当于循环

<ul>
    <li v-for="vueMeth in vueMethods">{{vueMeth.name}}</li>
</ul>

data:{
    vueMethods:[
        {name:'多思考'},
        {name:'多练习'}，
        {name:'多听课'}
    ]
}

带索引的写法：括号的第一个变量，代表item,第二个代表index

<ul>
   <li v-for="(vueMeth,index) in vueMethods">{{index}}---{{vueMeth.name}}</li>
</ul>

2）、遍历一个对象的多个属性

<ul>
   <li v-for="value in goddess">{{value}}</li>
</ul>

data:{
    goddess:{
        ns1:'范冰冰',
        ns2:'高圆圆',
        ns3:'刘亦菲'
    }
}

拿到value,key,index

<ul>
   <li v-for="(value,key,index) in goddess">{{value}}--{{key}}--{{index}}</li>
</ul>

4、数组更新，过滤与排序

改变数组的一系列方法：

push() 在末尾添加元素
pop() 将数组的最后一个元素移除
shift() 删除数组的第一个元素
unshift（）：在数组的第一个元素位置添加一个元素
splice() ：可以添加或者删除函数 —返回删除的元素

三个参数：

1). 第一个参数表示开始操作的位置

2). 第二个参数表示：要操作的长度

3). 第三个为可选参数：
```
  sort()：排序     
  reverse()
```

两个数组变动vue检测不到:

  1). 改变数组的指定项
  2). 改变数组长度

解决方法：

 1. set  （Vue.set(app.arr,1,”car”); ）
 2. splice    （app.arr.splice(1)： 改变数组长度 ）

过滤：filter

//过滤含有oo的元素
        <div>
            {{filterOO}}
        </div>


        computed:{
             filterOO(){
             //参数代表的过滤每一项
                 return this.arr.filter(h.match(/oo/));
             }
        }

5、方法和事件

基本用法

v-on绑定的事件类似于原生的onclick等写法

methods:{
    handle:function (count){
        count = count || 1; 
        this.count += count; 
    } 
}

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

6、修饰符

在vue中传入event对象用$event
@click.stop="xxx":阻止单击事件向上冒泡/事件传播

<button @click.stop="btnclick">点击</button>

@click.prevent="xxx":表示阻止默认动作

<form action="" @sumbit.prevent="函数">
<button @click.stop="btnclick">点击</button>
</form>

self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法
@keypress.enter="xxx"可以监听键盘事件：

<input @keyup.13 = "submitMe">

——指定的keyCode

vueJS为我们提供了：

.enter

.tab

.delete

7 .sync

:money.sync="total" 等价于：momney="total" v-on:update:money="total=$event"

《vue-内置基本指令-2》